Reviewed

New Design Language for Android, Chrome OS, and More by Google

Living in a Material World

New Design Language for Android, Chrome OS, and More by Google

new

Reviewed June 26, 201406.26.14 by Armin

filed under Web Service and tagged with ,

Yesterday, at its I/O 2014 Developers Conference Google introduced a new design language for Android, the Chrome operating system, and the Chrome browser. Nicknamed Material Design, this is a comprehensive and all-encompassing approach that will directly influence the mobile experience of Android devices and the desktop experience for anyone using Chrome OS but more importantly it will have an organic influence in pretty much every Google visual experience, from Gmail to Maps to Search to YouTube. At first glance, this has the potential of being one of the most significant visual improvements to the web in general.

I may be over-praising this but once you see the extent to which Google has gone in explaining its design approach and the stunning quality in which it’s presented you might join the conga line. Take 10 or 15 minutes go through the online guidelines, like, really look through them. This is the kind of commitment to establishing rules that makes vendors and developers take notice and realize that there is a high standard to meet. The overall message isn’t “Make the Best Design in the History of the World”, it’s something more like “Stop Designing Shitty Things Online”.

You might be wondering why I am devoting a Review to what is basically a really detailed User Interface document and not a logo or identity. Well, this is branding at its best. If branding is the experience we have with any product or service, Google is laying the groundwork to be considered one of the most design- and detail-driven brands, especially amongst its developer audience and eventually to anyone who uses an online Google tool. It wasn’t more than 3 or 5 years ago that we all thought about Google as one of the most significant companies with some of the most significantly awful design. Everything about interacting with a Google product was nearly offensive. Gradually, every nook and cranny of the Googleverse has been incrementally improved from better color palettes to clearer type hierarchies to responsive UI animations. Where Microsft’s don’t-call-it-“Metro” design language fell short of its ambitions and wasn’t nearly as sophisticated as this, Google’s Material Design has the potential of delivering an extremely pleasant and fulfilling interaction with its devices and online services.

I’m not going to dissect every aspect of the new look as this is more about the overall clean, bold, and colorful approach and philosophy but I have taken some excerpts from what is available through the new Design subfolder at Google to give you a quick sense of what I’m blabbering about. Material FTW!

Motion reel introducing Material Design.
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

Google Material Design guidelines

New Design Language for Android, Chrome OS, and More by Google
New Design Language for Android, Chrome OS, and More by Google
New Design Language for Android, Chrome OS, and More by Google
Material Design introduction (PDF).
New Design Language for Android, Chrome OS, and More by Google
The principles.
New Design Language for Android, Chrome OS, and More by Google
Main type family: Roboto.
New Design Language for Android, Chrome OS, and More by Google
Icons.
New Design Language for Android, Chrome OS, and More by Google
Icon grid.
New Design Language for Android, Chrome OS, and More by Google
4pt baseline grid.
New Design Language for Android, Chrome OS, and More by Google
4pt incremental spacing for everything. Brings tears of joy to my eyes.
New Design Language for Android, Chrome OS, and More by Google
Sample use of color.
New Design Language for Android, Chrome OS, and More by Google
Sample use of typography.

Apologies for the weird animation sizes. The embeds from the Guidelines have a bit of a mind of their own that don’t play as well with our typical YouTube/Vimeo embeds.

Animation ease.
Animation for point of origin interaction.
Transition example.
Detailed animation.
Detailed animation.

Poll

On Execution

Total:

↓Comments

---