Flat design

From Wikipedia, the free encyclopedia
  (Redirected from Flat UI Design)
Jump to navigation Jump to search

Flat design is a minimalist design language or design style coined and popularized by Allan Grinshtein[1][2][3][4], commonly used in graphical user interfaces (GUI) (such as web applications and mobile apps), and also in graphical materials such as posters, arts, guide documents and publishing products.

Definition and purpose[edit]

Flat design is a style of interface design emphasizing minimum use of stylistic elements that give the illusion of three dimensions, such as the use of:

It is focused on a minimalist use of simple elements, typography and flat colors.[8]

Designers may prefer flat design because it allows interface designs to be more streamlined and efficient. It is easier to quickly convey information while still looking visually appealing and approachable.[9] [10] Additionally, it makes it easier to design an interface that is responsive to changes in browser size across different devices. With minimal design elements, websites are able to load faster and resize easily, and still look sharp on high-definition screens.[9] As a design approach, it is often contrasted to skeuomorphism[11] and rich design[9], although flat design can use skeuomorphs just as much as a realistically designed UI.


iOS 7, an example of flat design.

Google Chrome logo change

Google Chrome icon (September 2014).svg


Volkswagen logo evolution
Volkswagen Logo till 1995.svg

VW logo 2000.png

Volkswagen logo 2019.svg


Flat design is primarily influenced by the International Typographic Style (also known as Swiss Style), Text User Interface, Modernism, and the styles emerging from Bauhaus.[9][12][13][14] The International Typographic style is often considered the most substantial influence on flat design, and its emergence and popularization during the 1950s and 1960s is regarded as the starting point of flat design, although it would not make an appearance in the digital world for some time thereafter.[15]

Flat design was initially introduced by Microsoft with its Metro design and later on they used an alternative flat design. In 2002, Microsoft released Windows Media Center, and in 2006, the Zune MP3 player, both of which contained elements of flat design. The design of the Zune was clean and simple, with a focus on large lowercase typography, silhouette-style logos, and monochromatic font colors.[15] Microsoft continued this style of design with the 2010 release of Windows Phone 7, which built on the flat design elements introduced with the Zune. The design 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 operating system based on Metro, with the same flat design elements. Use of bold colours, simple typography, long shadow and ghost buttons are some of the crucial elements of flat web design. Again, the design is dominated by grid shapes, sharp edges, bright colours, 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.[9]

In 2013, Apple released iOS 7 featuring flat UI design elements,[16] moving away from skeuomorphic design.[15]

In 2014, Google released Material Design to developers to incorporate into their design language for Android and Chrome OS apps. Material Design has been called flat design,[17] although it includes some elements of skeuomorphism like drop shadows.[18][19]

Also in 2014, Apple also updated their macOS with a flat UI design that was similar to their iOS counterpart on OS X Yosemite.

In late 2014, Flat 2.0 made use of subtle gradients and shadows to serve a better user experience to end users.[citation needed] Designers adapted Flat 2.0 as it was a challenge to present interactions with core flat design previously.[citation needed]

In 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,[citation needed] and most Android OEMs such as Samsung Experience, LG UX, and Huawei EMUI.

GUI widgets designed in Google's Material Design style


Flat design has been criticized for making user interfaces unintuitive and less usable. By making all design elements (menus, buttons, links, etc.) flat, distinguishing what function an element serves may become more difficult, for example, determining whether an element is a button or an indicator.[20] Research has shown that flat design is more popular with young adults than older adults. Research also showed that, while young people seem faster at navigating flat designs, they also have trouble with understanding the user interface.[21] In 2013 Jakob Nielsen, an expert in user interface design and usability, dubbed flat design as a "threat to tablet usability". Nielsen also proposed an alternative, namely a middle-ground between skeuomorphism and flat design.[22] Nielsen group conducted research in 2017 that showed that use of interfaces using flat design was 22% slower on average.[23]

External links[edit]

See also[edit]


  1. ^ "Flat Design: An In-Depth Look". www.awwwards.com. Retrieved 2019-12-23.
  2. ^ Smith, Grace. "36 High-Quality Flat Design Resources". Mashable. Retrieved 2019-12-23.
  3. ^ "Flat Design Rising: Bold Changes to the Modern Website". Hoppel Design. 2013-04-15. Retrieved 2019-12-23.
  4. ^ "Everything You Wanted to Know About Flat Design". Source Digit. 2014-02-28. Retrieved 2019-12-23.
  5. ^ a b Screenshot of Samsung Galaxy S4 settings menu with Android 4.4.2 (before update) and Android 5.0 (after update), reducing border lines and using more abstract icons rather than skeumorphs.
  6. ^ Screenshot of Samsung Galaxy S4 telephone application with Android 4.4.2 (before update) and Android 5.0 (after update).
  7. ^ GIGA.de screenshot comparison: Samsung Galaxy S4 on Android 4.4.2 and Android 5.0.
  8. ^ Carrie Cousins (May 28, 2013). "Flat design principles". designmodo.com.
  9. ^ a b c d e Turner, Amber Leigh (March 19, 2014). "The history of flat design: How efficiency and minimalism turned the digital world flat". The Next Web. Retrieved April 11, 2014.
  10. ^ Clum, Luke (May 13, 2013). "A Look at Flat Design and Why It's Significant". UX Magazine. Retrieved April 11, 2014.
  11. ^ Yair Grinberg (September 11, 2013). "iOS 7, Windows 8, and flat design: In defense of skeuomorphism". VentureBeat. Retrieved April 13, 2014.
  12. ^ Diogo Terror (July 17, 2009). "Lessons From Swiss Style Graphic Design". Smashing magazine. Retrieved March 28, 2014.
  13. ^ "A brief history of flat design". Tech Samurais. July 31, 2013.
  14. ^ Xavier Bertels (March 5, 2014). "The History of Flat Design". Xavier Bertels. Retrieved December 23, 2014.
  15. ^ a b c Taimur Asghar (July 9, 2014). "The True History of Flat Design". Web Design Ai.
  16. ^ Verve (August 17, 2015). "The History of Flat Design". Infographics.
  17. ^ Summers, Nick (2014-06-26). "9 Principles Google Created for its 'Material Design' UI Refresh". Retrieved 2016-07-04.
  18. ^ "Flat Design vs. Material Design: How Are They Different? – Designmodo". 2015-04-10. Retrieved 2016-07-04.
  19. ^ "Flat Design vs. Material Design: What Makes Them Different? | Creative blog by Adobe". Adobe Dreamweaver Team Blog. Retrieved 2016-07-04.
  20. ^ "Why the Flat Design Trend is Hurting Usability". Vandelay Design. 2015-04-07. Retrieved 2017-07-06.
  21. ^ "The Problem With Flat Design, According To A UX Expert". Co.Design. 2016-03-23. Retrieved 2017-07-06.
  22. ^ "Tablet Usability: Findings from User Research". www.nngroup.com. Retrieved 2017-07-06.
  23. ^ "Flat UI Elements Attract Less Attention and Cause Uncertainty". www.nngroup.com. Retrieved 2018-05-08.