Android design highlights

Smashing Magazine just posted a great article on the basics of designing for Android. See the full article here.

Some highlights:

"For designers, Android is the elephant in the room when it comes to app design. As much as designers would like to think it’s an iOS world in which all anyone cares about are iPhones, iPads and the App Store, nobody can ignore that Android currently has the majority of smartphone market share and that it is being used on everything from tablets to e-readers. In short, the Google Android platform is quickly becoming ubiquitous, and brands are starting to notice.

Android’s UI conventions are different from iPhone’s. The big difference is the “Back” key, for navigating to previous pages. The Back key on Android devices is fixed and always available to the user, regardless of the app. It’s either a physical part of the device or digitally fixed to the bottom of the screen, independent of any app, as in the recently released Android 3.0 for tablets (more on this later).

The hard “Back” key on a smartphone running Android 2.0.

The presence of a Back key outside of the app itself leaves space for other elements at the top of the screen, such as a logo, title or menu. While this navigational convention differs greatly from that of iOS, there are still other differentiators that Android calls “design patterns.” According to Android, a design pattern is a “general solution to a recurring problem.” Below are the main Android design patterns that were introduced with version 2.0.

Action Bar

The action bar is one of Android’s most important design patterns and differentiators. It works very similar to a conventional website’s banner, with the logo or title typically on the left and the navigation items on the right. The action bar’s design is flexible and allows for hovering menus and expanding search boxes. It’s generally used as a global feature rather than a contextual one.

The action bar design pattern as used by Twitter.

Companion Widget

Widgets allow an app to display notifications on the user’s launch screen. Unlike push notifications in iOS, which behave as temporary modal dialogs, companion widgets remain on the launch screen.

The companion widget by Engadget, New York Times and Pandora.

Using established design patterns is important for keeping the experience intuitive and familiar for your users. Users don’t want an iPhone experience on their Android device any more than a Mac user wants a Microsoft experience in their Mac OS environment. Understanding design patterns is the first step to learning to speak Android and designing an optimal experience for its users. Your developers will also thank you!

Android Design Deliverables

OK, so you’ve designed your Android app and are ready to make it a reality. What do you need to hand off to the developer? Here’s a quick list of deliverables:

1. Annotated wireframes of the user experience based on the baseline “medium” size of 320 × 480 DPI. Include additional screens for instances when a “large” screen size requires a modified layout or when a landscape version is required.
2. Two sets of visual design mock-ups of key screens for both medium-sized HVGA 320 × 480 screens and large-sized 320 × 533 screens (based on a WVGA 800 × 480 hDPI physical pixel screen size).
3. Specifications for spacing, font sizes and colors, and an indication of any bitmaps.
4. A graphics library with lDPI, mDPI and hDPI versions of all bitmaps saved as transparent PNG files. If you’re planning on developing one version of your app for smaller devices and another version for larger devices, then you’ll need lDPI and mDPI sets for your “medium” baseline design and one hDPI set for your “large” version.
5. Density-specific app icons, including the app’s launch icon, as transparent PNG files. Android already provides excellent tips for designers on this topic, along with some downloads, including graphic PSD templates.

A Word of Advice

Do get your hands on an Android phone and tablet, and spend some time downloading apps and exploring their interfaces. In order to design for Android, you have to immerse yourself in the environment and know it intimately. This might sound obvious, but it’s always surprising to hear when even the product manager doesn’t have an Android device."