{"id":9342,"date":"2023-11-15T13:04:25","date_gmt":"2023-11-15T13:04:25","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=9342"},"modified":"2024-06-04T11:28:22","modified_gmt":"2024-06-04T11:28:22","slug":"flat-design-everything-about-it","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/flat-design-everything-about-it\/","title":{"rendered":"Flat Design 101: Everything you need to know"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Flat design is an ever-popular approach to digital design, favouring 2D elements and a modern, clutter-free aesthetic. Plenty of big brands use it, and there are many benefits of keeping things flat and simple.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But, at the same time, flat design can pose problems for usability. This raises the question: How can you use flat design without negatively impacting the user experience?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s a good question, and we\u2019ll seek to answer it right here in our ultimate guide to flat design. Keep reading to learn:<\/span><\/p>\n\n<p><span style=\"font-weight: 400;\">First things first: What is flat design? Let\u2019s find out.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">What is flat design and where does it come from?<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Flat design is a minimalistic, 2D approach to web design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Flat design is an approach to web and <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ui-design\/\"><span style=\"font-weight: 400;\">user interface (UI) design<\/span><\/a><span style=\"font-weight: 400;\"> that favours two-dimensional elements. It\u2019s all about simplicity, minimalism and, often, bright colours. While some design styles seek to mimic the real world with 3D elements, flat design is intentionally and decidedly, well, flat.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">A brief history of flat design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Flat design first came onto the digital scene in the early 2010s, but its origins can be traced back much further. Let\u2019s take a brief look at the history of flat design:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>The Swiss Design Movement of the 1940s and 50s. <\/b><span style=\"font-weight: 400;\">The Swiss Style (otherwise known as the International Typographic Style) is a minimalist design approach that was pioneered by influential Swiss graphic designers such as Ernst Keller, Armin Hofmann, and Josef M\u00fcller-Brockmann. Flat design as we know it today takes much of its influence from the clean minimalism of the Swiss Style.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>The rise of digital design and skeuomorphism in the 1990s and early 2000s. <\/b><span style=\"font-weight: 400;\">It\u2019s impossible to talk about flat design without mentioning skeuomorphism. As the digital revolution took hold, the early 1990s gave us the Internet and the late 1990s\/early 2000s brought us mobile technology such as smartphones and tablets. Skeuomorphism emerged as an approach to designing for digital interfaces, incorporating 3D elements to mimic the appearance of objects in the real world. Most early operating systems and software were designed in this style.\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>The launch of Microsoft\u2019s Windows 8 operating system, Apple\u2019s iOs 7, Google Material Design, and the rise of responsive design in the late 2010s. <\/b><span style=\"font-weight: 400;\">It\u2019s often said that flat design emerged as an antidote to skeuomorphism and all its 3D realism. Big names in tech, including Microsoft, Apple, and Google, started using flat design. And, with its simple, 2D elements, flat design proved easier to scale and shrink for different screen sizes\u2014the perfect solution to the ever-growing need for responsive design.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Flat design vs. skeuomorphism vs. Material Design: What\u2019s the difference?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To understand what flat design is, it\u2019s useful to talk about what it <\/span><i><span style=\"font-weight: 400;\">isn\u2019t<\/span><\/i><span style=\"font-weight: 400;\">\u2014and to consider how it compares to other design styles. On that note, let\u2019s explore the difference between flat design, skeuomorphism, and Material Design.<\/span><\/p>\n<p><b>Flat design<\/b><span style=\"font-weight: 400;\">, as we know, is all about 2D elements, clean lines, minimalism, and simplicity.\u00a0<\/span><\/p>\n<p><b>Skeuomorphism<\/b><span style=\"font-weight: 400;\">, on the other hand, seeks to mimic how objects appear in the real world. In skeuomorphic design, a digital representation of a calculator would include shadows and texture in order to realistically simulate a physical calculator. This is basically the opposite of flat design.\u00a0<\/span><\/p>\n<p><b>Material Design <\/b><span style=\"font-weight: 400;\">is Google\u2019s own design language. Released in 2014, you can think of it as the middle ground between skeuomorphism and flat design. It uses elements such as light, motion, and shadow to create something a little more real-world adjacent than flat design, without going as far as the elaborate 3D designs of skeuomorphism. You can learn more about <\/span><a href=\"https:\/\/m3.material.io\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Google\u2019s Material Design here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">What are the key characteristics and principles of flat design?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can recognise flat design for its:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">2D elements and simple shapes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bright, high-contrast colours<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Simplicity and lack of depth\u2014flat design doesn\u2019t use shadows, gradients, texture, bevels, or embossing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Simple typography, usually sans-serif fonts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ample use of whitespace<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Symmetrical, grid-based layouts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Overall clean and modern aesthetic<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">The pros and cons of flat design\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now we know what flat design is, let\u2019s weigh up the pros and cons. <\/span><\/p>\n<h3><span style=\"font-weight: 400;\">The benefits of flat design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are several advantages of embracing flat design when creating digital products:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Flat design is responsive. <\/b><span style=\"font-weight: 400;\">Flat design follows a grid-based layout, meaning that it\u2019s inherently responsive. With more and more designers taking a mobile-first approach\u2014that is, designing websites and digital products for mobile first and then scaling up for desktop\u2014flat design can make the job easier.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Flat design often improves readability and accessibility. <\/b><span style=\"font-weight: 400;\">Flat design focuses on simple 2D elements, ample white space, simple typography, and an overall clutter-free aesthetic. This helps to create a highly readable, easily digestible, and often more accessible design.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Flat design looks great. <\/b><span style=\"font-weight: 400;\">This is one of the major reasons why flat design is so popular. Many brands (and their users) love the sleek, modern, and clean aesthetic that flat design creates.\u00a0<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">The drawbacks and criticisms of flat design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are two main concerns associated with flat design: <\/span><b>usability <\/b><span style=\"font-weight: 400;\">and <\/span><b>low information density<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><b>The biggest issue with flat design is how it impacts the usability of an interface.<\/b><span style=\"font-weight: 400;\"> When all elements on the page appear completely flat, how do users know which elements are interactive?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As users, we\u2019re accustomed to recognising interactive elements through visual cues\u2014for example, clickable buttons might appear to be raised, or form fields may stand out as such because subtle shadowing gives them depth.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In flat design, these visual cues are missing. That can make it difficult for the user to distinguish between interactive and non-interactive elements. This, in turn, makes it difficult to complete their desired tasks and actions.\u00a0<\/span><\/p>\n<p><b>The second issue with flat design is low information density. <\/b><span style=\"font-weight: 400;\">Information density refers to the amount of information (usually text) presented on a screen or webpage. Flat design is all about minimalism and keeping things clutter-free, so it naturally favours low information density.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While this may be great for aesthetics, it isn\u2019t necessarily the most helpful approach in terms of giving the user the information they need. Imagine you\u2019re browsing through an online health shop and all you see is images of supplements, without any information regarding price, ingredients, recommended dosage, and purported health benefits?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The website may be aesthetically pleasing in its simplicity, but the process of actually choosing and buying supplements without the key information readily available could be pretty frustrating.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Using flat design therefore calls for a balancing act. You want to draw on the benefits of its simplicity without affecting usability or compromising the user experience. Cue flat design 2.0!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">What is flat design 2.0?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Flat design 2.0, or semi-flat design, is the next generation of flat design. It adheres to most of the key principles of fully flat design\u2014ample whitespace, high-contrast colours, simple typography\u2014with the addition of subtle shadows, highlights, and layers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This not-entirely-flat approach adds a touch of depth to the interface, helping to overcome some of the usability issues associated with fully flat design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Not only does flat design 2.0 ensure a more user-friendly experience. It also gives designers a little more creative freedom, removing some of the limitations of flat design. If it\u2019s a simple, clean aesthetic <\/span><i><span style=\"font-weight: 400;\">and <\/span><\/i><span style=\"font-weight: 400;\">a first-class user experience you\u2019re after, flat design 2.0 is probably the perfect middle ground.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Flat design examples: Dropbox, Miro, and OptimalWorkshop<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now you\u2019re familiar with flat design, you can probably already think of some examples you\u2019ve encountered in the real world. Let\u2019s take a look at some brands that embrace flat design (and flat design 2.0) to create successful digital products.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Flat design example #1: Dropbox<\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9425 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.31.43.png\" alt=\"dropbox sample\" width=\"1036\" height=\"990\" title=\"\"><\/p>\n<p><a href=\"https:\/\/www.dropbox.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Dropbox<\/span><\/a><span style=\"font-weight: 400;\"> has become something of a poster child for flat design. It\u2019s the epitome of clean, clutter-free UI, easy-to-read type, and fuss-free iconography.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note how the Dropbox website also incorporates some elements of flat design 2.0 to ensure a user-friendly and informative experience. It\u2019s still clear which buttons are clickable, and they\u2019ve gone for medium information density so the user can learn about the product and its most useful features. A highly successful approach to flat design!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Flat design example #2: Miro<\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9429 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.33.11.png\" alt=\"miro sample\" width=\"972\" height=\"912\" title=\"\"><\/p>\n<p><a href=\"https:\/\/miro.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Miro<\/span><\/a><span style=\"font-weight: 400;\"> is another great example of flat design in action. This much-loved virtual whiteboard and collaboration tool is a masterclass in the power of generous whitespace, bright, high-contrast colours, and simple yet compelling visuals.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While adhering to the main principles of flat design, Miro still manages to create a playful interface that\u2019s full of brand personality. And, similar to Dropbox, they\u2019ve not used flat design to the detriment of usability or user experience. The user finds all the information they need on the website, presented in concise sentences and bitesize chunks. The perfect balance!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Flat design example #3: OptimalWorkshop<\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9428 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.33.52.png\" alt=\"optimal workshop\" width=\"636\" height=\"806\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019re likely already familiar with <\/span><a href=\"https:\/\/www.optimalworkshop.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">OptimalWorkshop<\/span><\/a><span style=\"font-weight: 400;\">, one of <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ux-research-tools\/\"><span style=\"font-weight: 400;\">the best UX research tools<\/span><\/a><span style=\"font-weight: 400;\"> on the market. The OptimalWorkshop website is also one of the best examples of flat design we\u2019ve come across.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">OptimalWorkshop ticks all of the usual flat design boxes. But, beyond that, it serves as an excellent reminder that flat design doesn\u2019t have to be boring or overly professional. With the addition of custom icons and cute illustrations, they\u2019ve designed a website that\u2019s both simple and highly engaging. A fun, unique take on the flat design trend!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How to use flat design: 7 Actionable tips and best practices<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019re a fan of the fuss-free aesthetic and want to use flat design for your next project, here are some tips and best practices to get you started.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Use sans-serif fonts<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Sans-serif fonts are all those fonts you associate with a modern, minimal aesthetic.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Serifs are the small lines attached to the letters, as you see in serif fonts such as Times New Roman, Garamond, and Baskerville. As the name suggests, sans-serif fonts don\u2019t have them!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Popular sans-serif fonts ideal for flat design include Arial, Helvetica, and Roboto.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9427\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.34.41.png\" alt=\"font options\" width=\"633\" height=\"217\" title=\"\"><\/p>\n<h3><span style=\"font-weight: 400;\">2. Use bright colours and high contrast\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Flat design favours a minimalist approach, and so colour is your opportunity to inject some visual appeal and grab the user\u2019s interest. Not only that: bright, vibrant colours help to create contrast and establish visual hierarchy, enabling the viewer to distinguish between different elements on the page.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As you\u2019ll have seen in our flat design examples, bright, high-contrast colours are a key feature throughout the flat design trend.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Incorporate plenty of whitespace\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Whitespace is a must if you want to successfully achieve the clean, clutter-free aesthetic that flat design is renowned for.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whitespace, or negative space, refers to the empty space or \u2018breathing room\u2019 around and between different elements on the page. It helps to improve the overall readability of the page, and can also draw attention to individual elements by making them appear to stand out.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And remember that whitespace doesn\u2019t have to be white! See this vibrant yellow used on the <\/span><a href=\"https:\/\/www.butter.us\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Butter<\/span><\/a><span style=\"font-weight: 400;\"> website? That still counts as negative space, and has the same effect.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9426 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.35.27.png\" alt=\"butter sample\" width=\"1032\" height=\"334\" title=\"\"><\/p>\n<h3><span style=\"font-weight: 400;\">4. Provide visual cues for interactive elements\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Earlier in this post, we talked about how flat design and its lack of depth can make it difficult for users to recognise interactive elements. You don\u2019t want to compromise usability in the name of aesthetics, so make sure you provide sufficient visual cues for the user.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might add some subtle drop shadows to buttons and form fields (in the style of flat design 2.0), or emphasise interactivity through underlined call-to-action text\u2014for example, \u201cSign up here\u201d clearly indicates that a button is clickable.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">5. Aim for medium density of information<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Another potential issue with flat design is that it limits the amount of information you can share with your users. While it\u2019s important to avoid information overload\u2014no one likes a text-heavy app or website\u2014you also want to avoid information <\/span><i><span style=\"font-weight: 400;\">underload<\/span><\/i><span style=\"font-weight: 400;\">. That is, not providing your users with enough information simply to maintain a clean, clutter-free aesthetic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Refer back to our previous examples of great flat design as demonstrated by Dropbox, Miro, and OptimalWorkshop. They all go for medium density of information; not too little, but not too much. Aim to strike the same balance.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">6. Don\u2019t be afraid to inject some brand personality\u2014flat design doesn\u2019t have to be boring!<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Flat design is simple and minimalistic, but that doesn\u2019t have to mean monotonous, uninspiring, or bland.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Don\u2019t be afraid to inject some personality into your flat design. Consider designing some custom icons (following <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/7-principles-of-icon-design\/\"><span style=\"font-weight: 400;\">the key principles of icon design<\/span><\/a><span style=\"font-weight: 400;\"> in the process), featuring some playful illustrations, or adding some subtle animations.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A few small touches of personality will help to keep the user engaged, infuse some delight into the user experience, and create a memorable brand identity.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">7. Err on the side of flat design 2.0\u2014usability comes first\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Last but not least, use flat design with caution. If ever you feel that your quest for sleek, clean aesthetics is starting to come at the cost of usability, it\u2019s time to rethink. If in doubt, err on the side of flat design 2.0 for the best of both worlds.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Follow these tips and best practices and you can successfully embrace flat design without compromising the user experience. And, if you\u2019d like to learn more about what it takes to create awesome digital products, check out these guides:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/10-user-interface-guidelines\/\"><span style=\"font-weight: 400;\">10 Essential User Interface (UI) Guidelines All Designers Should Follow<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/good-ui-design-9-examples\/\"><span style=\"font-weight: 400;\">What Does Good UI Design Look Like? 9 Examples to Delight and Inspire You<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-feedback-in-product-design\/\"><span style=\"font-weight: 400;\">How to Incorporate User Feedback in Product Design (And Why it Matters)<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Flat design embraces simplicity and minimalism\u2014but do the beautiful aesthetics of flat design come at the cost of usability? Here\u2019s everything you need to know about this popular design trend.<\/p>\n","protected":false},"author":22,"featured_media":10456,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-9342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/9342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=9342"}],"version-history":[{"count":9,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/9342\/revisions"}],"predecessor-version":[{"id":9503,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/9342\/revisions\/9503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/10456"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=9342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=9342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=9342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}