After Windows 8 came out all spoke about "Metro UI" and later about the "Flat design". Now, after Android Lollipop came out all speak about "Material design". Can somebody explain the difference between "Material design" and "Flat style"?
Answer
Material design is unrelated to flat design in its principles. Material design is skeuomorphic in that it is an attempt to make web design more realistic in how it portrays elements, using layers and animation in a way that makes sense outside of the browser. Visually flat design and material design are similar at the moment, but material design can be applied to designs other than flat-like ones.
It follows 3 principles
- Material is the metaphor
- Be bold, graphic, intentional
- Provide meaning with motion
Layering in material design is done through moving elements forward or back along the z axis, to and from the user, and adding realistic shadows to convey more meaning. Animating elements, such as having an animation affecting position when a list item is removed, is meant to improve user flow and understanding while making the experience more smooth. In doing so, more meaning can be portrayed through material design than in flat design
Google designers made paper models to figure out layering and shadows for their material design.
There are other design guidelines covering spacing, color, usability, and more detail about positioning and animation which you can check out in Google's webpage about the subject.
A good way to learn more about material design and how to implement it is to use the apps Google has created using material design and to read about the design details, this one is by Brian Lovin on the Inbox app.
People may assume that material design is a sort of extension of flat design, but in fact the principles are different. The current trend is to make clean, flat-like design which Google uses for now, but the principles of material design extend past those bounds and can be applied to other methods of design as well.
No comments:
Post a Comment