Flat design

Last updated

Volkswagen logo evolution
Volkswagen Logo till 1995.svg
<1995
VW logo 2000.png
2000
Volkswagen logo 2019.svg
2019

Flat design is a minimalist design language or design style 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.

Contents

Definition and purpose

Flat design is a style of interface design emphasizing minimalist use of simple elements, typography, and flat colors. [1]

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. [2] [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, webpages can be downloaded faster and resize easily, and still look sharp on high-definition screens. [2] As a design approach, it is often contrasted to skeuomorphism [4] and rich design. [2]

History

Flat design is primarily influenced by the International Typographic Style (also known as Swiss Style), text user interfaces, modernism, and the styles emerging from Bauhaus. [2] [5] [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 not make an appearance in the digital world for some time thereafter. [8]

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 lower case typography, silhouette-style logos, and monochromatic font colors. [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, formalized as the "Metro design language". The design was dominated by large and bright shapes accompanied by sans-serif 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 PC operating system. [2]

GUI widgets designed in Google's Material Design style Flat widgets.png
GUI widgets designed in Google's Material Design style

Android began to adopt flat design trends with 4.0 "Ice Cream Sandwich" in 2011; Matias Duarte, Google's vice president of design, felt that Apple's iOS was too skeuomorphic, Windows Phone 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. [9] [10] [11] [12]

In 2013, Apple unveiled iOS 7, which shifted to a flat UI design with use of brighter colors, typography, as well as blurred, translucent overlays. [13] [14] [15] The following year, OS X Yosemite introduced the iOS 7-styled user interface to Apple's Mac OS X operating system. [16] Google began to introduce its own flat design language known as "Material Design" for Android (beginning on Android Lollipop) and its other platforms, which is based on index card-like sheets and the use of shadows to promote depth and hierarchy, as well as smooth animations and transitions. [17] [18] [19] [20]

In 2017, Microsoft unveiled the Fluent Design System, a new flat user interface. This new interface departs from its predecessor, Metro, through the use of depth, [21] interface feedback, and a new translucency effect dubbed "Acrylic".[ by whom? ]

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. [22] [23] 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. [24] 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. [25] Nielsen group conducted research in 2017 according to which the use of interfaces using flat design was 22% slower on average. [26]

See also

Related Research Articles

<span class="mw-page-title-main">Graphical user interface</span> User interface allowing interaction through graphical icons and visual indicators

A graphical user interface, or GUI, is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

<span class="mw-page-title-main">Look and feel</span> Aspect of software design related to user interfaces

In software design, the look and feel of a graphical user interface comprises aspects of its design, including elements such as colors, shapes, layout, and typefaces, as well as the behavior of dynamic elements such as buttons, boxes, and menus. The term can also refer to aspects of a non-graphical user interface, as well as to aspects of an API – mostly to parts of an API that are not related to its functional properties. The term is used in reference to both software and websites.

<span class="mw-page-title-main">Contacts (Apple)</span> Address book software by Apple

Contacts is a computerized address book included with the Apple operating systems iOS, iPadOS, watchOS and macOS, previously Mac OS X and OS X. It includes various cloud synchronization capabilities and integrates with other Apple applications and features, including iMessage, FaceTime and the iCloud service.

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.

<span class="mw-page-title-main">Skeuomorph</span> Design element borrowed from another medium

A skeuomorph 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 to speed understanding and acclimation. They employ elements that, while essential to the original object, serve no pragmatic purpose in the new system. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal and a software calendar that imitates the appearance of binding on a paper desk calendar.

Segoe is a typeface, or family of fonts, that is best known for its use by Microsoft. The company uses Segoe in its online and printed marketing materials, including recent logos for a number of products. Additionally, the Segoe UI font sub-family is used by numerous Microsoft applications, and may be installed by applications. It was adopted as Microsoft's default operating system font beginning with Windows Vista, and is also used on Outlook.com, Microsoft's web-based email service. In August 2012, Microsoft unveiled its new corporate logo typeset in Segoe, replacing the logo it had used for the previous 25 years.

Mobile app development is the act or process by which a mobile app is developed for one or more mobile devices, which can include personal digital assistants (PDA), enterprise digital assistants (EDA), or mobile phones. Such software applications are specifically designed to run on mobile devices, taking numerous hardware constraints into consideration. Common constraints include CPU architecture and speeds, available memory (RAM), limited data storage capacities, and considerable variation in displays and input methods. These applications can be pre-installed on phones during manufacturing or delivered as web applications, using server-side or client-side processing to provide an "application-like" experience within a web browser.

<span class="mw-page-title-main">Tablet computer</span> Mobile computer with integrated display, circuitry and battery

A tablet computer, commonly shortened to tablet, is a mobile device, typically with a mobile operating system and touchscreen display processing circuitry, and a rechargeable battery in a single, thin and flat package. Tablets, being computers, have similar capabilities, but lack some input/output (I/O) abilities that others have. Modern tablets largely resemble modern smartphones, the only differences being that tablets are relatively larger than smartphones, with screens 7 inches (18 cm) or larger, measured diagonally, and may not support access to a cellular network. Unlike laptops, tablets usually run mobile operating systems, alongside smartphones.

Resolution independence is where elements on a computer screen are rendered at sizes independent from the pixel grid, resulting in a graphical user interface that is displayed at a consistent physical size, regardless of the resolution of the screen.

Windows XP visual styles are customizations of the graphical user interface of Windows XP. "Luna", "Royale", "Zune", and "Embedded" are codenames of the official visual styles designed for Windows XP by Microsoft. Since Windows XP, themes include the choice of visual styles as well. By default, "Luna" is preinstalled on Windows XP Home and Professional editions, "Royale" is preinstalled on Windows XP Media Center Edition and "Embedded" is preinstalled on Windows Embedded Standard 2009 and Windows Embedded POSReady 2009. In addition to the preinstalled visual styles, Microsoft has released additional ones for download. There were also some placeholder visual styles that Microsoft had used in beta versions of Windows before unveiling the official visual styles, such as "Watercolor" and "Mallard". Third parties have also released visual styles, though these require modification of core Windows components to work. Visual styles are compatible with all Windows XP editions except Starter Edition.

A mobile operating system is an operating system used for smartphones, tablets, smartwatches, smartglasses, or other non-laptop personal mobile computing devices. While computers such as typical/mobile laptops are "mobile", the operating systems used on them are generally not considered mobile, as they were originally designed for desktop computers that historically did not have or need specific mobile features. This line distinguishing mobile and other forms has become blurred in recent years, due to the fact that newer devices have become smaller and more mobile unlike hardware of the past. Key notabilities blurring this line are the introduction of tablet computers, light-weight laptops, and the hybridization of the two in 2-in-1 PCs.

<span class="mw-page-title-main">Windows Phone</span> Family of mobile operating systems developed by Microsoft

Windows Phone (WP) is a discontinued mobile operating system 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 language. Unlike Windows Mobile, it was primarily aimed at the consumer market rather than the enterprise market.

<span class="mw-page-title-main">Metro (design language)</span> Design language introduced by Microsoft

Microsoft Design Language, 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, and basic geometric shapes. Early examples of MDL principles can be found in Encarta 95 and MSN 2.0. The design language evolved in Windows Media Center and Zune and was formally introduced as Metro during the unveiling of Windows Phone 7. It has since been incorporated into several of the company's other products, including the Xbox 360 system software and the Xbox One system software, Windows 8, Windows Phone, and Outlook.com. Before the "Microsoft design language" title became official, Microsoft executive Qi Lu referred to it as the modern UI design language in his MIXX conference keynote speech. According to Microsoft, "Metro" has always been a codename and was never meant as a final product, but news websites attribute this change to trademark issues.

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 desktop computers, and web applications which run in mobile web browsers rather than directly on the mobile device.

<span class="mw-page-title-main">Groove Music</span> Microsoft audio player software application

Groove Music is a discontinued audio player software application included with Windows 8, Windows 8.1, Windows 10 and Windows 11.

<span class="mw-page-title-main">Windows Phone 8</span> Second generation of Microsofts Windows Phone mobile operating system

Windows Phone 8 is the second generation of the Windows Phone mobile operating system from Microsoft. It was released on October 29, 2012, and, like its predecessor, it features a flat user interface based on the Metro design language. It was succeeded by Windows Phone 8.1, which was unveiled on April 2, 2014.

<span class="mw-page-title-main">Material Design</span> Design language developed by Google in 2014

Material Design 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 depth effects such as lighting and shadows. Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference.

<span class="mw-page-title-main">Sunrise Calendar</span>

Sunrise is a discontinued electronic calendar application for mobile and desktop. The service was launched in 2013 by designers Pierre Valade and Jeremy Le Van. In October 2015, Microsoft announced that they had merged the Sunrise Calendar team into the larger Microsoft Outlook team where they will work closely with the Microsoft Outlook Mobile service.

<span class="mw-page-title-main">Fluent Design System</span> Design system created by Microsoft in 2017

Fluent Design System, 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 that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale. The new design language includes more prominent use of motion, depth, and translucency effects.

References

  1. Carrie Cousins (May 28, 2013). "Flat design principles". designmodo.com.
  2. 1 2 3 4 5 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.
  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. Diogo Terror (July 17, 2009). "Lessons From Swiss Style Graphic Design". Smashing. Retrieved March 28, 2014.
  6. "A brief history of flat design". Tech Samurais. July 31, 2013.
  7. Xavier Bertels (March 5, 2014). "The History of Flat Design". Xavier Bertels. Retrieved December 23, 2014.
  8. 1 2 Taimur Asghar (July 9, 2014). "The True History of Flat Design". Web Design Ai.
  9. "Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich". The Verge. Vox Media. Archived from the original on February 12, 2012. Retrieved November 28, 2011.
  10. Amadeo, Ron (June 16, 2014). "The history of Android: The endless iterations of Google's mobile OS". Ars Technica . Condé Nast . Retrieved July 6, 2014.
  11. "Google requiring default 'Holo' theme in Android 4.0 devices for Android Market access". The Verge. Retrieved July 25, 2014.
  12. "Android 4.0 Ice Cream Sandwich SDK released with new features for developers". The Verge. Retrieved July 25, 2014.
  13. Seifert, Dan (June 10, 2013). "Apple announces iOS 7, 'biggest change' since the introduction of the iPhone, coming this fall". The Verge. Retrieved April 6, 2020.
  14. Pavlus, John (June 10, 2013). "Why Jony Ive Is Flattening iOS 7". Fast Company. Retrieved April 6, 2020.
  15. Souppouris, Aaron (June 11, 2013). "Tracing iOS 7's influences: Apple remixes almost everyone in the industry". The Verge. Retrieved April 6, 2020.
  16. "OS X Yosemite unveiled at WWDC, features big UI overhaul". Ars Technica. June 2, 2014. Archived from the original on June 3, 2014. Retrieved June 3, 2014.
  17. "Google's new 'Material Design' UI coming to Android, Chrome OS and the web". Engadget. Retrieved June 26, 2014.
  18. "Google Reveals Details About Android L at Google IO". Anandtech. Retrieved June 26, 2014.
  19. "Google's New, Improved Android Will Deliver A Unified Design Language". Co.Design. June 25, 2014. Retrieved June 26, 2014.
  20. "Google's next big Android redesign is coming in the fall". The Verge. Vox Media. June 25, 2014. Retrieved June 26, 2014.
  21. "Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System". Windows Central. Retrieved December 22, 2017.
  22. "How UI Design in 2022 will Highlight Neumorphism". Better experience design - Blog. January 20, 2022. Retrieved July 19, 2022.
  23. "Why the Flat Design Trend is Hurting Usability". Vandelay Design. April 7, 2015. Retrieved July 6, 2017.
  24. "The Problem With Flat Design, According To A UX Expert". Co.Design. March 23, 2016. Retrieved July 6, 2017.
  25. "Tablet Usability: Findings from User Research". www.nngroup.com. Retrieved July 6, 2017.
  26. "Flat UI Elements Attract Less Attention and Cause Uncertainty". www.nngroup.com. Retrieved May 8, 2018.