In this chapter, we will discuss Flat Design.
History:
Flat design takes influence from Swiss style design, which began in Russia, the Netherlands and Germany in the 1920s, then gained popularity through its development in Switzerland.
Flat design takes influence from Swiss style design, which began in Russia, the Netherlands and Germany in the 1920s, then gained popularity through its development in Switzerland.
This style has an emphasis on readability, cleanliness, and minimalism - These designs are utilitarian and make efficient use of space.
Swiss style design resonated through many schools, most famously the Bauhaus school of Design. One notable designer from this movement is Josef Muller-Brockman, who revolutionized grid systems. His work utilized space in the most efficient way possible - a highly relevant concept with regards to UI design.
Microsoft design language (MDL), inspired by Swiss Style Design, was a design language created by Microsoft that focused on typography and simplified icons, absence of clutter, increased content to chrome ratio ("content before chrome"), and basic geometric shapes.
MDL was used in Encarta 95 and MSN 2.0 (1996), Windows Media Center (2002), Zune MP3 player (2006).
MDL was formally introduced as Metro during the unveiling of Windows Phone 7 (2010). Metro was dominated by large and bright shapes accompanied by sans-serif typography, flat images, and a menu with a grid-like pattern:
Because of the success of the Windows Phone 7 design, Microsoft released the Windows 8 OS based on Metro, dominated with use of bold colors, simple typography, long shadow and ghost buttons, grid shapes, sharp edges, bright colors, and clean typography.
Microsoft has since moved its current products to the Metro design language, including the Xbox 360, Microsoft Office, and the Microsoft website.
(2013) - Apple released iOS 7 featuring flat UI design elements:
(2014) - Google released Material Design language for Android and Chrome OS apps which has been called flat 2.0 design.
(2016) - Most of the major mobile operating systems had adapted flat UI designs, including BlackBerry 10 OS, Samsung Electronics/Linux Foundation Tizen OS, KDE Plasma 5, and most Android OEMs such as Samsung Experience, LG UX, and Huawei EMUI.
Features:
1.
It became the torchbearer of visual clarity, against Skeuomorphism
2.
It achieves cleanness & minimalism.
3.
It is a design stripped down to the basics.
4.
It is focused purely on the interplay of icons, typography, proximity, context, shapes/geometry, and color - Designers find that a constraint!!!
5.
Saves time (speeds up page/site/app load times) & resources.
Bandwidth is consumed less.
6.
It looks just as good on high or low-resolution screens.
7.
It makes things much easier for designers as well, due to above reasons.
8.
It streamlines products (web/mobile sites/apps).
9.
It raises focus on content, as there are no overly detailed UI elements which can distract users from actually valuable content.
It thus speeds up readers’ progression through your content.
10.
It provides functional UX (easily understandable).
On the contrary, NNg has criticized it for making UIs less usable, as distinguishing what function an element serves becomes more difficult, for example, determining whether an element is a button or an indicator.
Its intuitiveness is debatable.
Not at all intuitive for users who lack experience interacting with web and mobile.
Thus, it can be inappropriate for complex web or mobile solutions.
NNg's research in 2017 showed that it's usage was 22% slower on average.
11.
It looks equally great on different devices, be it a PC or a smartphone browser.
Lets designers make pages responsive.
12.
It can be too simple in some cases.
If gone too far, flat design UIs can look very featureless and generic.
13.
It is ubiquitous.
It could be really hard to stand out with flat design sometimes.
Examples:
Microsoft design language (MDL), inspired by Swiss Style Design, was a design language created by Microsoft that focused on typography and simplified icons, absence of clutter, increased content to chrome ratio ("content before chrome"), and basic geometric shapes.
MDL was used in Encarta 95 and MSN 2.0 (1996), Windows Media Center (2002), Zune MP3 player (2006).
MDL was formally introduced as Metro during the unveiling of Windows Phone 7 (2010). Metro was dominated by large and bright shapes accompanied by sans-serif typography, flat images, and a menu with a grid-like pattern:
Because of the success of the Windows Phone 7 design, Microsoft released the Windows 8 OS based on Metro, dominated with use of bold colors, simple typography, long shadow and ghost buttons, grid shapes, sharp edges, bright colors, and clean typography.
Microsoft has since moved its current products to the Metro design language, including the Xbox 360, Microsoft Office, and the Microsoft website.
(2013) - Apple released iOS 7 featuring flat UI design elements:
(2014) - Google released Material Design language for Android and Chrome OS apps which has been called flat 2.0 design.
(2016) - Most of the major mobile operating systems had adapted flat UI designs, including BlackBerry 10 OS, Samsung Electronics/Linux Foundation Tizen OS, KDE Plasma 5, and most Android OEMs such as Samsung Experience, LG UX, and Huawei EMUI.
Features:
1.
It became the torchbearer of visual clarity, against Skeuomorphism
2.
It achieves cleanness & minimalism.
3.
It is a design stripped down to the basics.
4.
It is focused purely on the interplay of icons, typography, proximity, context, shapes/geometry, and color - Designers find that a constraint!!!
5.
Saves time (speeds up page/site/app load times) & resources.
Bandwidth is consumed less.
6.
It looks just as good on high or low-resolution screens.
7.
It makes things much easier for designers as well, due to above reasons.
8.
It streamlines products (web/mobile sites/apps).
9.
It raises focus on content, as there are no overly detailed UI elements which can distract users from actually valuable content.
It thus speeds up readers’ progression through your content.
10.
It provides functional UX (easily understandable).
On the contrary, NNg has criticized it for making UIs less usable, as distinguishing what function an element serves becomes more difficult, for example, determining whether an element is a button or an indicator.
Its intuitiveness is debatable.
Not at all intuitive for users who lack experience interacting with web and mobile.
Thus, it can be inappropriate for complex web or mobile solutions.
NNg's research in 2017 showed that it's usage was 22% slower on average.
11.
It looks equally great on different devices, be it a PC or a smartphone browser.
Lets designers make pages responsive.
12.
It can be too simple in some cases.
If gone too far, flat design UIs can look very featureless and generic.
13.
It is ubiquitous.
It could be really hard to stand out with flat design sometimes.
Examples:
Flat design used in the weather app "Outside the Window"
Flat design used in Fitbit's Website's Homepage
(can you count how many clickable items are there on this page?)
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