HOME

TheInfoList



OR:

Flat design is a
minimalist In visual arts, music and other media, minimalism is an art movement that began in post–World War II in Western art, most strongly with American visual arts in the 1960s and early 1970s. Prominent artists associated with minimalism include Don ...
design language A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling. Objectives Designers wishing to give their su ...
or design style commonly used in
graphical user interfaces The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inste ...
(GUI) (such as
web application A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serve ...
s and
mobile app A mobile application or app is a computer program or software application designed to run on a mobile device such as a phone, tablet, or watch. Mobile applications often stand in contrast to desktop applications which are designed to run on d ...
s), and also in graphical materials such as
posters A poster is a large sheet that is placed either on a public space to promote something or on a wall as decoration. Typically, posters include both textual and graphic elements, although a poster may be either wholly graphical or wholly text. ...
, arts, guide documents and publishing products.


Definition and purpose

Flat design is a style of interface design emphasizing minimalist use of simple elements,
typography Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing ( leading), and ...
, and flat colors. 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. 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. As a design approach, it is often contrasted to skeuomorphism and ''rich design''.


History

Flat design is primarily influenced by the
International Typographic Style The International Typographic Style, also known as the Swiss Style, is a graphic design style that emerged in Russia, the Netherlands, and Germany in the 1920s and was further developed by designers in Switzerland during the 1950s. The Internatio ...
(also known as ''Swiss Style''),
text user interface In computing, text-based user interfaces (TUI) (alternately terminal user interfaces, to reflect a dependence upon the properties of computer terminals and not just text), is a retronym describing a type of user interface (UI) common as an ear ...
s,
modernism Modernism is both a philosophy, philosophical and arts movement that arose from broad transformations in Western world, Western society during the late 19th and early 20th centuries. The movement reflected a desire for the creation of new fo ...
, and the styles emerging from
Bauhaus The Staatliches Bauhaus (), commonly known as the Bauhaus (), was a German art school operational from 1919 to 1933 that combined crafts and the fine arts.Oxford Dictionary of Art and Artists (Oxford: Oxford University Press, 4th edn., 200 ...
. 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. In 2002,
Microsoft Microsoft Corporation is an American multinational technology corporation producing computer software, consumer electronics, personal computers, and related services headquartered at the Microsoft Redmond campus located in Redmond, Washing ...
released
Windows Media Center Windows Media Center (WMC) is a defunct digital video recorder and media player created by Microsoft. Media Center was first introduced to Windows in 2002 on Windows XP Media Center Edition (MCE). It was included in Home Premium and Ultimate e ...
, and in 2006, the
Zune Zune is a discontinued line of digital media products and services marketed by Microsoft from November 2006 until its discontinuation in June 2012. Zune consisted of a line of portable media players, digital media player software for Windows Per ...
MP3 player, both of which contained elements of flat design. The design of the Zune was clean and simple, with a focus on large
lower case Letter case is the distinction between the letters that are in larger uppercase or capitals (or more formally ''majuscule'') and smaller lowercase (or more formally ''minuscule'') in the written representation of certain languages. The writing ...
typography, silhouette-style logos, and monochromatic font colors. Microsoft continued this style of design with the 2010 release of
Windows Phone 7 Windows Phone 7 is the first release of the Windows Phone mobile client operating system, released worldwide on October 21, 2010, and in the United States on November 8, 2010. It runs on the Windows CE 6.0 kernel. It received multiple large upda ...
, which built on the flat design elements introduced with the Zune, formalized as the "
Metro design language Microsoft Design Language (or MDL), previously known as Metro, is a design language created by Microsoft. This design language is focused on typography and simplified icons, absence of clutter, increased content to chrome ratio ("content bef ...
". The design was dominated by large and bright shapes accompanied by
sans-serif In typography and lettering, a sans-serif, sans serif, gothic, or simply sans letterform is one that does not have extending features called "serifs" at the end of strokes. Sans-serif typefaces tend to have less stroke width variation than seri ...
typography from the Segoe font family, flat images, and a menu with a grid-like pattern. Metro was subsequently adopted by all Microsoft software lines, including the
Windows 8 Windows 8 is a major release of the Windows NT operating system developed by Microsoft. It was Software release life cycle#Release to manufacturing (RTM), released to manufacturing on August 1, 2012; it was subsequently made available for downl ...
PC
operating system An operating system (OS) is system software that manages computer hardware, software resources, and provides common services for computer programs. Time-sharing operating systems schedule tasks for efficient use of the system and may also in ...
. Android began to adopt flat design trends with 4.0 "Ice Cream Sandwich" in 2011;
Matias Duarte Matias is a form of the given name Matthew. In German-speaking Europe it is most often written as Matthias. It appears in this form in Norway, Sweden, Denmark and Finland. Alternate spellings are: Mathias, Mattias, Mattis, Mats and Matti. Matia ...
,
Google Google LLC () is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics. ...
's vice president of design, felt that
Apple An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple fruit tree, trees are agriculture, cultivated worldwide and are the most widely grown species in the genus ''Malus''. The tree originated in Central Asia, wh ...
's
iOS iOS (formerly iPhone OS) is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that powers many of the company's mobile devices, including the iPhone; the term also includes ...
was too
skeuomorphic A skeuomorph (also spelled skiamorph, ) is a derivative object that retains ornamental design cues (attributes) from structures that were necessary in the original. Skeuomorphs are typically used to make something new feel familiar in an effort t ...
,
Windows Phone Windows Phone (WP) is a discontinued family of mobile operating systems developed by Microsoft for smartphones as the replacement successor to Windows Mobile and Zune. Windows Phone featured a new user interface derived from the Metro design la ...
looked like "airport lavatory signage", and that both interfaces were too rigidly standardized with limited flexibility for designers. The platform's new "Holo" interface was designed to appear more simplistic than past Android versions, with neon-blue accents, hard edges, and drop shadows for depth. In 2013, Apple unveiled
iOS 7 iOS 7 is the seventh major release of the iOS mobile operating system developed by Apple Inc., being the successor to iOS 6. It was announced at the company's Worldwide Developers Conference on June 10, 2013, and was released on September 18 o ...
, which shifted to a flat UI design with use of brighter colors, typography, as well as blurred,
translucent In the field of optics, transparency (also called pellucidity or diaphaneity) is the physical property of allowing light to pass through the material without appreciable scattering of light. On a macroscopic scale (one in which the dimensions a ...
overlays. The following year,
OS X Yosemite OS X Yosemite ( ; version 10.10) is the eleventh major release of macOS, Apple Inc.'s desktop and server operating system for Macintosh computers. OS X Yosemite was announced and released to developers on June 2, 2014, at WWDC 2014 and rel ...
introduced the iOS 7-styled user interface to Apple's
Mac OS X macOS (; previously OS X and originally Mac OS X) is a Unix operating system developed and marketed by Apple Inc. since 2001. It is the primary operating system for Apple's Mac (computer), Mac computers. Within the market of ...
operating system. Google began to introduce its own flat design language known as "
Material Design Material Design (codenamed Quantum Paper) is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and d ...
" for Android (beginning on
Android Lollipop Android Lollipop (code name, codenamed Android L during development) is the fifth major version of the Android (operating system), Android mobile operating system developed by Google and the 12th version of Android, spanning versions between 5.0 ...
) and its other platforms, which is based on
index card An index card (or record card in British English and system cards in Australian English) consists of card stock (heavy paper) cut to a standard size, used for recording and storing small amounts of discrete data. A collection of such cards e ...
-like sheets and the use of shadows to promote depth and hierarchy, as well as smooth
animations Animation is a method by which still figures are manipulated to appear as moving images. In traditional animation, images are drawn or painted by hand on transparent celluloid sheets to be photographed and exhibited on film. Today, most anima ...
and transitions. In 2017, Microsoft unveiled the
Fluent Design System Fluent Design System (codenamed "Project Neon"), officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language (popularly known as "Metro") ...
, a new flat user interface. This new interface departs from its predecessor, Metro, through the use of depth, interface
feedback Feedback occurs when outputs of a system are routed back as inputs as part of a chain of cause-and-effect that forms a circuit or loop. The system can then be said to ''feed back'' into itself. The notion of cause-and-effect has to be handled ...
, and a new translucency effect dubbed "Acrylic".


Criticism

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. 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. In 2013
Jakob Nielsen Jacob or Jakob Nielsen may refer to: * Jacob Nielsen, Count of Halland (died c. 1309), great grandson of Valdemar II of Denmark * , Norway (1768-1822) * Jakob Nielsen (mathematician) (1890–1959), Danish mathematician known for work on automorphi ...
, 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. Nielsen group conducted research in 2017 that showed that use of interfaces using flat design was 22% slower on average.


See also

*
Corporate Memphis Corporate Memphis (alternative names: Alegria Art, Big Tech Art, or Flat Art) is a term used to describe a Flat design, flat, geometric Style (visual arts), art style, widely associated with Big Tech illustrations in the late 2010s and early 2020 ...
*
Minimalism In visual arts, music and other media, minimalism is an art movement that began in post–World War II in Western art, most strongly with American visual arts in the 1960s and early 1970s. Prominent artists associated with minimalism include Don ...
* Skeuomorphism


References


External links

* {{Cite video , title=Why 3D Logos Fell Out of Favor Overnight - Cheddar Explains , url=https://www.youtube.com/watch?v=TfzEPtLPnP4 , publisher=Cheddar , date=2019-03-05 , via=YouTube Design language Graphical user interfaces