Raleigh

Recap: Homegrown | App Design: Designing for Android

Adit is the Director of Creative Strategy and lead designer at the mobile app development firm Two Toasters. Acting as Director of Creative Strategy Adit has worked with a number of clients to build critically acclaimed iOS and Android applications. Most recently, he worked with Simple on the design of their well received android application. In his spare time Adit is an avid cook with an affinity for testing the level of spiciness he can manage.

For those unfamiliar with the Android platform, the process for reinterpreting an iOS or web application for native use is beset by a number of pitfalls and constraints. After all, like designing for native experiences on any other platform, there are many eccentricities and idioms on Android that must be considered in order to craft a consistent and satisfying application. In this talk, Adit walked through the steps for reimagining common iOS usage paradigms, some uniquely Android usage metaphors, best styling practices, designing for multiple form factors and processes for supporting developers to execute designs.

Why Design Natively?

 

How To Start Designing Idiomatically

Screen Densities & Measurement

LDPI is almost completely deprecated while HDPI and XHDPI are the most common. Measurements on Android are specified in units called DP, which stands for Density Independent Pixels. So an on-screen element measured at 8dp works out to the following approximate measurements in pixels:

In this way, user interface elements correspond to an easy to remember ratio, 3:4:6:8.

Navigation

Back Button
Up Button
Action Bar
Action Bar Example

The action bar sits at the top of any app, just below the system status bar. It is and should be used for all major persistent interactions. In portrait mode it is 48dp tall. From left to right we can see the following:

Tab Navigation
Tab Nav Example

The tabbed navigation bar fills 48dp below the action bar in fixed mode. This bar integrates with the action bar on tablets. There is a scrollable version which is shorter and offers more available space on-screen. However, it obscures the total number of tabs.

View Control

Also known as a Spinner in Android parlance, it offers an alternative to tabs where each selection in the list modifies or replaces the view below the action bar.

Side/Navigation Drawer
Navigation Drawer

Until recently only available via third party libraries, the navigation drawer is most often used to display an app’s main navigation options. As of May 2013, this user interface pattern is now officially supported by the standard Android distribution. This updated interaction replaces the previously used “<” icon as part of the “Up” button with three vertical lines aligned to the left side of the screen. It can also be accessed via swipe. Most third party versions of this UI pattern often require that an action bar is present to use.

 

Pitfalls

Designing natively and idiomatically for Android involves avoiding UI patterns, graphical styles, and so on that might be found on other platforms like iOS and Windows Phone 7. These are a few highlights:

Where to Begin

Setup

 

Design for Multiple Resolutions

 

Tablets
9-patch Images

 

Conclusion

An idiomatic, native approach to designing Android apps is important because it simplifies interactions.

Q & A

After the talk, Adit took questions from attendees.

Recommended Links & Inspiration

Android
Mobile App Design

 

About the Author

This talk was transcribed and expanded by Tim Swezy who profusely apologizes for any mistakes. Tim is a visual designer at Epocrates in Durham where he spends about half of his time designing for the Android platform (idiomatically of course) and the other half designing for iOS. He is a member of the Community Board for AIGA Raleigh and hosts the Durham edition of AIGA Raleigh’s Town Square.

Exit mobile version