Movatterモバイル変換


[0]ホーム

URL:


Jump to content
WikipediaThe Free Encyclopedia
Search

Flat design

From Wikipedia, the free encyclopedia
Minimalist design style for user interface and objects

Volkswagen logo evolution

<1995

2000

2019

Flat design is aminimalistdesign language ordesign style commonly used ingraphical user interfaces (GUI) (such asweb applications andmobile apps), and also in graphical materials such asposters, arts, guide documents and publishing products.

Definition and purpose

[edit]

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 isresponsive to changes in browser size across different devices. With minimal design elements, webpages can bedownloaded faster and resize easily, and still look sharp on high-definition screens.[2] As a design approach, it is often contrasted toskeuomorphism[4] andrich design.[2]

History

[edit]
icon
This sectionneeds additional citations forverification. Please helpimprove this article byadding citations to reliable sources in this section. Unsourced material may be challenged and removed.
Find sources: "Flat design" – news ·newspapers ·books ·scholar ·JSTOR
(November 2024) (Learn how and when to remove this message)

Flat design is primarily influenced by theInternational Typographic Style (also known asSwiss Style),text user interfaces,modernism, and the styles emerging fromBauhaus.[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 releasedWindows Media Center, and in 2006, theZune MP3 player, both of which contained elements of flat design. The design of the Zune was clean and simple, with a focus on largelower case typography, silhouette-style logos, and monochromatic font colors.[8] Microsoft continued this style of design with the 2010 release ofWindows 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 bysans-serif typography from theSegoe font family, flat images, and a menu with a grid-like pattern. Metro was subsequently adopted by all Microsoft software lines, including theWindows 8PCoperating system.[2]

GUI widgets designed in Google'sMaterial Design style

Android began to adopt flat design trends with4.0 "Ice Cream Sandwich" in 2011;Matias Duarte,Google's vice president of design, felt thatApple'siOS was tooskeuomorphic,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, anddrop shadows for depth.[9][10][11][12]

In 2013, Apple unveilediOS 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'sMac OS X operating system.[16] Google began to introduce its own flat design language known as "Material Design" for Android (beginning onAndroid 5.0 "Lollipop") and its other platforms, which is based onindex card-like sheets and the use of shadows to promote depth and hierarchy, as well as smoothanimations and transitions.[17][18][19][20]

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

Criticism

[edit]

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 2013Jakob 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 betweenskeuomorphism 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

[edit]

References

[edit]
  1. ^Carrie Cousins (May 28, 2013)."Flat design principles".designmodo.com.
  2. ^abcdeTurner, Amber Leigh (March 19, 2014)."The history of flat design: How efficiency and minimalism turned the digital world flat".The Next Web. RetrievedApril 11, 2014.
  3. ^Clum, Luke (May 13, 2013)."A Look at Flat Design and Why It's Significant".UX Magazine. RetrievedApril 11, 2014.
  4. ^Yair Grinberg (September 11, 2013)."iOS 7, Windows 8, and flat design: In defense of skeuomorphism".VentureBeat. RetrievedApril 13, 2014.
  5. ^Diogo Terror (July 17, 2009)."Lessons From Swiss Style Graphic Design".Smashing. RetrievedMarch 28, 2014.
  6. ^"A brief history of flat design".Tech Samurais. July 31, 2013. Archived fromthe original on October 2, 2014. RetrievedNovember 3, 2014.
  7. ^Xavier Bertels (March 5, 2014)."The History of Flat Design".Xavier Bertels. RetrievedDecember 23, 2014.
  8. ^abTaimur Asghar (July 9, 2014)."The True History of Flat Design".Web Design Ai. Archived fromthe original on September 13, 2014.
  9. ^"Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich".The Verge.Vox Media. Archived fromthe original on February 12, 2012. RetrievedNovember 28, 2011.
  10. ^Amadeo, Ron (June 16, 2014)."The history of Android: The endless iterations of Google's mobile OS".Ars Technica.Condé Nast. RetrievedJuly 6, 2014.
  11. ^"Google requiring default 'Holo' theme in Android 4.0 devices for Android Market access".The Verge. RetrievedJuly 25, 2014.
  12. ^"Android 4.0 Ice Cream Sandwich SDK released with new features for developers".The Verge. RetrievedJuly 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. RetrievedApril 6, 2020.
  14. ^Pavlus, John (June 10, 2013)."Why Jony Ive Is Flattening iOS 7".Fast Company. RetrievedApril 6, 2020.
  15. ^Souppouris, Aaron (June 11, 2013)."Tracing iOS 7's influences: Apple remixes almost everyone in the industry".The Verge. RetrievedApril 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. RetrievedJune 3, 2014.
  17. ^"Google's new 'Material Design' UI coming to Android, Chrome OS and the web".Engadget. June 25, 2014. RetrievedJune 26, 2014.
  18. ^"Google Reveals Details About Android L at Google IO".Anandtech. Archived fromthe original on June 28, 2014. RetrievedJune 26, 2014.
  19. ^"Google's New, Improved Android Will Deliver A Unified Design Language".Co.Design. June 25, 2014. RetrievedJune 26, 2014.
  20. ^"Google's next big Android redesign is coming in the fall".The Verge. Vox Media. June 25, 2014. RetrievedJune 26, 2014.
  21. ^"Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System".Windows Central. RetrievedDecember 22, 2017.
  22. ^"How UI Design in 2022 will Highlight Neumorphism".Better experience design - Blog. January 20, 2022. RetrievedJuly 19, 2022.
  23. ^"Why the Flat Design Trend is Hurting Usability".Vandelay Design. April 7, 2015. RetrievedJuly 6, 2017.
  24. ^"The Problem With Flat Design, According To A UX Expert".Co.Design. March 23, 2016. RetrievedJuly 6, 2017.
  25. ^"Tablet Usability: Findings from User Research".www.nngroup.com. RetrievedJuly 6, 2017.
  26. ^"Flat UI Elements Attract Less Attention and Cause Uncertainty".www.nngroup.com. RetrievedMay 8, 2018.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Flat_design&oldid=1317358671"
Categories:
Hidden categories:

[8]ページ先頭

©2009-2026 Movatter.jp