26 January 2014

Material Design

Material is the visual language for Google products. In their own words - "it synthesizes the classic principles of good design with the innovation of technology and science".

Its goal is to create a single design system that unifies the experience across platforms and device sizes.

Source: Material Design


The principles

  1. Material is the metaphor

    Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

  2. Bold, graphic, intentional

    Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.

  3. Motion provides meaning

    Motion focuses attention and maintains continuity, through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment, with interactions generating new transformations.

  4. Flexible foundation

    The Material Design system is designed to enable brand expression. It’s integrated with a custom code base that allows the seamless implementation of components, plug-ins, and design elements.

  5. Cross-platform

    Material Design maintains the same UI across platforms, using shared components across Android, iOS, Flutter, and the web.

1. Material is the metaphor

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

2. Bold, graphic, intentional

Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.

3. Motion provides meaning

Motion focuses attention and maintains continuity, through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment, with interactions generating new transformations.

4. Flexible foundation

The Material Design system is designed to enable brand expression. It’s integrated with a custom code base that allows the seamless implementation of components, plug-ins, and design elements.

5. Cross-platform

Material Design maintains the same UI across platforms, using shared components across Android, iOS, Flutter, and the web.

Tags

  • UX
  • UI design
  • Big companies

Related collections

Don Normans Principles of Design

6 principles


Don Norman

Shneiderman's "Eight Golden Rules of Interface Design"

8 principles


Ben Shneiderman

20 Guiding Principles for Experience Design

20 principles


Whitney Hess

Android Design Principles

17 principles


Android Developers

Ten things we know to be true

10 principles


Google