{"id":12789,"date":"2016-03-01T20:35:25","date_gmt":"2016-03-02T04:35:25","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=12789"},"modified":"2026-03-09T19:59:46","modified_gmt":"2026-03-10T02:59:46","slug":"the-7-minute-guide-to-flat-design-2-0","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/","title":{"rendered":"The 7-Minute Guide to Flat Design 2.0"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Flat design is more than a passing trend. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The aesthetic will continue to evolve and is sticking around thanks to its roots in design theory (minimalism, Swiss, clean typography, etc.).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But what constitutes flat design? This trend can be \u00a0characterized by five elements:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">No added effects such as drop shadows, embossing or gradients<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Focus on great, and simple typography (particularly sans serifs)<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Use of simple elements and iconography<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Bold color palettes with more and brighter hues than we were used to<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Design with an overall minimalist approach with as few elements as possible<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">While flat design is still tied to these concepts, the \u201crules\u201d are a lot looser today. And the trend is evolving. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">As we dive headlong into 2016, here is how you can keep up with the ever-changing trend as flat design continues to morph into something new.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The New Flat Design: Flat 2.0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A long history of flat evolution brings us nowadays to Flat 2.0. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">As we said in the free e-book <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/flat-design-trends-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Flat Design Trends 2016<\/span><\/a><span style=\"font-weight: 400;\">, this style is a compromise between the origins of flat design, hints of skeuomorphism, material design and usability. (It really is a bit of everything.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s no defining characteristic to Flat 2.0, other than it \u201cseems flat, but isn\u2019t quite completely flat.\u201d This is the realm where most of flat design seems to live. The best parts of flat design are mixed with elements that enhance usability. (Right now that movement is shifting toward layering and 3D styling.)<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12798\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/Screen-Shot-2016-03-01-at-8.26.52-PM-1024x525.png\" alt=\"Screen Shot 2016-03-01 at 8.26.52 PM\" width=\"719\" height=\"369\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/Screen-Shot-2016-03-01-at-8.26.52-PM-1024x525.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/Screen-Shot-2016-03-01-at-8.26.52-PM-585x300.png 585w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/Screen-Shot-2016-03-01-at-8.26.52-PM.png 1426w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/p>\n<p><em>Photo credit: <a href=\"http:\/\/adidas.co.uk\/ace_16\" target=\"_blank\" rel=\"noopener noreferrer\">Adidas<\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">Designers employ a few common effects to achieve that somewhat-Flat-2.0 look. Here\u2019s what they are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Raised or sunken elements to make it easier to see what actions a user is supposed to take. The three-dimensional effect helps users engage with an action, such as a click or tap.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Animated elements help guide users to actionable elements. The trick with this technique is that animations are subtle and don\u2019t get in the way of the design.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Elements that appear to act within the laws of physics or act realistically, such as those outlined by the principles of Material Design, create a \u201clife-like\u201d experience. When things on the screen act in the same manner as physical things, users have no trouble using or understanding them.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Particularly for e-commerce, 360-degree animation or rotation is a popular tool. This gives users the ability to see an item (or product) in a very real way.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Big, bold and oversized everything from type to imagery helps create a bold first impression, drawing users at a glance. Oversized elements are highly usable as well, particularly on smaller screens because you don\u2019t have to worry about the \u201cfat fingers\u201d effect.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12794\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image02.jpg\" alt=\"image02\" width=\"719\" height=\"445\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image02.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image02-485x300.jpg 485w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image02-290x180.jpg 290w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Photo credit:<\/span><\/i><a href=\"https:\/\/moteurdereussites.withgoogle.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> <i><span style=\"font-weight: 400;\">Moteur de Reussites<\/span><\/i><\/a><\/p>\n<p><span style=\"font-weight: 400;\">It only makes sense to feature a\u00a0<\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Google_Labs\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Google Labs<\/span><\/a><span style=\"font-weight: 400;\"> example when thinking about Flat 2.0.<\/span><a href=\"https:\/\/moteurdereussites.withgoogle.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> <span style=\"font-weight: 400;\">Moteur de Reussites<\/span><\/a><span style=\"font-weight: 400;\"> has an aesthetic that is very much material design in scope, but is also identifiable with Flat 2.0. That\u2019s the trick to this evolution: Flat takes on a bit of everything, thanks to its classically-rooted principles.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12792\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image00.jpg\" alt=\"image00\" width=\"720\" height=\"444\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image00.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image00-486x300.jpg 486w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image00-290x180.jpg 290w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This<\/span><a href=\"http:\/\/parcourscanada.com\/\"> <span style=\"font-weight: 400;\">Canadian tourism site<\/span><\/a><span style=\"font-weight: 400;\"> uses plenty of flat concepts as well. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bright pops of color, simple layers, geometric shapes and brilliant typography pull it all together. The site is usable and aesthetically pleasing. Flat 2.0 elements help the user focus on calls to action, buttons and next steps in the navigation. The design effect creates a \u201cmini-tour\u201d with layers of elements that encourage the user to want to visit.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Useful Resources<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To help you get started on this trend that\u2019s as beautiful as it is practice, here are 10 additional resources: <\/span><\/p>\n<p><span style=\"font-weight: 400;\">1.\u00a0<a href=\"http:\/\/crtv.mk\/d0NK3\" target=\"_blank\" rel=\"noopener noreferrer\">Circle icons:<\/a><\/span><span style=\"font-weight: 400;\"> Ghost button styles in circular shapes ($3)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">2.\u00a0<a href=\"https:\/\/lukyvj.github.io\/colofilter.css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Colofilter.css:<\/a><\/span><span style=\"font-weight: 400;\"> Create a duotone effect<\/span><\/p>\n<p><span style=\"font-weight: 400;\">3.\u00a0<a href=\"https:\/\/flatcolors.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flat Colors:<\/a><\/span> <span style=\"font-weight: 400;\">More than 11,000 colors and 2,000 palettes<\/span><\/p>\n<p><span style=\"font-weight: 400;\">4.\u00a0<a href=\"https:\/\/www.underconsideration.com\/brandnew\/archives\/column\/noted\/#.Vpz9t_F8XGc\" target=\"_blank\" rel=\"noopener noreferrer\">Brand New:<\/a><\/span> <span style=\"font-weight: 400;\">Take a look at the gallery of brand logo changes and note the dominance of flat<\/span><\/p>\n<p><span style=\"font-weight: 400;\">5.\u00a0<a href=\"http:\/\/crtv.mk\/z1lo\" target=\"_blank\" rel=\"noopener noreferrer\">Long Shadow Graphic Styles:<\/a><\/span><span style=\"font-weight: 400;\"> Illustrator library to help you create the perfect exaggerated shadow ($5)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">6.\u00a0<a href=\"https:\/\/www.google.com\/design\/spec\/material-design\/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">Google Material Design:<\/a><\/span> <span style=\"font-weight: 400;\">Full documentation on Google\u2019s design language, which is constantly evolving<\/span><\/p>\n<p><span style=\"font-weight: 400;\">7.\u00a0<a href=\"http:\/\/www.hypefortype.com\/blog\/2016\/01\/top-10-fonts-of-2015\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hype for Type Top 10 Fonts of 2015:<\/a><\/span><span style=\"font-weight: 400;\"> Inspiration for new flat pairings<\/span><\/p>\n<p><span style=\"font-weight: 400;\">8.\u00a0<a href=\"https:\/\/css3buttongenerator.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Button Generator:<\/a><\/span> <span style=\"font-weight: 400;\">Make ghost (or colored) buttons with CSS<\/span><\/p>\n<p><span style=\"font-weight: 400;\">9.\u00a0<a href=\"https:\/\/tympanus.net\/Development\/IconHoverEffects\/\" target=\"_blank\" rel=\"noopener noreferrer\">Icon Hover Effects:<\/a><\/span> <span style=\"font-weight: 400;\">Simple animation styles and code for icons<\/span><\/p>\n<p><span style=\"font-weight: 400;\">10.\u00a0<a href=\"https:\/\/www.flaticon.com\/packs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flat Icons:<\/a><\/span> <span style=\"font-weight: 400;\">1,303 SVG icon packs in flat styles<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Takeaways<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">So where do we go from here? What lessons have we learned?<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Flat design is not going anywhere anytime soon.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Flat design is so connected to design theory that it will continue to grow and evolve.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Flat design is a highly visual and usable technique that can work for varying site types.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">One thing is certain: it\u2019s not too late to start thinking about a flat aesthetic. More and more companies \u2014 from big to small \u2014 have all gone flat. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">With that, we\u2019ll see others follow suit. Because it is rooted in elements of simplicity, flat design can be integrated into projects using other trends and techniques so that every project looks custom and original. Pair flat with almost any other trend and the result is a modern, fresh look.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each designer can manipulate the style in any way. That\u2019s because there\u2019s no perfect model of what constitutes a \u201cflat design.\u201d <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you found this article useful, check out the free guide <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/flat-design-trends-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Flat Design Trends 2016<\/span><\/a><span style=\"font-weight: 400;\"> below. We deconstruct over 20 examples to explain useful flat-inspired UI techniques.<\/span><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/flat-design-trends-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12793\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image01.png\" alt=\"image01\" width=\"720\" height=\"377\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image01.png 940w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image01-573x300.png 573w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Know the defining UI techniques for flat design evolved. <\/p>\n","protected":false},"author":9,"featured_media":12799,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6],"tags":[],"class_list":["post-12789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-ux-design"],"yoast_title":"","yoast_metadesc":"Know the defining UI techniques for flat design evolved.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The 7-Minute Guide to Flat Design 2.0 | UXPin<\/title>\n<meta name=\"description\" content=\"Know the defining UI techniques for flat design evolved.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The 7-Minute Guide to Flat Design 2.0\" \/>\n<meta property=\"og:description\" content=\"Know the defining UI techniques for flat design evolved.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-02T04:35:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T02:59:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/56c4a895ac1a0.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"The 7-Minute Guide to Flat Design 2.0\",\"datePublished\":\"2016-03-02T04:35:25+00:00\",\"dateModified\":\"2026-03-10T02:59:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/\"},\"wordCount\":882,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/56c4a895ac1a0.jpg\",\"articleSection\":[\"Blog\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/\",\"name\":\"The 7-Minute Guide to Flat Design 2.0 | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/56c4a895ac1a0.jpg\",\"datePublished\":\"2016-03-02T04:35:25+00:00\",\"dateModified\":\"2026-03-10T02:59:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Know the defining UI techniques for flat design evolved.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/56c4a895ac1a0.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/56c4a895ac1a0.jpg\",\"width\":700,\"height\":500,\"caption\":\"56c4a895ac1a0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/the-7-minute-guide-to-flat-design-2-0\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The 7-Minute Guide to Flat Design 2.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The 7-Minute Guide to Flat Design 2.0 | UXPin","description":"Know the defining UI techniques for flat design evolved.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/","og_locale":"en_US","og_type":"article","og_title":"The 7-Minute Guide to Flat Design 2.0","og_description":"Know the defining UI techniques for flat design evolved.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/","og_site_name":"Studio by UXPin","article_published_time":"2016-03-02T04:35:25+00:00","article_modified_time":"2026-03-10T02:59:46+00:00","og_image":[{"width":700,"height":500,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/56c4a895ac1a0.jpg","type":"image\/jpeg"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"The 7-Minute Guide to Flat Design 2.0","datePublished":"2016-03-02T04:35:25+00:00","dateModified":"2026-03-10T02:59:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/"},"wordCount":882,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/56c4a895ac1a0.jpg","articleSection":["Blog","UI Design","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/","name":"The 7-Minute Guide to Flat Design 2.0 | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/56c4a895ac1a0.jpg","datePublished":"2016-03-02T04:35:25+00:00","dateModified":"2026-03-10T02:59:46+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Know the defining UI techniques for flat design evolved.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/56c4a895ac1a0.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/56c4a895ac1a0.jpg","width":700,"height":500,"caption":"56c4a895ac1a0"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/the-7-minute-guide-to-flat-design-2-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The 7-Minute Guide to Flat Design 2.0"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=12789"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12789\/revisions"}],"predecessor-version":[{"id":58463,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12789\/revisions\/58463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/12799"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=12789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=12789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=12789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}