Decoding Google’s New Material Design Language.
Last winter I wrote a post outlining the four major principles of Microsoft Metro Design language (typography, content, motion and digital authenticity). Metro leaves drop shadows, subtle textures and gradients behind, focusing on solid colors, clean layouts and sharp typography. Apple soon followed suit with the release of IOS7. We are now seeing this “flat” trend all over the web. At first glance it looked like Google had decided to jump on the bandwagon by creating a similar looking design language.
Material Design utilizes bright colors and playful animation while ensuring the content being the central focus. Like Metro Design, Material Design carries a set of principles–nine to be exact.
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.
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. 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.
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.
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.
After reviewing the principles and studying a few examples I’ve come to the conclusion that Material Design isn’t all that Metro/flat. Its objects and buttons seem to float above the interface. Hints of shading and small drop shadows give Material Design depth and dimension on a smaller scale than previous skeuomorphism. Is google trying to revive the once prominent skeuomorphism design language? I guess history does has a tendency to repeat itself.