Material – Google’s New UX Design Language

Google recently released their design language “Material” and we’re all waiting patiently to discover what it’s like to live in a “material world” (as it’s being referred to). This is a decisive push for consistency across their product ecosystem and platforms and we’re excited to see how it affects interface design trends and usability expectations.

To learn more about design languages and in particular UX design language systems take a look at our earlier blog post, “The harmony of UX design language systems”. As for Material, so far Google+, Chome Beta, Google Docs and parts of Google Play are using it, but before long we’ll start seeing more. We thought we’d review the design language and pull out some key examples to illustrate some of the innovations.

Principles for “Material”

1. “Material is the metaphor”

This idea of using a metaphor of “material” is a clever way of grounding some behaviors of the system in real world physics. For example, pages are built from layers of “material” overlapping with differing levels of elevation—the design language defines the amounts of layering and appropriate shadow depth. It helps provide guidelines while still allowing for flexibility.

(Source: Google)

See more rules for depth here. Some other behavioral rules are not tied to reality, but are a logical step away. For example, the “material” reacts to touch by displaying a circular, animated highlight—which adds a splash of delight. See an example here.

2. “Bold, graphic, intentional”

Color and white space is deliberate, imagery and typography are large and among the Google products color is used for codification. Each product uses a different color pair (a primary and an accent color) inside the app, and for example, Gmail is red and it’s primary action “compose” is an accent color. This level of coding gives clear affordances, builds a visual rhythm and reduces cognitive load.

3. “Motion provides meaning”

Motion is used to highlight actions and change page states after interactions, for example when you tap on a link (button, image, etc.) it initiates an animated transitional state change, that not only registers your interaction, but helps gives you a new sense of the relationships between parent and child “resting places” in this environment. Instead of thinking of them as “pages” that you flip between, the sense you get is that you are transitioning through environments. Take a look at this example. And here’s a great talk about some of the deep thinking behind the use of motion.

——-

To take a look at Google’s new design language you can go to http://www.google.com/design/. By releasing their design system language Google has reopened the door to discuss the benefits of design language systems. Let us know what you think of Material by commenting below this post.