BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

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:

image

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:

image

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.

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

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT