Skip to main content

A visual look at Google’s nine principles of Material Design

Material-Design-Platforms

Google’s annual I/O conference is in full swing and in addition to handing out swag, the company is dishing out media kits to attendees explaining the principles of its new visual language called Material Design. In an effort to further unify Mountain View’s platforms, this animation-focused vibrant style will be used across Android, Chrome and the web. Loaded with colors and fluid animations, Material Design places a huge emphasis on content availability.

Keeping in mind that some people are following I/O’s festivities remotely, Google’s design arm recently shared its Material Design kit on Google+. In this set of digital postcards, the company outlines the fundamentals behind its new design language. Here’s a clear-cut look at Google’s intentions with Material Design.

Introduction:

Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.

This is Material Design

Material-Design1

1. Material is the Metaphor:

A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.

Material-Design2
2. Surfaces are intuitive and natural

Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.

Material-Design3

3. Dimensionality affords interaction

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

MD4

4. One adaptive design

A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.

MD5

5. Content is bold, graphic, and intentional

Bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.

MD6

6. Color, surface, and iconography emphasize actions

User action is the essence of experience design. The primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.

MD7

7. Users initiate change

Changes in the interface derive their energy from user actions. Motion that cascades from touch respects and reinforces the user as the prime mover.

MD8

8. Animation is choreographed on a shared stage

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

9

9. Motion provides meaning

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

If you’re attending this year’s I/O and would like to snag a physical copy of this kit as a souvenir, head on over to the show’s Design Sandbox area to pick up a set.

FTC: We use income earning auto affiliate links. More.

You’re reading 9to5Google — experts who break news about Google and its surrounding ecosystem, day after day. Be sure to check out our homepage for all the latest news, and follow 9to5Google on Twitter, Facebook, and LinkedIn to stay in the loop. Don’t know where to start? Check out our exclusive stories, reviews, how-tos, and subscribe to our YouTube channel