Flat design

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

Flat design is a minimalist UI Design Genre, or design language, currently used in various graphical user interfaces (such as Web sites or Web applications). It is contrasted with skeuomorph design.

Definition and purpose[edit]

Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, textures, or other tools that add depth)[1] and is focused on a minimalist use of simple elements, typography and flat colors.[2] 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.[3] 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.[1] As a design approach, it is often contrasted to skeuomorphism [4] and rich design.[1]

In the 1980s, computer-based user interfaces were a foreign concept to most users. The use of skeuomorphic elements (such as icons that looked like slips of paper) helped to create a visual link between a familiar object (a slip of paper) and a digital object (a file). More recently, with many people growing up using computers and other digital devices, skeuomorphic design affordances are not longer as necessary, and many consider skeuomorphism to no longer be necessary.[5]

History of use[edit]

Flat design owes its inspiration mainly to three styles of art, which are the International Typographic Style (also known as Swiss Style), Modernism and the styles emerging from Bauhaus.[1][6][7][8] 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.[9]

In 2006, Microsoft released the Zune mp3 player 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 backgrounds.[9] 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 and flat images. The very clean look was completed by having the menu appear in a grid-like pattern. Because of the success of the Windows Phone 7 design, Microsoft released their latest operating system, Windows 8, based on Metro, with the same flat design elements. 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.[1]

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

Possible future[edit]

Some designers believe flat design to be a fad which will pass in time. Criticisms of flat design include, for example, the lack of drop shadows, which may make it more difficult for users to tell if a button is clickable.[10] Flat design is praised for its adaptability among various uses. The simple styling allows flat design to look good across various applications and screen sizes. Some designers believe that a combination of both skeuomorphism and flat design is eventually where flat design will end up. The adaptability of flat design will create simplicity for users and designers, wheres as the minute details of skeuomorphism will allow for more focus on specific features.[10][11]

Notable examples[edit]

A modern example of flat design is Microsoft's Metro.[5]


  1. ^ 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. 
  2. ^ Carrie Cousins (May 28, 2013). "Flat design principles". designmodo.com. 
  3. ^ Clum, Luke (May 13, 2013). "A Look at Flat Design and Why It's Significant". UX Magazine. Retrieved April 11, 2014. 
  4. ^ Yair Grinberg (September 11, 2013). "iOS 7, Windows 8, and flat design: In defense of skeuomorphism". VentureBeat. Retrieved April 13, 2014. 
  5. ^ a b Kelsey Campbell-Dollaghan (May 27, 2013). "What Is Flat Design?". Gizmodo Australia. Retrieved April 13, 2014. 
  6. ^ Diogo Terror (July 17, 2009). "Lessons From Swiss Style Graphic Design". Smashing magazine. Retrieved March 28, 2014. 
  7. ^ "A brief history of flat design". Tech Samurais. July 31, 2013. 
  8. ^ Xavier Bertels (March 5, 2014). "The History of Flat Design". Wolf’s Little Store. Retrieved December 23, 2014. 
  9. ^ a b c Taimur Asghar (July 9, 2014). "The True History of Flat Design". Web Design Ai. 
  10. ^ a b Kyle Stalzer and Dan Klammer (n.d.). "Why Flat Design Will Die". tackk. 
  11. ^ Alex Peters (March 10, 2014). "Why Flat Design is Here to Stay". How Design. 

External links[edit]