Android’s design guidelines: what are they, and why should you care?

August 25, 2014
30
472

style-color-colorstory-01_large_mdpi

These days, there isn’t much left to say about design on Android. There’s a lingering stigma that Android applications are designed for tech enthusiasts, and remain inaccessible for the average user. The platform has many poor first impressions to overcome, but the design team at Google is working hard to clean up their fragmented past.

What Are Design Guidelines?

In some ways Google’s Android Design Guidelines (and similarly Apple’s Human Interface Guidelines) could be called Design Conversation Starters. They are not a coding framework, and they are not a programming language. Instead, they are a collection of thoughts, ideas, and principles that provide a common vernacular for designers and developers.

“What do you think about using an ActionBar?”, “I think a card metaphor is what we’re getting at here”, or “I’m not sure if this scene transition translates well to a larger screen.” These are all potential examples of conversations that product developers are having about the popular applications you use every day.

android-l

Provide A Baseline Look And Feel

The guidelines also serve as an example of how basic applications should look and feel. Keep your navigation and actions along the top of the screen, maintain logical navigation hierarchies, avoid touch targets less than 48dp (density-independent pixels) in size, etc. However, these specifically read more like rules than guidelines. It’s preferred that you follow them, but hey, rules were meant to be broken.

Think Of The Users

Above the need for designers and developers to have a language to converse in, the user is paramount to any discussion. Having design guidelines means that users will naturally acquire a lexicon of behaviors that they can bring with them into any new application they encounter. Just like how your users  know that ctrl+z is undo and you can right click for more options, they will also know that pulling to refresh will give them new content, and pressing back will return to their previous view.

Why Have Guidelines At All?

No article on Android Design would be complete without paying homage to its past. A past that I, and all other Android enthusiasts, would prefer to soon forget. A lot of these conversations start out the same way, “Why have guidelines at all? The web doesn’t have guidelines, why does Android?” That’s a whole article in itself, one I’m probably not qualified to write, but I’ll try and shed some light.

There were always design guidelines, but they usually read more as a book of rules rather than a ice breaker for conversations.

Android applications got off to a rocky start. There were always design guidelines, but they usually read more as a book of rules rather than a ice breaker for conversations. I remember one of my proudest moments as a budding designer was making the menu icons for the Android app at my first company. It had a complex set of rules to ensure that they looked like the icons in the rest of the system. In my naive experience, this was the pinnacle of design. Such thought was put into every glowing detail.

Icon Design Guidelines - Android Gingerbread (2.3)

Icon Design Guidelines – Android Gingerbread (2.3) – original slides

Homegrown Gingerbread Icons

My feeble attempt at “design”

The only navigation available in the design documentation were tabs across the top of the screen, and a dashboard pattern (which I like to call the “Six Pack”) used in a twitter app (the source of which I’m still waiting for). There were many navigation needs that were left completely unanswered, and the designers did their best to fill those gaps. Actions would be in tab bars, navigation would be in menu items (from the physical menu button), and screens with actual back buttons baked into them,  to name a few.

None of these design paradigms were inherently wrong in themselves, and they have all worked their way into the modern design framework in different ways. But the platform was evolving quickly, and applications designs were updating too slowly to allow these patterns to figure themselves out on their own volition.

#HOLO

Screen Shot 2014-08-23 at 6.29.27 PM

Quickly realizing the developers’ struggles, and needing a platform for unifying Android 2 and 3, the design team at Google brought us the Holo Design Guidelines with Android 4. Holo catapulted us into the modern application design age. Finally, the tools were available to reliably design applications in a unified style, and justifiable reasons were given as to why other platforms shouldn’t be mimicked.

Android 4 brought us an official ActionBar API, allowing us to easily add action bars across our applications. It also brought us Fragments (a system that enabled creation of views that could be rearranged in different ways to enabling phone and tablet interfaces to use the same components), better notifications, and a plethora of new features that put the platform on track to fostering a successful ecosystem.

Material World

The transformation from Android 4 to Android L is tremendous, and arguably even bigger than the jump from Android 2 to Android 4. Many developers are harkening this as Android design’s golden age, where the creative tools available are among the best in the industry.

Cognitive Context

Material applications are finally going to provide us some much needed cognitive context for many of the transitions designers are expecting us to understand. In Android L, visual components (called Hero Elements) will seamlessly transition from one screen to the next. An avatar from your contacts list will transition to its location on the details screen. An image in a grid will scale to the screens size when touching. It should finally make sense where the data on the screens is actually coming from.

Dynamic Color

I love color, and I love that Android is now treating color as a first class citizen. PocketCasts is a beautiful podcasting application I use on a daily basis, but no longer will it hold a monopoly on color-accented colored user interfaces in the Android ecosystem. With the introduction of Palette (an addition to the support-library with blazing fast algorithms that extract prominent colors from an image), as well as easy image tinting, Android applications are going to start looking more vibrant, and will adapt to the content in which they are displaying.

A New Era Of Card Based Interfaces

components-cards-content-card_books_large_mdpi

Developers have been asking for a card layout since Google+ introduced it almost 2 years ago. They were reluctant to hand it out, presumably because there wasn’t much benefit they could add aside from baking in a few assets for you. This has changed in L: A card widget has been added, but it does more than just provide you a simple card wrapper for your content. It provides simple API’s for specifying the corner’s radius, it masks the corners of content for you, and most of all, it provides shadows for you, even in the support versions, so that your shadows will look identical across all versions of an application.

Floating Action Buttons are the new kids on the block – expect to see more.

components-cards-content-card_notes_large_mdpi

We have seen floating action buttons across a handful of apps in the past – Path, Tumblr, and Foursquare (the old one) to name a few, but these buttons have never been considered a design paradigm until now. Like it or not, this Floating Action Button (FAB for brevity) is going to start making an appearance in many of your favorite applications this fall.

Materials Are Platform Independent

materialdesign-goals-landingimage_large_mdpi

Developers and Designers, from Google or not, are striving towards one goal: Make beautiful applications that enrich the lives of those who use them.

The last key aspect of material design, and potentially the most important: Material design is not the new design language for Android. Material design is the new design language for Google, on all fronts. This means that we’ll be seeing Material design invading all of Google’s web properties, like Gmail and Maps. And don’t be surprised when you start seeing shadows making a comeback in your iOS applications.

The Evolution Of Design

The latest iteration of the Android Design Guidelines from the design team at Google is the best yet, and we should all be excited at the innovation it brings to the table. Even more importantly, they leave plenty of room for flexibility and interpretation to ensure that any idea can be represented in the best way possible.

Developers and Designers, from Google or not, are striving towards one goal: Make beautiful applications that enrich the lives of those who use them. Take a closer look at the applications you use everyday. Pay attention to which design patterns they follow, and also which ones they don’t. Every detail in these applications started out as a conversation – “Lets take a look at the guidelines.”

(Imagery taken from http://www.google.com/design/spec/material-design/introduction.html)

Comments

  • Ridge

    color me excited!

    • i_say_uuhhh

      I see what you did there.

  • Fabian Taveras

    like this article it was very informative.

  • MasterMuffin

    I can’t wait for the day when L is released and every Gapp has material design :3

    • limbowida

      “It don’t matter if you’re black or white”.

      ++++++ ♄ Mix ed M atching . c/o/ m ♄ +++++ =BEST Online Mixed Dāting SITE ..Over
      1700000 active members from local and worldwide.
      Join date black women, white men, blackmen and
      white women. The convenient and safe way to date other cultures and races
      online.
      If you want to look for people with which you
      can date, you are at the right place. With a brave heart to love. This is a
      paradise where love is color blind. All in all we feel there are better
      inter racial dāting site out there.xcbcxbxcb

  • Dimitrios Pandioras

    Great article. Looking forward to the release of L. I’m glad Google has taken these steps. It will be great to see unification!

  • Ashley

    i will love it! please devs, let’s all do it.

  • BƂaĆŒej

    I want Android L so bad!

  • rmkilc

    I wish the Play Store could filter out apps not following the guidelines. Whenever I install an app, if the desgin just isn’t there, I instantly delete it.

    • joser116

      Yeah, I can’t believe there are even apps in the Play Store with tiny icons. They don’t even care about even approaching a good icon size.

    • Richard Sequeira

      It’s not hard to follow the design guidelines, at the same time they should reward those with awesome design. Incentives like these would help the eco-system.

  • OmarKhalifa

    Hope it supports more devices than ”Kitkat”

    • Jersern

      If you mean the apps, it depends on the developers and the api they require but generally they will support more devices than KitKat obviously.

  • ВлатĐșĐŸ ĐĄŃ‚ĐŸŃ˜Đ°ĐœĐŸĐČ

    You should care about Android’s design guidelines because if you don’t care about Android’s design guidelines I’ll install your fugly app just to give you 1 star. :)

  • http://astr.io Joseph Odina

    I want vanilla Android L so bad!!!

    Die, TouchWiz!!!!!!!!!!!!!!!!!!!!!!

    • Jersern

      You could always install a custom ROM such as cyanogenmod

      • YeOldeRam

        but the locked bootloaders….

      • http://astr.io Joseph Odina

        I did. It rulz!

  • Will S.

    Nice in depth article!

    • philosopher_Mk

      Actually they are going to reduce the lag. Watch this https://www.youtube.com/watch?v=lSH9aKXjgt8&list=UU_x5XG1OV2P6uZZ5FSM9Ttw

    • http://about.me/kevingrant Kevin Grant

      If done right, the animations shouldn’t take any longer than the activity transitions you’re already used to. Unless theres a good reason for it, most animations you see will be in the 300 millisecond range. Just long enough to understand whats going on, not too long to be irritating.

    • StraightEdgeNexus
    • joser116

      My concern too. Every time there’s a new Android release, we get promises of smooth animations, and when I actually try the new version, it’s not as good as I thought it would be. The iPhone has been consistently smooth since the first iPhone.

  • http://www.infinitech.org Kyle Horkley

    Updated my website (infinitech.org) to Material.

  • Ashley

    Yesterday i found Tomi file manager with Android L animations. Looks amazing.

    • Jo Android L and stuff man

      Cabinet Beta is also very nice :)

  • http://knowledgeflow.in Knowledge flow

    Thank you for sharing this guidlines.

  • hemasnicyepa

    “It don’t matter if you’re black or white”.

    ++++++ M i x e d M a tching . c_o_ m +++++ =BEST Online Mixed Dāting SITE ..Over 1700000 active members from local and worldwide.
    Join date black women, white men, blackmen and white women. The convenient and safe way to date other cultures and races online.
    If you want to look for people with which you can date, you are at the right place. With a brave heart to love. This is a paradise where love is color blind. All in all we feel there are better inter racial d@ting site out there. …

  • James Ernestine

    I love my iPhone, and I really have to give props to Google for the Beautiful animations in Android L. Good job Google!

  • Richard Sequeira

    Users do care about the design of the applications. Who on Earth would want an application installed that looked like a froyo-era app? User consistency is great and it can be achieved as long as the developers study the platform that they are developing and taking cues from Google.