In this chapter, we will read about Flat 2.0 design language...
The Material design language introduced by Google in 2014 is a type of Flat 2.0
History
Critics of flat design argue that it was too radical in removing all skeuomorphs, even the useful ones.
Enters the "Semi-flat," "Almost-flat," or "Flat 2.0." which is mostly flat, but it makes use of subtle shadows, highlights, and layers to create some depth in the UI.
Point to note here is that the skeuomorph elements of Flat-design are used ONLY to improve usability and to NOT improve aesthetics.
Features of Material design
1.
Material is an (imaginary/virtual) piece of paper having a thickness of 1dp.
It can expand and contract at will, reshape itself, fuse and divide.
The material environment is a 3D space.
All objects have x, y, and z dimensions, which represent their length, width, height/elevation.
Materials cast shadows due to elevation and light sources - Key lights create directional shadows, while Ambient light creates soft shadows from all angles.
Each element has a default resting-elevation, at which it stays by-default.
When the user interacts with any element, first it gets raised to its raised-elevation (and its shadow also changes due to the change in the elevation) - This is in stark contrast with the real-world where a button actually goes down when a user pushes it.
2.
Unlike flat design, it comes with a very detailed and specific set of guidelines, leaving nothing to guesswork.
The guidelines can be accessed at Material.io
Some sample guidelines:
5 States of Button
Raised & Resting Elevation-States of various Materials
3.
It provides a unified experience across all devices
4.
It comes with built-in Animations of the type that would have to be done manually otherwise.
5.
It is owned by Google.
So it will be kind of hard to improve something that you’re not satisfied with without asking the proprietor.
Makes everything look more real due to the usage of Z-axis.
7.
Animations drain mobile users’ batteries.
8.
Constant adherence to the guidelines can negatively affect designer’s individual creativity.
9.
May take longer to implement than flat, because of Z-axis
10.
A list of important components are detailed here:
Examples
Razvangarofeanu.com homepage (2013)
long-shadow used in this flat design is for aesthetics & not for usability
Google's Material Design - Elevation example
Credits:
En.Wikipedia.org/wiki/Material_Design
En.Wikipedia.org/wiki/Metro_(design_language)
En.Wikipedia.org/wiki/Windows_Phone_7
En.Wikipedia.org/wiki/Skeumorphism
En.Wikipedia.org/wiki/Flat_design
Cleveroad.com/blog/flat-design-vs-material-design-how-different-they-are
99designs.com/blog/trends/skeuomorphism-flat-design-material-design/
Interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
NNgroup.com/articles/flat-design/
Visual.ly/community/Infographics/technology/ios-6-vs-ios-7
OSxDaily.com/2013/06/11/ios-7-vs-ios-6-visual-comparison/
DesignModo.com/flat-vs-material/
Gowtham.design/blog/material-vs-flat/
YouTube.com/watch?v=TfzEPtLPnP4
Hongkiat.com/blog/flat-20/
No comments:
Post a Comment