Flat UI Design

From Wikipedia, the free encyclopedia
Jump to: navigation, search

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

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]

Back in the 1980s, computer interfaces were a foreign concept to most users. The use of skeuomorph elements (such as icons that looked like slips of paper) helped creating a visual link between a familiar object (a slip of paper) and a digital object (a file). However, nowadays with people growing up with digital devices, this link is not needed anymore, and many consider skeumorphism no more useful.[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), Minimalism, and the styles emerging from Bauhaus.[1][6][7] 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 take a while before the style would make an appearance in the digital world.[8]

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.[8] 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, known as Windows 8 and 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 utilizing flat UI design elements, moving away from skeuomorphic design.[8]

Possible future[edit]

Some designers believe flat design to be a fad which will pass in time. Criticisms of flat design include the lack of drop shadows making it difficult to tell if a button is clickable.[9]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.[9][10]

Notable examples[edit]

Modern examples of flat design include Microsoft's Metro,[5] Apple's OS X Yosemite,[11] and Google's material design.[12]


  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. ^ a b c Taimur Asghar (July 9, 2014). "The True History of Flat Design". Web Design Ai. 
  9. ^ a b Kyle Stalzer and Dan Klammer (n.d.). "Why Flat Design Will Die". tackk. 
  10. ^ Alex Peters (March 10, 2014). "Why Flat Design is Here to Stay". How Design. 
  11. ^ Kelsey Campbell-Dollaghan (June 2, 2014). "The Future of Apple Design Is Hidden Inside OS X Yosemite". Gizmodo. Retrieved June 2, 2014. 
  12. ^ "9 principles Google created for its colorful ‘Material Design’ UI refresh". The Next Web. 

External links[edit]