BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Google Introduces Material Design at Google I/O

Google Introduces Material Design at Google I/O

Leia em Português

This item in japanese

Lire ce contenu en français

Bookmarks

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.

Rate this Article

Adoption
Style

BT