Google Introduces Material Design at Google I/O

by Abel Avram on Jun 26, 2014 |

Google is introducing Material Design, a visual language incorporating design principles for user interfaces spanning a multitude of devices from wearables to smartphones, tablets, desktops and TVs. Material Design attempts to provide fluid motion on tactile surfaces, but mouse and keyboard-based devices are also considered.

According to Google, Material Design is based on “tactile reality, inspired by the study of paper and ink,” allowing users to “understand affordances” that supersede those in the real world but “without breaking the rules of physics.” Also,

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

Material Design establishes principles for Animation, Style, Layout, comes with recommendations for a large number of visual components –buttons, cards, grids, dialogs, etc.- and related actions and gestures, and includes accessibility guidelines.

In terms of animation, the new design from Google suggests following the natural movement of objects in the real world, noting that “motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.” Components react to user’s interaction with them but without being distracting. Transitions between two visual states should be

smooth, appear effortless, and above all, provide clarity to the user, not confusion. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused.

Regarding style, Material Design proposes “bold” colors inspired by “contemporary architecture, road signs, pavement marking tape, and sports courts,” emphasizing shadows and highlights, a few color palettes being shown below:


For typography, the new design relies on a refined Roboto font introduced with Ice Cream Sandwich, a bit wider and rounder. Icons are simplified being reduced to a minimum. Images are to be immersive, context aware and ubiquitous.

The guide provides extensive advice for the visual aspect of components, the following picture showing one of cards:


Google showed the new design at Google IO 2014, and the next Android UI version due this fall will be based on it while other devices will follow.

A video is available for developers interested in switching their application looks from Holo to Material Design.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

General Feedback
Marketing and all content copyright © 2006-2016 C4Media Inc. hosted at Contegix, the best ISP we've ever worked with.
Privacy policy

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.