{"id":8688,"date":"2015-02-23T11:00:53","date_gmt":"2015-02-23T17:00:53","guid":{"rendered":"https:\/\/getflywheel.com\/?p=8688"},"modified":"2023-04-11T15:27:39","modified_gmt":"2023-04-11T20:27:39","slug":"shouldnt-use-flat-design","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/","title":{"rendered":"Why You Shouldn&#8217;t Use Flat Design"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Flat design seems to be all the rage in the design world these days. It\u2019s clean, so perfectly simple, and has a tendency to make use of <a href=\"http:\/\/www.flatuicolorpicker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">bright, life-changing colors<\/a> you never even knew existed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019ve seen some of the <a href=\"http:\/\/www.awwwards.com\/websites\/flat-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">awesome sites inspired by flat design<\/a>, it won\u2019t be long before you\u2019re dying to try it out yourself. But before you flatten every design you\u2019ve ever created, here\u2019s a few things you should consider.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Just Because it\u2019s Simple Doesn\u2019t Mean it Makes Sense<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As a designer or developer, you\u2019re familiar with buttons, text fields, how elements are laid out on a page and how they can be expected to work. You don\u2019t really have to question anything; it just comes naturally to you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Flat design aims to simplify these elements as much as possible. That means removing drop shadows, using solid colors instead of gradients, and using super minimal icons. For you, that\u2019s not a problem. You have enough knowledge to infer how things work and then appreciate the simplicity; that\u2019s why flat design appeals so much to us as designers.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/02\/flatdesign1.png\" alt=\"An example of a flat button vs a dynamic button\" class=\"wp-image-8689\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">But for your users, that simplistic design might actually be extremely confusing. Some people need design clues like drop shadows to know when something can be clicked, when something can be typed into, and generally how to navigate web pages. If you take away those clues, some users might get lost on your page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>So on That Note, Flat Design Isn\u2019t for Everyone<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You know your users best, so it\u2019s up to you to decide if they can handle the abstraction that comes with flat design. Are they tech-savvy enough not to get frustrated by it? Or will they be staring at the screen questioning everything they believe about the Internet?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just because your site looks like a masterpiece doesn\u2019t mean it actually is one. If the usability sucks for your targeted audience, they won\u2019t care how pretty your site is. They\u2019ll just be annoyed by it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every website you create should be usable by the intended users, <i>not<\/i> just you as the designer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Sometimes, Flat Design Just Isn\u2019t <i>Realistic<\/i><\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, all puns aside, sometimes flat design just isn\u2019t practical for what you need to do. If your icons, design, or page as a whole are really complex, transforming them to flat designs might be terribly difficult to execute well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember those users we were talking about earlier? Try your best to step into their shoes and think about how they\u2019ll perceive your design. If you truly think the design is easy to understand, then I\u2019ll give you the green light. But if flat design is going to make your icons and ideas<i> over-simplified<\/i>, don\u2019t do it. Stop while you\u2019re ahead, and try a different technique instead.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019m not saying flat design is <i>always<\/i> impractical. There are plenty of cases where it works really well (see above link of awesome sites). Just don\u2019t rush into using it just because it\u2019s the cool trend right now.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flat design seems to be all the rage in the design world these days. It\u2019s clean, so perfectly simple, and has a tendency to make use of bright, life-changing colors you never even knew existed. Once you\u2019ve seen some of the awesome sites inspired by flat design, it won\u2019t be long before you\u2019re dying to<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","resource-topic":[1396],"resource-role":[1397],"resource-type":[916],"class_list":["post-8688","resource","type-resource","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why You Shouldn&#039;t Use Flat Design<\/title>\n<meta name=\"description\" content=\"Thought flat design might seem simple to execute it isn&#039;t as dynamic as you want for your site. Here&#039;s why you should stay away from it.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why You Shouldn&#039;t Use Flat Design\" \/>\n<meta property=\"og:description\" content=\"Thought flat design might seem simple to execute it isn&#039;t as dynamic as you want for your site. Here&#039;s why you should stay away from it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-11T20:27:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/02\/flatdesign1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/\",\"name\":\"Why You Shouldn't Use Flat Design\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2015-02-23T17:00:53+00:00\",\"dateModified\":\"2023-04-11T20:27:39+00:00\",\"description\":\"Thought flat design might seem simple to execute it isn't as dynamic as you want for your site. Here's why you should stay away from it.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Why You Shouldn&#8217;t Use Flat Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why You Shouldn't Use Flat Design","description":"Thought flat design might seem simple to execute it isn't as dynamic as you want for your site. Here's why you should stay away from it.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Why You Shouldn't Use Flat Design","og_description":"Thought flat design might seem simple to execute it isn't as dynamic as you want for your site. Here's why you should stay away from it.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-11T20:27:39+00:00","og_image":[{"url":"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/02\/flatdesign1.png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/","name":"Why You Shouldn't Use Flat Design","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2015-02-23T17:00:53+00:00","dateModified":"2023-04-11T20:27:39+00:00","description":"Thought flat design might seem simple to execute it isn't as dynamic as you want for your site. Here's why you should stay away from it.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/shouldnt-use-flat-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Why You Shouldn&#8217;t Use Flat Design"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/themes\/wpengine-breakthrough\/images\/fallback\/default-grid-resource.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/8688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=8688"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=8688"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=8688"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=8688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}