The Best Approach to Android’s Design Guidelines

Android development involves more than simply writing code and publishing your app to a marketplace. A well-planned user interface can mean the difference between a usable app with modest sales and a great app that generates stellar sales.

When it was introduced, Android’s lacked proper design guidelines and standards. Developers were left to decide the best way to give users usable in-app experiences. Not all design decisions resulted in exceptional apps. That’s all changed with Android Design Guidelines. These official guidelines–paired with templates, fonts and iconography–can help you create an app worthy of being featured in the Google Play Store.

Android Design Stencils Screen ShotWhere to Begin

The Android Developers site’s Android design section is a good starting point. These guidelines cover everything from font size and usage to button and menu actions. Resources include downloads for design templates, icons and color guides to help you make the most of your app design. The complete guide will take you through Google’s creative vision and details design principals before diving deeper into the particulars of the user interface. An app’s every element is covered. Experience in UI design is beneficial but not required.

How Design Works on Android

Android styles are applied much like cascading style sheets where style is separate from content. Styles in Android can also be reused, just as with cascading style sheets. Web developers will appreciate the ease of transitioning from web development to Android development with this method of defining styles which includes themes and inherited
styles.

Inherited Styles in Android

Set Holo Theme Android Tool Bundle screenshot

Android also provides a built-in theme set, called Holo, on which to base your own designs. There are three versions for use with Android 4 apps: Light, Dark and Light with dark action bars. When you create a project using the Android Tool Bundle IDE pictured here, you can select the appropriate theme for your app. Everything from fonts styles to iconography is included. The themes were developed to make your job easier by giving you a complete set of styles to customize. That lets you focus on the rest of your app.

Design Patterns

In software development, design patterns are a formalized set of documentation for design solutions. They fully explain why a certain design decision works best and what creates conflicts within the UI. Design patterns don’t tell the designer how to design an interface, they give her an accurate guide to follow. Android design patterns cover, in detail, app structure, navigation, action bars, mult-pane layouts, swipe actions, selection, notifications, widgets, settings, compatibility and accessibility.

Android UI vs iOS

Android action bar with up caret vs. iOS back button.

Anti-Patterns

Design patterns that appear to be good but result in unexpected behavior or  mistakes are known as anti-patterns. For example, users expect button actions to produce a specific result based on the contextual design of your app. Providing a different outcome results in an anti-pattern.

A common example is the re-use of UI elements from another mobile operating system. Avoiding element re-use, like the one pictured, is discouraged since it provides an inconsistent interface. While the practice of developing once and deploying across devices can save time, the result is an inconsistent user experience. If you’re a longtime Android user, you’ve seen apps that were built first for iOS, and then migrated iOS actions and iOS-style buttons and menus into Android. All that does is cause confusion.

Go Forth and Design Beautiful Apps

Include great design in your app planning and your users will thank you. Before you dive into your design, review every section of the Android design pattern library, and hone UI skills by studying up on human-computer interaction.

Related Links

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>