flat design

Flat design is a style of interface design emphasizing minimalist use of simple elements, typography, and flat colors.{{cite web|url=http://designmodo.com/flat-design-principles/|title=Flat design principles|website=designmodo.com|author=Carrie Cousins|date=May 28, 2013}}

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.{{cite web|last=Turner|first=Amber Leigh|title=The history of flat design: How efficiency and minimalism turned the digital world flat|url=https://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/|website=The Next Web|access-date=April 11, 2014|date=March 19, 2014}}{{cite web|last=Clum|first=Luke|title=A Look at Flat Design and Why It's Significant|url=http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant|website=UX Magazine|access-date=April 11, 2014|date=May 13, 2013}} 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. As a design approach, it is often contrasted to skeuomorphism{{cite web|url=https://venturebeat.com/2013/09/11/ios-7-windows-8-and-flat-design-in-defense-of-skeuomorphism/ |title=iOS 7, Windows 8, and flat design: In defense of skeuomorphism |author=Yair Grinberg |website=VentureBeat |date=September 11, 2013 |access-date=April 13, 2014}} and rich design.

{{More citations needed|section|date=November 2024}}

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.{{cite web | url=http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/ | title=Lessons From Swiss Style Graphic Design | work=Smashing | date=July 17, 2009 | access-date=March 28, 2014 | author=Diogo Terror}}{{ cite web | url=http://techsamurais.com/?p=1232 | title=A brief history of flat design | work=Tech Samurais | date=July 31, 2013}}{{cite web | url=https://xavierbertels.com/blog/the-history-of-flat-design | title=The History of Flat Design | work=Xavier Bertels | date=March 5, 2014 | access-date=December 23, 2014 | author=Xavier Bertels}} 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.{{cite web | url=http://www.webdesignai.com/flat-design-history/ | title= The True History of Flat Design | work=Web Design Ai | date=July 9, 2014 | author=Taimur Asghar}}

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. 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.

File:Flat widgets.pngs 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.{{cite web|url=https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/|title=Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich|work=The Verge|publisher=Vox Media|url-status=dead|archive-url=https://web.archive.org/web/20120212191122/https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/|archive-date=2012-02-12|access-date=November 28, 2011}}{{cite web|url=https://arstechnica.com/gadgets/2014/06/building-android-a-40000-word-history-of-googles-mobile-os/|title=The history of Android: The endless iterations of Google's mobile OS|last=Amadeo|first=Ron|date=16 June 2014|work=Ars Technica|publisher=Condé Nast|access-date=6 July 2014}}{{cite news|url=https://www.theverge.com/2012/1/3/2680410/google-holo-theme-android-4-0-required|title=Google requiring default 'Holo' theme in Android 4.0 devices for Android Market access|work=The Verge|access-date=25 July 2014}}{{cite news|url=https://www.theverge.com/2011/10/18/android-4-0-ice-cream-sandwich-sdk-released-features-developers|title=Android 4.0 Ice Cream Sandwich SDK released with new features for developers|work=The Verge|access-date=25 July 2014}}

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.{{Cite web|url=https://www.theverge.com/2013/6/10/4407630/apple-announces-ios-7|title=Apple announces iOS 7, 'biggest change' since the introduction of the iPhone, coming this fall|last=Seifert|first=Dan|date=2013-06-10|website=The Verge|language=en|access-date=2020-04-06}}{{Cite web|url=https://www.fastcompany.com/1672780/why-jony-ive-is-flattening-ios-7|title=Why Jony Ive Is Flattening iOS 7|last=Pavlus|first=John|date=2013-06-10|website=Fast Company|language=en-US|access-date=2020-04-06}}{{Cite web|url=https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences|title=Tracing iOS 7's influences: Apple remixes almost everyone in the industry|last=Souppouris|first=Aaron|date=2013-06-11|website=The Verge|language=en|access-date=2020-04-06}} The following year, OS X Yosemite introduced the iOS 7-styled user interface to Apple's Mac OS X operating system.{{cite web|url=https://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/|title=OS X Yosemite unveiled at WWDC, features big UI overhaul|website=Ars Technica|date=June 2, 2014|url-status=live|archive-url=https://web.archive.org/web/20140603214032/http://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/|archive-date=June 3, 2014|access-date=June 3, 2014|df=mdy-all}} Google began to introduce its own flat design language known as "Material Design" for Android (beginning on Android 5.0 "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.{{cite web|url=https://www.engadget.com/2014/06/25/googles-new-design-language-is-called-material-design/|title=Google's new 'Material Design' UI coming to Android, Chrome OS and the web|website=Engadget|date=June 25, 2014 |access-date=June 26, 2014}}{{cite web|url=http://www.anandtech.com/show/8207/google-reveals-details-about-android-l-at-google-io|title=Google Reveals Details About Android L at Google IO|website=Anandtech|access-date=June 26, 2014}}{{cite web|url=http://www.fastcodesign.com/3032378/googles-new-improved-android-will-deliver-a-unified-design-language|title=Google's New, Improved Android Will Deliver A Unified Design Language|website=Co.Design|date=June 25, 2014|access-date=June 26, 2014}}{{cite web|title=Google's next big Android redesign is coming in the fall|url=https://www.theverge.com/2014/6/25/5841302/google-announces-the-next-android|website=The Verge|date=June 25, 2014|publisher=Vox Media|access-date=June 26, 2014}}

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,{{Cite news|url=https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design|title=Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System|work=Windows Central|access-date=2017-12-22}} interface feedback, and a new translucency effect Microsoft dubbed "Acrylic".

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.{{Cite web |date=2022-01-20 |title=How UI Design in 2022 will Highlight Neumorphism |url=http://www.yellowslice.in/bed/neumorphism-ui-design-trend/ |access-date=2022-07-19 |website=Better experience design - Blog |language=en-US}}{{Cite news|url=http://www.vandelaydesign.com/why-the-flat-design-trend-is-hurting-usability/|title=Why the Flat Design Trend is Hurting Usability|date=2015-04-07|work=Vandelay Design|access-date=2017-07-06|language=en-US}} 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.{{Cite news|url=https://www.fastcodesign.com/3058094/the-problem-with-flat-design-according-to-a-ux-expert|title=The Problem With Flat Design, According To A UX Expert|date=2016-03-23|work=Co.Design|access-date=2017-07-06|language=en-US}} 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.{{Cite web|url=https://www.nngroup.com/articles/tablet-usability/|title=Tablet Usability: Findings from User Research|website=www.nngroup.com|access-date=2017-07-06}} Nielsen group conducted research in 2017 according to which the use of interfaces using flat design was 22% slower on average.{{Cite web|url=https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/|title=Flat UI Elements Attract Less Attention and Cause Uncertainty|website=www.nngroup.com|access-date=2018-05-08}}

• Corporate Memphis
• Minimalism
• Swiss Style (design)
• Skeuomorphism
• Neumorphism

{{Reflist}}

Category:Design languages

Category:Graphical user interfaces