CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Flat design - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"dc490b23-8715-475c-842f-2051637e3d11","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Flat_design","wgTitle":"Flat design","wgCurRevisionId":1257654247,"wgRevisionId":1257654247,"wgArticleId":41246906,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Articles with short description","Short description is different from Wikidata","Use mdy dates from June 2020","Articles needing additional references from November 2024","All articles needing additional references","Articles with specifically marked weasel-worded phrases from October 2020","Design language","Graphical user interfaces"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Flat_design","wgRelevantArticleId":41246906 ,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":10000,"wgRelatedArticlesCompat":[],"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q15266360","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true ,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","mediawiki.page.media","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init", "ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.quicksurveys.init","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Flat design - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Flat_design"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Flat_design&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Flat_design"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Flat_design rootpage-Flat_design skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Flat+design" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Flat+design" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Flat+design" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Flat+design" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Definition_and_purpose" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Definition_and_purpose"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Definition and purpose</span> </div> </a> <ul id="toc-Definition_and_purpose-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-History" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>History</span> </div> </a> <ul id="toc-History-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Criticism" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Criticism"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Criticism</span> </div> </a> <ul id="toc-Criticism-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Flat design</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 19 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-19" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">19 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%AA%D8%B5%D8%A7%D9%85%D9%8A%D9%85_%D9%85%D8%B3%D8%B7%D8%AD%D8%A9" title="تصاميم مسطحة – Arabic" lang="ar" hreflang="ar" data-title="تصاميم مسطحة" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-cs mw-list-item"><a href="https://cs.wikipedia.org/wiki/Ploch%C3%BD_design" title="Plochý design – Czech" lang="cs" hreflang="cs" data-title="Plochý design" data-language-autonym="Čeština" data-language-local-name="Czech" class="interlanguage-link-target"><span>Čeština</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Flat_Design" title="Flat Design – German" lang="de" hreflang="de" data-title="Flat Design" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/Sile_disain" title="Sile disain – Estonian" lang="et" hreflang="et" data-title="Sile disain" data-language-autonym="Eesti" data-language-local-name="Estonian" class="interlanguage-link-target"><span>Eesti</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/Dise%C3%B1o_plano" title="Diseño plano – Spanish" lang="es" hreflang="es" data-title="Diseño plano" data-language-autonym="Español" data-language-local-name="Spanish" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%AA%D8%AE%D8%AA" title="طراحی تخت – Persian" lang="fa" hreflang="fa" data-title="طراحی تخت" data-language-autonym="فارسی" data-language-local-name="Persian" class="interlanguage-link-target"><span>فارسی</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Flat_design" title="Flat design – French" lang="fr" hreflang="fr" data-title="Flat design" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9E%AB_%EB%94%94%EC%9E%90%EC%9D%B8" title="플랫 디자인 – Korean" lang="ko" hreflang="ko" data-title="플랫 디자인" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikipedia.org/wiki/Flat_design" title="Flat design – Italian" lang="it" hreflang="it" data-title="Flat design" data-language-autonym="Italiano" data-language-local-name="Italian" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Flat_design" title="Flat design – Dutch" lang="nl" hreflang="nl" data-title="Flat design" data-language-autonym="Nederlands" data-language-local-name="Dutch" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" title="フラットデザイン – Japanese" lang="ja" hreflang="ja" data-title="フラットデザイン" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikipedia.org/wiki/Flat_design" title="Flat design – Polish" lang="pl" hreflang="pl" data-title="Flat design" data-language-autonym="Polski" data-language-local-name="Polish" class="interlanguage-link-target"><span>Polski</span></a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Flat_design" title="Flat design – Portuguese" lang="pt" hreflang="pt" data-title="Flat design" data-language-autonym="Português" data-language-local-name="Portuguese" class="interlanguage-link-target"><span>Português</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/Flat_design" title="Flat design – Russian" lang="ru" hreflang="ru" data-title="Flat design" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-sr mw-list-item"><a href="https://sr.wikipedia.org/wiki/%D0%A4%D0%BB%D0%B5%D1%82_%D0%B4%D0%B8%D0%B7%D0%B0%D1%98%D0%BD" title="Флет дизајн – Serbian" lang="sr" hreflang="sr" data-title="Флет дизајн" data-language-autonym="Српски / srpski" data-language-local-name="Serbian" class="interlanguage-link-target"><span>Српски / srpski</span></a></li><li class="interlanguage-link interwiki-th mw-list-item"><a href="https://th.wikipedia.org/wiki/%E0%B9%81%E0%B8%9F%E0%B8%A5%E0%B8%97%E0%B8%94%E0%B8%B5%E0%B9%84%E0%B8%8B%E0%B8%99%E0%B9%8C" title="แฟลทดีไซน์ – Thai" lang="th" hreflang="th" data-title="แฟลทดีไซน์" data-language-autonym="ไทย" data-language-local-name="Thai" class="interlanguage-link-target"><span>ไทย</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/D%C3%BCz_tasar%C4%B1m" title="Düz tasarım – Turkish" lang="tr" hreflang="tr" data-title="Düz tasarım" data-language-autonym="Türkçe" data-language-local-name="Turkish" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/Flat_UI_Design" title="Flat UI Design – Ukrainian" lang="uk" hreflang="uk" data-title="Flat UI Design" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target"><span>Українська</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/%E6%89%81%E5%B9%B3%E5%8C%96%E8%AE%BE%E8%AE%A1" title="扁平化设计 – Chinese" lang="zh" hreflang="zh" data-title="扁平化设计" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q15266360#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Flat_design" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Flat_design" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Flat_design"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Flat_design&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Flat_design&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Flat_design"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Flat_design&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Flat_design&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Flat_design" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Flat_design" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Flat_design&oldid=1257654247" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Flat_design&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Flat_design&id=1257654247&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFlat_design"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFlat_design"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Flat_design&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Flat_design&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:Flat_design" hreflang="en"><span>Wikimedia Commons</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q15266360" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Minimalist design style for user interface and objects</div> <p class="mw-empty-elt"> </p> <table class="wikitable" align="right"> <caption><a href="/wiki/Volkswagen" title="Volkswagen">Volkswagen</a> logo evolution </caption> <tbody><tr> <td><span typeof="mw:File/Frameless"><a href="/wiki/File:Volkswagen_Logo_till_1995.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Volkswagen_Logo_till_1995.svg/64px-Volkswagen_Logo_till_1995.svg.png" decoding="async" width="64" height="64" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Volkswagen_Logo_till_1995.svg/96px-Volkswagen_Logo_till_1995.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Volkswagen_Logo_till_1995.svg/128px-Volkswagen_Logo_till_1995.svg.png 2x" data-file-width="214" data-file-height="214" /></a></span><br /><div class="center" style="width:auto; margin-left:auto; margin-right:auto;"><1995</div> </td> <td><span typeof="mw:File/Frameless"><a href="/wiki/File:VW_logo_2000.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/VW_logo_2000.png/64px-VW_logo_2000.png" decoding="async" width="64" height="63" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/VW_logo_2000.png/96px-VW_logo_2000.png 1.5x, //upload.wikimedia.org/wikipedia/commons/3/3c/VW_logo_2000.png 2x" data-file-width="113" data-file-height="112" /></a></span><br /><div class="center" style="width:auto; margin-left:auto; margin-right:auto;">2000</div> </td> <td><span typeof="mw:File/Frameless"><a href="/wiki/File:Volkswagen_logo_2019.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Volkswagen_logo_2019.svg/64px-Volkswagen_logo_2019.svg.png" decoding="async" width="64" height="64" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Volkswagen_logo_2019.svg/96px-Volkswagen_logo_2019.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Volkswagen_logo_2019.svg/128px-Volkswagen_logo_2019.svg.png 2x" data-file-width="1024" data-file-height="1024" /></a></span><br /><div class="center" style="width:auto; margin-left:auto; margin-right:auto;">2019</div> </td></tr></tbody></table> <p><b>Flat design</b> is a <a href="/wiki/Minimalism_(computing)" title="Minimalism (computing)">minimalist</a> <a href="/wiki/Design_language" title="Design language">design language</a> or <a href="/wiki/Design_style" class="mw-redirect" title="Design style">design style</a> commonly used in <a href="/wiki/Graphical_user_interfaces" class="mw-redirect" title="Graphical user interfaces">graphical user interfaces</a> (GUI) (such as <a href="/wiki/Web_application" title="Web application">web applications</a> and <a href="/wiki/Mobile_app" title="Mobile app">mobile apps</a>), and also in graphical materials such as <a href="/wiki/Poster" title="Poster">posters</a>, arts, guide documents and publishing products. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Definition_and_purpose">Definition and purpose</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Flat_design&action=edit&section=1" title="Edit section: Definition and purpose"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Flat design is a style of interface design emphasizing minimalist use of simple elements, <a href="/wiki/Typography" title="Typography">typography</a>, and flat colors.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> </p><p>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.<sup id="cite_ref-TNW_2-0" class="reference"><a href="#cite_note-TNW-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> Additionally, it makes it easier to design an interface that is <a href="/wiki/Responsive_design" class="mw-redirect" title="Responsive design">responsive</a> to changes in browser size across different devices. With minimal design elements, webpages can be <a href="/wiki/Download" title="Download">downloaded</a> faster and resize easily, and still look sharp on high-definition screens.<sup id="cite_ref-TNW_2-1" class="reference"><a href="#cite_note-TNW-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> As a design approach, it is often contrasted to <a href="/wiki/Skeuomorphism" class="mw-redirect" title="Skeuomorphism">skeuomorphism</a><sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> and <i>rich design</i>.<sup id="cite_ref-TNW_2-2" class="reference"><a href="#cite_note-TNW-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="History">History</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Flat_design&action=edit&section=2" title="Edit section: History"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1251242444">.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}</style><table class="box-More_citations_needed plainlinks metadata ambox ambox-content ambox-Refimprove" role="presentation"><tbody><tr><td class="mbox-image"><div class="mbox-image-div"><span typeof="mw:File"><a href="/wiki/File:Question_book-new.svg" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png" decoding="async" width="50" height="39" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/75px-Question_book-new.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/100px-Question_book-new.svg.png 2x" data-file-width="512" data-file-height="399" /></a></span></div></td><td class="mbox-text"><div class="mbox-text-span">This section <b>needs additional citations for <a href="/wiki/Wikipedia:Verifiability" title="Wikipedia:Verifiability">verification</a></b>.<span class="hide-when-compact"> Please help <a href="/wiki/Special:EditPage/Flat_design" title="Special:EditPage/Flat design">improve this article</a> by <a href="/wiki/Help:Referencing_for_beginners" title="Help:Referencing for beginners">adding citations to reliable sources</a> in this section. Unsourced material may be challenged and removed.<br /><small><span class="plainlinks"><i>Find sources:</i> <a rel="nofollow" class="external text" href="https://www.google.com/search?as_eq=wikipedia&q=%22Flat+design%22">"Flat design"</a> – <a rel="nofollow" class="external text" href="https://www.google.com/search?tbm=nws&q=%22Flat+design%22+-wikipedia&tbs=ar:1">news</a> <b>·</b> <a rel="nofollow" class="external text" href="https://www.google.com/search?&q=%22Flat+design%22&tbs=bkt:s&tbm=bks">newspapers</a> <b>·</b> <a rel="nofollow" class="external text" href="https://www.google.com/search?tbs=bks:1&q=%22Flat+design%22+-wikipedia">books</a> <b>·</b> <a rel="nofollow" class="external text" href="https://scholar.google.com/scholar?q=%22Flat+design%22">scholar</a> <b>·</b> <a rel="nofollow" class="external text" href="https://www.jstor.org/action/doBasicSearch?Query=%22Flat+design%22&acc=on&wc=on">JSTOR</a></span></small></span> <span class="date-container"><i>(<span class="date">November 2024</span>)</i></span><span class="hide-when-compact"><i> (<small><a href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">Learn how and when to remove this message</a></small>)</i></span></div></td></tr></tbody></table> <p>Flat design is primarily influenced by the <a href="/wiki/International_Typographic_Style" title="International Typographic Style">International Typographic Style</a> (also known as <i>Swiss Style</i>), <a href="/wiki/Text_user_interface" class="mw-redirect" title="Text user interface">text user interfaces</a>, <a href="/wiki/Modernism" title="Modernism">modernism</a>, and the styles emerging from <a href="/wiki/Bauhaus" title="Bauhaus">Bauhaus</a>.<sup id="cite_ref-TNW_2-3" class="reference"><a href="#cite_note-TNW-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> 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.<sup id="cite_ref-TA_8-0" class="reference"><a href="#cite_note-TA-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> </p><p>In 2002, <a href="/wiki/Microsoft" title="Microsoft">Microsoft</a> released <a href="/wiki/Windows_Media_Center" title="Windows Media Center">Windows Media Center</a>, and in 2006, the <a href="/wiki/Zune" title="Zune">Zune</a> MP3 player, both of which contained elements of flat design. The design of the Zune was clean and simple, with a focus on large <a href="/wiki/Lower_case" class="mw-redirect" title="Lower case">lower case</a> typography, silhouette-style logos, and monochromatic font colors.<sup id="cite_ref-TA_8-1" class="reference"><a href="#cite_note-TA-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> Microsoft continued this style of design with the 2010 release of <a href="/wiki/Windows_Phone_7" title="Windows Phone 7">Windows Phone 7</a>, which built on the flat design elements introduced with the Zune, formalized as the "<a href="/wiki/Metro_(design_language)" title="Metro (design language)">Metro design language</a>". The design was dominated by large and bright shapes accompanied by <a href="/wiki/Sans-serif" title="Sans-serif">sans-serif</a> typography from the <a href="/wiki/Segoe" title="Segoe">Segoe font family</a>, flat images, and a menu with a grid-like pattern. Metro was subsequently adopted by all Microsoft software lines, including the <a href="/wiki/Windows_8" title="Windows 8">Windows 8</a> <a href="/wiki/Personal_computer" title="Personal computer">PC</a> <a href="/wiki/Operating_system" title="Operating system">operating system</a>.<sup id="cite_ref-TNW_2-4" class="reference"><a href="#cite_note-TNW-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Flat_widgets.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/en/thumb/3/3a/Flat_widgets.png/170px-Flat_widgets.png" decoding="async" width="170" height="256" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/3/3a/Flat_widgets.png/255px-Flat_widgets.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/3/3a/Flat_widgets.png/340px-Flat_widgets.png 2x" data-file-width="576" data-file-height="866" /></a><figcaption><a href="/wiki/GUI_widget" class="mw-redirect" title="GUI widget">GUI widgets</a> designed in Google's <a href="/wiki/Material_Design" title="Material Design">Material Design</a> style</figcaption></figure> <p><a href="/wiki/Android_(operating_system)" title="Android (operating system)">Android</a> began to adopt flat design trends with <a href="/wiki/Android_Ice_Cream_Sandwich" title="Android Ice Cream Sandwich">4.0 "Ice Cream Sandwich"</a> in 2011; <a href="/wiki/Matias_Duarte" class="mw-redirect" title="Matias Duarte">Matias Duarte</a>, <a href="/wiki/Google" title="Google">Google</a>'s vice president of design, felt that <a href="/wiki/Apple_Inc." title="Apple Inc.">Apple</a>'s <a href="/wiki/IOS" title="IOS">iOS</a> was too <a href="/wiki/Skeuomorph" title="Skeuomorph">skeuomorphic</a>, <a href="/wiki/Windows_Phone" title="Windows Phone">Windows Phone</a> 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 <a href="/wiki/Drop_shadow" title="Drop shadow">drop shadows</a> for depth.<sup id="cite_ref-verge-duarte_9-0" class="reference"><a href="#cite_note-verge-duarte-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-ars-androidhistory_10-0" class="reference"><a href="#cite_note-ars-androidhistory-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-verge-holomandate_11-0" class="reference"><a href="#cite_note-verge-holomandate-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-verge-4sdk_12-0" class="reference"><a href="#cite_note-verge-4sdk-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> </p><p>In 2013, Apple unveiled <a href="/wiki/IOS_7" title="IOS 7">iOS 7</a>, which shifted to a flat UI design with use of brighter colors, typography, as well as blurred, <a href="/wiki/Translucency" class="mw-redirect" title="Translucency">translucent</a> overlays.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> The following year, <a href="/wiki/OS_X_Yosemite" title="OS X Yosemite">OS X Yosemite</a> introduced the iOS 7-styled user interface to Apple's <a href="/wiki/Mac_OS_X" class="mw-redirect" title="Mac OS X">Mac OS X</a> operating system.<sup id="cite_ref-ars-yosemiteui_16-0" class="reference"><a href="#cite_note-ars-yosemiteui-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> Google began to introduce its own flat design language known as "<a href="/wiki/Material_Design" title="Material Design">Material Design</a>" for Android (beginning on <a href="/wiki/Android_Lollipop" title="Android Lollipop">Android 5.0 "Lollipop"</a>) and its other platforms, which is based on <a href="/wiki/Index_card" title="Index card">index card</a>-like sheets and the use of shadows to promote depth and hierarchy, as well as smooth <a href="/wiki/Animation" title="Animation">animations</a> and transitions.<sup id="cite_ref-engadget-materialdesign_17-0" class="reference"><a href="#cite_note-engadget-materialdesign-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-anandtech-lunveil_18-0" class="reference"><a href="#cite_note-anandtech-lunveil-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-codesign-cards_19-0" class="reference"><a href="#cite_note-codesign-cards-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-verge-androidl_20-0" class="reference"><a href="#cite_note-verge-androidl-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup> </p><p>In 2017, Microsoft unveiled the <a href="/wiki/Fluent_Design_System" title="Fluent Design System">Fluent Design System</a>, a new flat user interface. This new interface departs from its predecessor, Metro, through the use of depth,<sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup> interface <a href="/wiki/Feedback" title="Feedback">feedback</a>, and a new translucency effect dubbed "Acrylic".<sup class="noprint Inline-Template" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Manual_of_Style/Words_to_watch#Unsupported_attributions" title="Wikipedia:Manual of Style/Words to watch"><span title="The material near this tag may use weasel words or too-vague attribution. (October 2020)">by whom?</span></a></i>]</sup> </p><p>After 2017, flat design continued to evolve, incorporating new elements to enhance usability and user experience while maintaining its core principles of simplicity and minimalism. </p><p>With the Fluent Design System, Microsoft pushed flat design further by introducing more visual depth, motion, and light. This shift addressed some of the criticisms of earlier flat designs, such as the lack of visual hierarchy and interaction cues. Fluent Design was applied across Windows 10 and Microsoft’s ecosystem, making interfaces feel more responsive and intuitive, especially in a multi-device environment. </p><p>Meanwhile, Google's Material Design kept advancing as well. In 2018, Google introduced Material Theming, a major update to Material Design that allowed for more customization and flexibility. Designers were given the freedom to adapt the flat design principles to their brand’s identity, including dynamic color palettes, typography, and shape variations. This move allowed for both consistency across Google products and more brand-specific designs on apps using Material Design. </p><p>Other platforms and apps continued to adopt and adapt flat design principles in the following years. For instance, Apple refined its flat design approach with the release of iOS 13 in 2019, which added Dark Mode, creating a more immersive experience and introducing subtle shadows to make interactive elements more distinguishable. </p><p>Flat design, in its various iterations—whether pure flat, semi-flat, or enriched with depth and motion—remains one of the most influential UI styles in modern digital interfaces. It has successfully combined minimalism with better usability, balancing simplicity and functionality across platforms. </p> <div class="mw-heading mw-heading2"><h2 id="Criticism">Criticism</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Flat_design&action=edit&section=3" title="Edit section: Criticism"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>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.<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> 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.<sup id="cite_ref-24" class="reference"><a href="#cite_note-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> In 2013 <a href="/wiki/Jakob_Nielsen_(usability_consultant)" title="Jakob Nielsen (usability consultant)">Jakob Nielsen</a>, 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 <a href="/wiki/Skeuomorphism" class="mw-redirect" title="Skeuomorphism">skeuomorphism</a> and flat design.<sup id="cite_ref-25" class="reference"><a href="#cite_note-25"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup> Nielsen group conducted research in 2017 according to which the use of interfaces using flat design was 22% slower on average.<sup id="cite_ref-26" class="reference"><a href="#cite_note-26"><span class="cite-bracket">[</span>26<span class="cite-bracket">]</span></a></sup> <sup id="cite_ref-27" class="reference"><a href="#cite_note-27"><span class="cite-bracket">[</span>27<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Flat_design&action=edit&section=4" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/Corporate_Memphis" title="Corporate Memphis">Corporate Memphis</a></li> <li><a href="/wiki/Minimalism" title="Minimalism">Minimalism</a></li> <li><a href="/wiki/Swiss_Style_(design)" title="Swiss Style (design)">Swiss Style (design)</a></li> <li><a href="/wiki/Skeuomorphism" class="mw-redirect" title="Skeuomorphism">Skeuomorphism</a></li> <li><a href="/wiki/Neumorphism" title="Neumorphism">Neumorphism</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Flat_design&action=edit&section=5" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap mw-references-columns"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite id="CITEREFCarrie_Cousins2013" class="citation web cs1">Carrie Cousins (May 28, 2013). <a rel="nofollow" class="external text" href="http://designmodo.com/flat-design-principles/">"Flat design principles"</a>. <i>designmodo.com</i>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=designmodo.com&rft.atitle=Flat+design+principles&rft.date=2013-05-28&rft.au=Carrie+Cousins&rft_id=http%3A%2F%2Fdesignmodo.com%2Fflat-design-principles%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-TNW-2"><span class="mw-cite-backlink">^ <a href="#cite_ref-TNW_2-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-TNW_2-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-TNW_2-2"><sup><i><b>c</b></i></sup></a> <a href="#cite_ref-TNW_2-3"><sup><i><b>d</b></i></sup></a> <a href="#cite_ref-TNW_2-4"><sup><i><b>e</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFTurner2014" class="citation web cs1">Turner, Amber Leigh (March 19, 2014). <a rel="nofollow" class="external text" href="https://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/">"The history of flat design: How efficiency and minimalism turned the digital world flat"</a>. <i>The Next Web</i><span class="reference-accessdate">. Retrieved <span class="nowrap">April 11,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Next+Web&rft.atitle=The+history+of+flat+design%3A+How+efficiency+and+minimalism+turned+the+digital+world+flat&rft.date=2014-03-19&rft.aulast=Turner&rft.aufirst=Amber+Leigh&rft_id=https%3A%2F%2Fthenextweb.com%2Fdd%2F2014%2F03%2F19%2Fhistory-flat-design-efficiency-minimalism-made-digital-world-flat%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFClum2013" class="citation web cs1">Clum, Luke (May 13, 2013). <a rel="nofollow" class="external text" href="http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant">"A Look at Flat Design and Why It's Significant"</a>. <i>UX Magazine</i><span class="reference-accessdate">. Retrieved <span class="nowrap">April 11,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=UX+Magazine&rft.atitle=A+Look+at+Flat+Design+and+Why+It%27s+Significant&rft.date=2013-05-13&rft.aulast=Clum&rft.aufirst=Luke&rft_id=http%3A%2F%2Fuxmag.com%2Farticles%2Fa-look-at-flat-design-and-why-its-significant&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFYair_Grinberg2013" class="citation web cs1">Yair Grinberg (September 11, 2013). <a rel="nofollow" class="external text" href="https://venturebeat.com/2013/09/11/ios-7-windows-8-and-flat-design-in-defense-of-skeuomorphism/">"iOS 7, Windows 8, and flat design: In defense of skeuomorphism"</a>. <i>VentureBeat</i><span class="reference-accessdate">. Retrieved <span class="nowrap">April 13,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=VentureBeat&rft.atitle=iOS+7%2C+Windows+8%2C+and+flat+design%3A+In+defense+of+skeuomorphism&rft.date=2013-09-11&rft.au=Yair+Grinberg&rft_id=https%3A%2F%2Fventurebeat.com%2F2013%2F09%2F11%2Fios-7-windows-8-and-flat-design-in-defense-of-skeuomorphism%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFDiogo_Terror2009" class="citation web cs1">Diogo Terror (July 17, 2009). <a rel="nofollow" class="external text" href="https://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/">"Lessons From Swiss Style Graphic Design"</a>. <i>Smashing</i><span class="reference-accessdate">. Retrieved <span class="nowrap">March 28,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Smashing&rft.atitle=Lessons+From+Swiss+Style+Graphic+Design&rft.date=2009-07-17&rft.au=Diogo+Terror&rft_id=http%3A%2F%2Fwww.smashingmagazine.com%2F2009%2F07%2F17%2Flessons-from-swiss-style-graphic-design%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://techsamurais.com/?p=1232">"A brief history of flat design"</a>. <i>Tech Samurais</i>. July 31, 2013.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Tech+Samurais&rft.atitle=A+brief+history+of+flat+design&rft.date=2013-07-31&rft_id=http%3A%2F%2Ftechsamurais.com%2F%3Fp%3D1232&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFXavier_Bertels2014" class="citation web cs1">Xavier Bertels (March 5, 2014). <a rel="nofollow" class="external text" href="https://xavierbertels.com/blog/the-history-of-flat-design">"The History of Flat Design"</a>. <i>Xavier Bertels</i><span class="reference-accessdate">. Retrieved <span class="nowrap">December 23,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Xavier+Bertels&rft.atitle=The+History+of+Flat+Design&rft.date=2014-03-05&rft.au=Xavier+Bertels&rft_id=https%3A%2F%2Fxavierbertels.com%2Fblog%2Fthe-history-of-flat-design&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-TA-8"><span class="mw-cite-backlink">^ <a href="#cite_ref-TA_8-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-TA_8-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFTaimur_Asghar2014" class="citation web cs1">Taimur Asghar (July 9, 2014). <a rel="nofollow" class="external text" href="http://www.webdesignai.com/flat-design-history/">"The True History of Flat Design"</a>. <i>Web Design Ai</i>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Web+Design+Ai&rft.atitle=The+True+History+of+Flat+Design&rft.date=2014-07-09&rft.au=Taimur+Asghar&rft_id=http%3A%2F%2Fwww.webdesignai.com%2Fflat-design-history%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-verge-duarte-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-verge-duarte_9-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20120212191122/https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/">"Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich"</a>. <i>The Verge</i>. <a href="/wiki/Vox_Media" title="Vox Media">Vox Media</a>. Archived from <a rel="nofollow" class="external text" href="https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/">the original</a> on February 12, 2012<span class="reference-accessdate">. Retrieved <span class="nowrap">November 28,</span> 2011</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Verge&rft.atitle=Exclusive%3A+Matias+Duarte+on+the+philosophy+of+Android%2C+and+an+in-depth+look+at+Ice+Cream+Sandwich&rft_id=https%3A%2F%2Fwww.theverge.com%2F2011%2F10%2F18%2Fexclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-ars-androidhistory-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-ars-androidhistory_10-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFAmadeo2014" class="citation web cs1">Amadeo, Ron (June 16, 2014). <a rel="nofollow" class="external text" href="https://arstechnica.com/gadgets/2014/06/building-android-a-40000-word-history-of-googles-mobile-os/">"The history of Android: The endless iterations of Google's mobile OS"</a>. <i><a href="/wiki/Ars_Technica" title="Ars Technica">Ars Technica</a></i>. <a href="/wiki/Cond%C3%A9_Nast" title="Condé Nast">Condé Nast</a><span class="reference-accessdate">. Retrieved <span class="nowrap">July 6,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Ars+Technica&rft.atitle=The+history+of+Android%3A+The+endless+iterations+of+Google%27s+mobile+OS&rft.date=2014-06-16&rft.aulast=Amadeo&rft.aufirst=Ron&rft_id=https%3A%2F%2Farstechnica.com%2Fgadgets%2F2014%2F06%2Fbuilding-android-a-40000-word-history-of-googles-mobile-os%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-verge-holomandate-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-verge-holomandate_11-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation news cs1"><a rel="nofollow" class="external text" href="https://www.theverge.com/2012/1/3/2680410/google-holo-theme-android-4-0-required">"Google requiring default 'Holo' theme in Android 4.0 devices for Android Market access"</a>. <i>The Verge</i><span class="reference-accessdate">. Retrieved <span class="nowrap">July 25,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=The+Verge&rft.atitle=Google+requiring+default+%27Holo%27+theme+in+Android+4.0+devices+for+Android+Market+access&rft_id=https%3A%2F%2Fwww.theverge.com%2F2012%2F1%2F3%2F2680410%2Fgoogle-holo-theme-android-4-0-required&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-verge-4sdk-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-verge-4sdk_12-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation news cs1"><a rel="nofollow" class="external text" href="https://www.theverge.com/2011/10/18/android-4-0-ice-cream-sandwich-sdk-released-features-developers">"Android 4.0 Ice Cream Sandwich SDK released with new features for developers"</a>. <i>The Verge</i><span class="reference-accessdate">. Retrieved <span class="nowrap">July 25,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=The+Verge&rft.atitle=Android+4.0+Ice+Cream+Sandwich+SDK+released+with+new+features+for+developers&rft_id=https%3A%2F%2Fwww.theverge.com%2F2011%2F10%2F18%2Fandroid-4-0-ice-cream-sandwich-sdk-released-features-developers&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSeifert2013" class="citation web cs1">Seifert, Dan (June 10, 2013). <a rel="nofollow" class="external text" href="https://www.theverge.com/2013/6/10/4407630/apple-announces-ios-7">"Apple announces iOS 7, 'biggest change' since the introduction of the iPhone, coming this fall"</a>. <i>The Verge</i><span class="reference-accessdate">. Retrieved <span class="nowrap">April 6,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Verge&rft.atitle=Apple+announces+iOS+7%2C+%27biggest+change%27+since+the+introduction+of+the+iPhone%2C+coming+this+fall&rft.date=2013-06-10&rft.aulast=Seifert&rft.aufirst=Dan&rft_id=https%3A%2F%2Fwww.theverge.com%2F2013%2F6%2F10%2F4407630%2Fapple-announces-ios-7&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-14">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPavlus2013" class="citation web cs1">Pavlus, John (June 10, 2013). <a rel="nofollow" class="external text" href="https://www.fastcompany.com/1672780/why-jony-ive-is-flattening-ios-7">"Why Jony Ive Is Flattening iOS 7"</a>. <i>Fast Company</i><span class="reference-accessdate">. Retrieved <span class="nowrap">April 6,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Fast+Company&rft.atitle=Why+Jony+Ive+Is+Flattening+iOS+7&rft.date=2013-06-10&rft.aulast=Pavlus&rft.aufirst=John&rft_id=https%3A%2F%2Fwww.fastcompany.com%2F1672780%2Fwhy-jony-ive-is-flattening-ios-7&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSouppouris2013" class="citation web cs1">Souppouris, Aaron (June 11, 2013). <a rel="nofollow" class="external text" href="https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences">"Tracing iOS 7's influences: Apple remixes almost everyone in the industry"</a>. <i>The Verge</i><span class="reference-accessdate">. Retrieved <span class="nowrap">April 6,</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Verge&rft.atitle=Tracing+iOS+7%27s+influences%3A+Apple+remixes+almost+everyone+in+the+industry&rft.date=2013-06-11&rft.aulast=Souppouris&rft.aufirst=Aaron&rft_id=https%3A%2F%2Fwww.theverge.com%2F2013%2F6%2F11%2F4418188%2Fapple-ios-7-design-influences&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-ars-yosemiteui-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-ars-yosemiteui_16-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/">"OS X Yosemite unveiled at WWDC, features big UI overhaul"</a>. <i>Ars Technica</i>. June 2, 2014. <a rel="nofollow" class="external text" href="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/">Archived</a> from the original on June 3, 2014<span class="reference-accessdate">. Retrieved <span class="nowrap">June 3,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Ars+Technica&rft.atitle=OS+X+Yosemite+unveiled+at+WWDC%2C+features+big+UI+overhaul&rft.date=2014-06-02&rft_id=https%3A%2F%2Farstechnica.com%2Fapple%2F2014%2F06%2Fos-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-engadget-materialdesign-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-engadget-materialdesign_17-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.engadget.com/2014/06/25/googles-new-design-language-is-called-material-design/">"Google's new 'Material Design' UI coming to Android, Chrome OS and the web"</a>. <i>Engadget</i><span class="reference-accessdate">. Retrieved <span class="nowrap">June 26,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Engadget&rft.atitle=Google%27s+new+%27Material+Design%27+UI+coming+to+Android%2C+Chrome+OS+and+the+web&rft_id=https%3A%2F%2Fwww.engadget.com%2F2014%2F06%2F25%2Fgoogles-new-design-language-is-called-material-design%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-anandtech-lunveil-18"><span class="mw-cite-backlink"><b><a href="#cite_ref-anandtech-lunveil_18-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.anandtech.com/show/8207/google-reveals-details-about-android-l-at-google-io">"Google Reveals Details About Android L at Google IO"</a>. <i>Anandtech</i><span class="reference-accessdate">. Retrieved <span class="nowrap">June 26,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Anandtech&rft.atitle=Google+Reveals+Details+About+Android+L+at+Google+IO&rft_id=http%3A%2F%2Fwww.anandtech.com%2Fshow%2F8207%2Fgoogle-reveals-details-about-android-l-at-google-io&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-codesign-cards-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-codesign-cards_19-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.fastcodesign.com/3032378/googles-new-improved-android-will-deliver-a-unified-design-language">"Google's New, Improved Android Will Deliver A Unified Design Language"</a>. <i>Co.Design</i>. June 25, 2014<span class="reference-accessdate">. Retrieved <span class="nowrap">June 26,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Co.Design&rft.atitle=Google%27s+New%2C+Improved+Android+Will+Deliver+A+Unified+Design+Language&rft.date=2014-06-25&rft_id=http%3A%2F%2Fwww.fastcodesign.com%2F3032378%2Fgoogles-new-improved-android-will-deliver-a-unified-design-language&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-verge-androidl-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-verge-androidl_20-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.theverge.com/2014/6/25/5841302/google-announces-the-next-android">"Google's next big Android redesign is coming in the fall"</a>. <i>The Verge</i>. Vox Media. June 25, 2014<span class="reference-accessdate">. Retrieved <span class="nowrap">June 26,</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Verge&rft.atitle=Google%27s+next+big+Android+redesign+is+coming+in+the+fall&rft.date=2014-06-25&rft_id=https%3A%2F%2Fwww.theverge.com%2F2014%2F6%2F25%2F5841302%2Fgoogle-announces-the-next-android&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation news cs1"><a rel="nofollow" class="external text" href="https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design">"Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System"</a>. <i>Windows Central</i><span class="reference-accessdate">. Retrieved <span class="nowrap">December 22,</span> 2017</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Windows+Central&rft.atitle=Microsoft+shows+off+%27Z-depth+layering%27+3D+feature+in+its+Fluent+Design+System&rft_id=https%3A%2F%2Fwww.windowscentral.com%2Fmicrosoft-shows-plans-z-depth-layering-wave-2-fluent-design&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.yellowslice.in/bed/neumorphism-ui-design-trend/">"How UI Design in 2022 will Highlight Neumorphism"</a>. <i>Better experience design - Blog</i>. January 20, 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">July 19,</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Better+experience+design+-+Blog&rft.atitle=How+UI+Design+in+2022+will+Highlight+Neumorphism&rft.date=2022-01-20&rft_id=http%3A%2F%2Fwww.yellowslice.in%2Fbed%2Fneumorphism-ui-design-trend%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-23"><span class="mw-cite-backlink"><b><a href="#cite_ref-23">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation news cs1"><a rel="nofollow" class="external text" href="http://www.vandelaydesign.com/why-the-flat-design-trend-is-hurting-usability/">"Why the Flat Design Trend is Hurting Usability"</a>. <i>Vandelay Design</i>. April 7, 2015<span class="reference-accessdate">. Retrieved <span class="nowrap">July 6,</span> 2017</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Vandelay+Design&rft.atitle=Why+the+Flat+Design+Trend+is+Hurting+Usability&rft.date=2015-04-07&rft_id=http%3A%2F%2Fwww.vandelaydesign.com%2Fwhy-the-flat-design-trend-is-hurting-usability%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-24"><span class="mw-cite-backlink"><b><a href="#cite_ref-24">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation news cs1"><a rel="nofollow" class="external text" href="https://www.fastcodesign.com/3058094/the-problem-with-flat-design-according-to-a-ux-expert">"The Problem With Flat Design, According To A UX Expert"</a>. <i>Co.Design</i>. March 23, 2016<span class="reference-accessdate">. Retrieved <span class="nowrap">July 6,</span> 2017</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Co.Design&rft.atitle=The+Problem+With+Flat+Design%2C+According+To+A+UX+Expert&rft.date=2016-03-23&rft_id=https%3A%2F%2Fwww.fastcodesign.com%2F3058094%2Fthe-problem-with-flat-design-according-to-a-ux-expert&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-25"><span class="mw-cite-backlink"><b><a href="#cite_ref-25">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.nngroup.com/articles/tablet-usability/">"Tablet Usability: Findings from User Research"</a>. <i>www.nngroup.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">July 6,</span> 2017</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=www.nngroup.com&rft.atitle=Tablet+Usability%3A+Findings+from+User+Research&rft_id=https%3A%2F%2Fwww.nngroup.com%2Farticles%2Ftablet-usability%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-26"><span class="mw-cite-backlink"><b><a href="#cite_ref-26">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/">"Flat UI Elements Attract Less Attention and Cause Uncertainty"</a>. <i>www.nngroup.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">May 8,</span> 2018</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=www.nngroup.com&rft.atitle=Flat+UI+Elements+Attract+Less+Attention+and+Cause+Uncertainty&rft_id=https%3A%2F%2Fwww.nngroup.com%2Farticles%2Fflat-ui-less-attention-cause-uncertainty%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> <li id="cite_note-27"><span class="mw-cite-backlink"><b><a href="#cite_ref-27">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://emergedigital.co/how-do-ui-designers-use-flat-design/">"How do UI designers use flat design?"</a>. <i>www.emergedigital.co</i><span class="reference-accessdate">. Retrieved <span class="nowrap">September 11,</span> 2024</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=www.emergedigital.co&rft.atitle=How+do+UI+designers+use+flat+design%3F&rft_id=https%3A%2F%2Femergedigital.co%2Fhow-do-ui-designers-use-flat-design%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AFlat+design" class="Z3988"></span></span> </li> </ol></div></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1&useformat=desktop" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Flat_design&oldid=1257654247">https://en.wikipedia.org/w/index.php?title=Flat_design&oldid=1257654247</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:Design_language" title="Category:Design language">Design language</a></li><li><a href="/wiki/Category:Graphical_user_interfaces" title="Category:Graphical user interfaces">Graphical user interfaces</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_is_different_from_Wikidata" title="Category:Short description is different from Wikidata">Short description is different from Wikidata</a></li><li><a href="/wiki/Category:Use_mdy_dates_from_June_2020" title="Category:Use mdy dates from June 2020">Use mdy dates from June 2020</a></li><li><a href="/wiki/Category:Articles_needing_additional_references_from_November_2024" title="Category:Articles needing additional references from November 2024">Articles needing additional references from November 2024</a></li><li><a href="/wiki/Category:All_articles_needing_additional_references" title="Category:All articles needing additional references">All articles needing additional references</a></li><li><a href="/wiki/Category:Articles_with_specifically_marked_weasel-worded_phrases_from_October_2020" title="Category:Articles with specifically marked weasel-worded phrases from October 2020">Articles with specifically marked weasel-worded phrases from October 2020</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 16 November 2024, at 01:02<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Flat_design&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.canary-67fc484f47-dcxdz","wgBackendResponseTime":162,"wgPageParseReport":{"limitreport":{"cputime":"0.326","walltime":"0.452","ppvisitednodes":{"value":1765,"limit":1000000},"postexpandincludesize":{"value":54675,"limit":2097152},"templateargumentsize":{"value":1494,"limit":2097152},"expansiondepth":{"value":12,"limit":100},"expensivefunctioncount":{"value":4,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":94574,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 407.027 1 -total"," 55.26% 224.903 1 Template:Reflist"," 44.81% 182.408 22 Template:Cite_web"," 16.26% 66.202 1 Template:More_citations_needed"," 15.56% 63.315 1 Template:Ambox"," 14.69% 59.806 1 Template:Short_description"," 9.14% 37.207 2 Template:Pagetype"," 4.39% 17.865 1 Template:Use_mdy_dates"," 4.27% 17.373 1 Template:By_whom"," 3.85% 15.680 5 Template:Cite_news"]},"scribunto":{"limitreport-timeusage":{"value":"0.196","limit":"10.000"},"limitreport-memusage":{"value":6314463,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-7678f45bf4-tnxqm","timestamp":"20241203075004","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Flat design","url":"https:\/\/en.wikipedia.org\/wiki\/Flat_design","sameAs":"http:\/\/www.wikidata.org\/entity\/Q15266360","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q15266360","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2013-12-02T09:13:57Z","dateModified":"2024-11-16T01:02:41Z","headline":"design style"}</script> </body> </html>