Google Introduces Material Design at Google I/O

| by Abel Avram Follow 10 Followers on Jun 26, 2014. Estimated reading time: 1 minute |

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

Adoption Stage

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


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you