9 principles of Material Design
- 6 min read
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 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 the metaphor
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
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.
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.
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.
Color, surface and iconography emphasize action
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
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.
Meaningful motionMotion 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.
ConclusionTo 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.
9 principles of Material Design
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…
How to Conduct Web Design Review
Before launching any web design project, you might want to check with a review if everything is in order from the design aspect. There is a collective sense that design is a matter of taste and preferences. By that logic, you could color your website any way you like. That couldn’t be any further from…
Best practices for building a website mockup and prototype
Often, things we imagine in our heads that seem great regularly turn out to be bad ideas when we put them in the real world, such as a piece of paper or a computer screen. They say that the picture is worth a thousand words. What if this is not just a picture but a…
Favicon: How it Impacts Web Design
We can find icons everywhere in our everyday lives: from road signs, store logos, to our laptop keyboards. Images help us interpret information better. Since getting the right information as fast as possible is crucial when dealing with internet technologies, it’s no wonder that icons are an integral part of web design, as well.In this…