Back to Collections

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 and possibility 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
  2. Surfaces are intuitive and natural
  3. Dimensions affords interaction
  4. One adaptive design
  5. Content is bold, graphic, and intentional
  6. Color, surface, and iconography emphasize actions
  7. Users initiate change
  8. Animation is choreographed on a shared stage
  9. Motion provides meaning

  1. Material is the metaphor

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

  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.

  3. Dimensions affords interaction

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

  4. One adaptive design

    A single underlying design system organizes interactions and spaces. 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.

  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.

  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.

  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.

  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. 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.


Tags

UIUX