Well, colour me indecisive.
Using brand colouring for the Android Action Bar.
One of the things that particularly stood out for me regarding the new iOS 7 design style has been the use of bold brand colours for the navigation bars. It’s been made possible, and more appealing, by the move to flat colour and the transparent (or removable) status bar in the new OS. It gives a sense of integration between the app and the OS which, although minor, helps with user acceptance.
Android seemingly should be easily able to handle such brand integration, and it does. Certainly with the new UI style of Android 4.4, which has seen a reduction in the use of the ‘Android Blue’ in favour of white or less natively-branded colours (eg. status bar icons and touch feedback).
Generally, the Android native UI for the action bar has been a light grey (around #dddddd) with the actual app icon faithfully placed at the top left position to legibly brand the app. But there’s been a move away from this in certain 3rd party apps and even in some of Google’s own apps. A simplified vector of the logo/icon upon a flat colour Action Bar can be seen in apps such as Snapchat, Twitter, Google Play Music and Play Store. It takes from the same styling used in many iOS 7 apps to boldly brand the app navigation and give stark colour contrast to the body content below. Although this can be distracting and wouldn’t work for every brand, it can be implemented effectively; Twitter, Vine, BBC news and Foursquare are examples where the UI is instantly enhanced and recognisable by the bold use of their primary ID colour.
The way Google’s Play Store app uses the coloured header to distinguish between the various sections of the Store (Apps/Games, Movies & TV, Music, Books, Newsstand) is effective and quick to parse. The separate apps follow these same stylings.
Dropbox uses the coloured Action Bar as a way of incorporating it’s tabular navigation system which I haven’t seen elsewhere but is a clever way of integrating the icon, branding and navigation in a way that frees up extra body space for the content.
The more usual, and traditional, styling we see is the light grey header with either the app icon itself, a reducted version or just a logo. This works much more universally for apps given multi-coloured or oddly shaded logos but also has the advantage of feeling very ‘Android’ and native in style. It fits with the Holo Light theme perfectly (or Holo Dark for the dark grey ones) and gives focus to the content without drawing the eye. It also works in conjuction with the Navigation Drawer UI pattern by keeping the same grey and making the drawer feel aligned visually with the Action Bar. There are subtle edits, even within the Google app suite, which can add to the individuality whilst keeping this light and clean style (Pocket is one of the best examples of this in my opinion).
There seems to be a gradual drift away from this traditional light style in favour of coloured headers. This could be something we see more of in Android 5.0, but for now the clean & light Action Bars have enough legs left in them to be customised to fit well with most app designs; especially ones like Pocket, Pinterest, or indeed any email app, where the entire concept of the app is to ‘get out of the way’ of the content.
It, of course, depends upon the complexity, use case and target audience of your app as to how you style it. The simpler, consumer-orientated apps are taking branding to fuller lengths than more content-orientated products.
**EDIT**
After seeing this report on the purportedly leaked screenshots of the Android Gmail app update (not 100% convinced myself but we saw how that worked out for the iOS 7 doubts), I thought I’d update this post slightly.
Google Keep has just been redesigned and has gone down the route of the Google Play Store styling of using the brand colour as the main Action Bar colour and a simplified white icon in the top left. This does indicate a moving away from the standard light grey headers that we’re used to so could give creedence to the possibility of a major Gmail overhaul.
The Facebook Messenger app now takes over the Action Bar as a tabular navigation system like Dropbox but uses the base Action Bar as the branded colour indicator (relying on Facebook’s overwhelming familiarity to imply brand).
Another trend we’re starting to see become a lot more prevalent is in-app theming and the coloured Action Bars allows a lot more license for this. As I stated before, it’s a very quick and clear way to get across your brand identity within an app. I guess we’ll have to wait and see what happens with Android 4.5/5.0 until we know for certain but I definitely approve of this move to a clean and bright style.
Let me know your thoughts, I’m intrigued to see what other people think about this. Hit me up on twitter @destroywerk or via destroywerk.com
