website mockup

9 principles of Material Design

  • 6 min read

Rating

Material design is a design language created by Google in Summer 2014. It is made for Android to create better foundation for user interfaces. With features and natural motions, it mimics real-world objects.

Although it primarily focuses on touch-based app design, it is also effective in web design. This article will cover some of the essential principles of Material Design and how it will affect the interface design process.

What is material design?

Material Design, codenamed „Quantum Paper“ is Google's project which goal is to deliver high-quality output consistently across all platforms. With clear indications and pleasant-looking components that behave like real-world objects. Material Design apllies basic, natural laws from the physical world concerning lighting and motion, unlike the representation of culture-relevant items in skeuomorphism.

“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.” 

— Matias Duarte, VP of Material Design at Google

Mimicking the physical world user's cognitive load is reduced through careful attention to layout, visual language and pattern library. That way, predictability is maximized and ambiguity is eliminated.

Let's see how Google explains Material Design and its principles.


Material is the metaphor

Material Design is inspired by the physical world. Textures, light and shadows are the core elements that drive this design language. Material metaphor is the unifying theory of a retionalized space and a system of motion. It is inspired by  the mediums od paper and ink, yet open to imagination and magic.

Material is metaphor


Intuitive and natural surfaces

Surfaces and edges are triggering visual cues grounded in our experience of reality. Our cognitive load is reduced because of use of familiar attributes that our brains can quickly understand. Visual elements have familiar tactile attributes that our primal side of the brain can easily understand and process.

Intuitive and natural surfaces


Dimensionality affords interaction

Material Design follows laws of physics. When conveying interaction between objects, fundamentals of light, surface, and movement are essential. Realistic lighting shows seams, divides space, and indicates moving parts.

Dimensionality affords interaction


One adaptive design

Single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. This design language provides view to the size and interaction appropriate for specific device. While the dimensions are different for every device, colors, iconography , hierarchy, and spatial relationships remain constant.

One adaptive design


Content is bold, graphic, and intentional

This principle is based on fundamentals of print design. Using this principle you can create hierarchy between elements. You can achieve meaning and focus on certaing elements. With deliberate color choices and edge-to-edge imagery your content can look bold and graphic. Large-scale typography is also used by this principle. With intentional whitespace you can emphasize certain elements that you want to be in the center of user actions.

Bold and graphic content


Color, surface and iconography emphasize action

With specific iconography you can emphasize certain actions. Primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and guides user.

Emphasize actions


Users initiate change

Changes in the interface are encouraged by user actions. Motion that reacts to the touch respects and reinforces the user as the prime mover.

Users initiate change


Animation choreography

All microinteractions on the interface are blended in a single environment. Objects are presented to the user without breaking the cnotinuity of experience even as they transform and reorganize. With subtle animations you can achieve that.

Animation choreography

Meaningful motion

Motion and animations are meaningful and appropriate. They serve to focus attention and mantain continuity. Feedback to the user actions is subtle yet clear. Transitions between elements or screens are efficient but coherent.

Meaningful motion

Conclusion

To put it in simple terms, material design is all about details. With a little bit of realism you can express the functionality and objective of your design. But be careful, do not make thinks too simplified. If you have any questions about material design, please do not hesitate to contact us.

Contact us

  • This field is for validation purposes and should be left unchanged.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

Share

Subscribe to our newsletter