{"id":7181,"date":"2016-06-23T09:52:26","date_gmt":"2016-06-23T09:52:26","guid":{"rendered":"https:\/\/www.designmantic.com\/blog\/?p=7181"},"modified":"2024-03-21T06:32:02","modified_gmt":"2024-03-21T06:32:02","slug":"material-design-goes-beyond-flat-design","status":"publish","type":"post","link":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/","title":{"rendered":"Material Design &#8211; Going where Flat Design Hasn\u2019t Gone Before!"},"content":{"rendered":"<p>The laws of physics don\u2019t apply  to the digital realm. That is why most web designs are flat or devoid of any physical  aspects that would show us what they really are \u2013 mere illustrations.<\/p>\n<p>To make users more attuned to the  physical realm, and to help designers <a href=\"https:\/\/www.designmantic.com\/blog\/symmetry-in-design-with-perfect-balance\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>design with perfect balance<\/strong><\/a>, Material Design was  created. Material Design is very much similar to flat, but for a subtle  difference.&nbsp; What\u2019s the difference and how  does it make up for the lack that flat design offers? That\u2019s what we are about  to find out.<\/p>\n<div style=\"margin-top:40px; margin-bottom:40px;\" align=\"center\"><a href=\"https:\/\/www.designmantic.com\/logos\/search?utm_source=material-design-goes-beyond-flat-design&amp;utm_medium=topbutton&amp;utm_campaign=ctatracking\" target=\"_blank\" class=\"cta-button\" rel=\"noopener noreferrer\">Free Logo Maker<\/a><\/div>\n<h2>What Is Material Design Anyway?<\/h2>\n<p>Material Design is a design  language developed by Google with the purpose is to create a perceptiveness of  physical objects in the digital world. Unlike flat design, which has been  stripped of three dimensional elements, Material Design adds a little more  skeumorphism back into flat design. Think of a design comprised of a couple of  two dimensional planes that are floating above each other at varying levels.<\/p>\n<p align=\"center\"><iframe src=\"https:\/\/giphy.com\/embed\/xThuWt89yRv9xkJyco\" class=\"giphy-embed\" allowfullscreen=\"\" width=\"480\" height=\"480\" frameborder=\"0\"><\/iframe><br \/>\nUI elements stacked behind one another in Material Design<\/p>\n<p>In other words, it renders all of  the buttons and windows behind a screen as pieces of cardstock. All this does  is make each piece catch light and cast a shadow in 3D simulated space where a  user\u2019s fingers meet a screen. However, unlike paper, Google\u2019s innovation can  split in two, ripples with color and animation.<\/p>\n<p align=\"center\"><iframe src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/xKvQO9Oo4i2Zlb\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen=\"\" width=\"595\" height=\"485\" frameborder=\"0\"> <\/iframe><\/p>\n<p>The primary aim of Material  Design is to add an intuitive feeling of physical objects in the digital  environments. However, it is less bound to visual cues and lean more towards  how different elements of a web or app design would behave. <a href=\"https:\/\/ux4sight.com\/application-design\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"broken_link\">Elevate design of your application<\/a> with the principles of Material Design, bringing a seamless blend of functionality and aesthetics to your digital products.<\/p>\n<p>In order to get a better idea of  this concept, here are some examples of web designs that incorporate Material  Design UI brilliantly. &nbsp;<\/p>\n<h3>Nexpic.co<\/h3>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Nexpic.co_.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Nexpic.co_.jpg\" alt=\"Nexpic.co\" class=\"alignnone wp-image-7183\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Nexpic.co_.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Nexpic.co_-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Nexpic.co_-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nNexpic.co is a web application that enables users to share things they care about.<\/p>\n<h3>Android<\/h3>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Android.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Android.jpg\" alt=\"Android\" class=\"alignnone wp-image-7184\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Android.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Android-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Android-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nGoogle applied its new UI on <a href=\"https:\/\/www.android.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Android<\/a> Website.<\/p>\n<h3 style=\"background:#f2f2f2;padding:5px;\">Related: <strong><a target=\"_blank\" href=\"https:\/\/www.designmantic.com\/blog\/15-logo-moments-from-2015\/\" rel=\"noopener noreferrer\">Learn about other Extraordinary Logo Moments<\/a><\/strong><\/h3>\n<h2>What Is Flat Design?<\/h2>\n<p>In order to understand how Material Design makes up for the limitations of flat design, we must understand what flat design is. As the term implies, any element of a flat design looks like it is lying flat on a surface. Basically, any design that has been stripped of all any three dimensional elements is considered flat.<\/p>\n<p>Here are a few examples of flat web designs:<\/p>\n<h3>Hell\u2019O Baby<\/h3>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Hell\u2019O-Baby.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Hell\u2019O-Baby.jpg\" alt=\"Hell\u2019O Baby\" class=\"alignnone wp-image-7185\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Hell\u2019O-Baby.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Hell\u2019O-Baby-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Hell\u2019O-Baby-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nThe oversimplified icons, choice of colors and rounded edges are all elements of a classic flat design on <a href=\"http:\/\/hello.babyalbum.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Hell\u2019O Baby<\/a> website.<\/p>\n<h3>Intercom<\/h3>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Intercom.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Intercom.jpg\" alt=\"Intercom\" class=\"alignnone wp-image-7186\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Intercom.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Intercom-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Intercom-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nThe unobtrusive typography and stylistic icons make <a href=\"https:\/\/www.intercom.com\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Intercom\u2019s<\/a> website a great example of flat design<\/p>\n<h2>Why Material Design Comes Out On Top?<\/h2>\n<p>How does Material Design make up for what is lacking in flat design? If the details mentioned above are considered, it is pretty obvious that Material Design has a far more enhanced UI as compared to its flatter counterparts. There are three aspects in which Material Design trumps flat design \u2013<\/p>\n<h3>\u2022 Optimization Across Multiple Platforms<\/h3>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Windows-8.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Windows-8.jpg\" alt=\"Windows 8\" class=\"alignnone wp-image-7187\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Windows-8.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Windows-8-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Windows-8-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nImage: <a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2012\/02\/29\/introducing-windows-8-consumer-preview\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\" class=\"broken_link\">Windows Blog<\/a><\/p>\n<p align=\"center\">Windows 8 was designed indicative of flat design<\/p>\n<p>Flat design is only meant for users who are attuned to digital interactions. Its main purpose is to use simple buttons, icons and color schemes to make it more efficient for users to find what they are looking for. And it does away with any sense of three dimensionality.<\/p>\n<p>Material Design, on the other  hand, encourages a <strong>reactive response<\/strong> from a user and therefore brings the design closer to its ability to connect.<\/p>\n<p>Why  is this important? Keep in mind, Google launched Material Design to solve its  user experience problems. Before its transition from flat design, there was no  practical way for users to keep up with a torrent of Google launches from  Google Docs to Gmail and Google Drive. Android\u2019s VP of design Matias Duarte  sums the dilemma, <em>\u201cWe had all these  different screens sizes and platforms being considered <\/em><em>separately. Web and mobile teams were optimizing  for their one particular problems. But no one ever looked at the user journey,  and how much burden they were creating.\u201d<\/em><\/p>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Docs.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Docs.jpg\" alt=\"Google Docs\" class=\"alignnone wp-image-7188\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Docs.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Docs-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Docs-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nImage: <a href=\"https:\/\/img.purch.com\/o\/aHR0cDovL3d3dy5sYXB0b3BtYWcuY29tL2ltYWdlcy93cC9wdXJjaC1hcGkvaW5jb250ZW50LzIwMTQvMDQvMTM5ODg3ODEwNS5qcGc=\" rel=\"nofollow noopener noreferrer\" target=\"_blank\" class=\"broken_link\">Laptop Mag<\/a><\/p>\n<p align=\"center\">Google Docs redesigned as a Material Design<\/p>\n<p>By launching Material Design,  Google found a way to solve this problem. How? By unifying all of its products  into one platform through Material Design.<\/p>\n<h3>\u2022 Clickability<\/h3>\n<p>The main problem with a design  that is completely flat, is that it makes it harder for users to find clickable  elements. Clickability wasn\u2019t a problem before flat took over and designers  used visual cues like gradients, raised edges or textures to indicate buttons  that can be clicked. By transitioning to flat, web designers had to come up  with the same solution. However, they were limited to use shapes, colors,  contextual elements and proximity to do it.<\/p>\n<p>Take  a look at this flat design. Can you recognize which parts are clickable? Chances  are you can\u2019t, at least not without pointing the cursor at specific spots.<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/features-Material-Design.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/features-Material-Design.jpg\" alt=\"features Material Design\" class=\"alignnone wp-image-7189\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/features-Material-Design.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/features-Material-Design-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/features-Material-Design-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\n<a href=\"https:\/\/www.fitbit.com\/home\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Fitbit\u2019s<\/a> website features Material Design<\/p>\n<p>By utilizing the Z-axis, Material  Design allows users to spot visual clues that tell them where to go or how to  interact with the UI better.<\/p>\n<p>Both material and flat designs  incorporate minimalistic approaches. However, Material Design goes a step  further since it meshes both the real and digital world by using skeumorphisms.  It also does it subtly.<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Slack-Android-app.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Slack-Android-app.jpg\" alt=\"Slack Android app\" class=\"alignnone wp-image-7190\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Slack-Android-app.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Slack-Android-app-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Slack-Android-app-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nScreenshot of <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.Slack&amp;hl=en\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Slack Android App<\/a><\/p>\n<p>For example, you can see the  button at the lower right corner of this screen on Slack Android is clearly a  button without being overly glossy. The use of light and shadow is cleverly  used to achieve this effect.<\/p>\n<h3>\u2022 Visual Cohesiveness<\/h3>\n<p><a href=\"https:\/\/www.designmantic.com\/blog\/why-user-centric-design-is-king\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>User centric design is king<\/strong><\/a>. And the main purpose of  UX design, is to maximize usability by reducing the time and effort it takes  for someone to make sense of say, a web page. Unfortunately, flat design is not  always able to achieve this owing to the absence of a Z-axis.<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Microsofts-Developers.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Microsofts-Developers.jpg\" alt=\"Microsoft's Developer's\" class=\"alignnone wp-image-7191\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Microsofts-Developers.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Microsofts-Developers-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Microsofts-Developers-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nImage: Microsoft<\/p>\n<p align=\"center\">Microsoft\u2019s Developer\u2019s Network Website \u2013 Another example of Flat Design<\/p>\n<p>As we can see from the flat  design of Microsoft\u2019s Developer\u2019s Network, it would take a visitor more time to  make sense of the different elements of this website.<\/p>\n<p>Designs that adopt Material Design  approach on the other hand, recognize the human ability to perceive depth and  information hierarchies that are organized on a Z-axis.<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Calendar-app.jpg\"><img decoding=\"async\" src=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Calendar-app.jpg\" alt=\"Google Calendar app\" class=\"alignnone wp-image-7192\" width=\"600\" height=\"\" srcset=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Calendar-app.jpg 600w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Calendar-app-300x150.jpg 300w, https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Google-Calendar-app-500x250.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\nImage: <a href=\"https:\/\/itunes.apple.com\/us\/app\/google-calendar\/id909319292?mt=8\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Google Calendar App on iTunes<\/a><\/p>\n<p>Google\u2019s Calendar app is a good  example of how Material Design prioritizes visual hierarchy better than apps  that have flat designs. This app gives a vertical layout and places the current  day at the very top of the page. Days that are irrelevant are condensed. This  way, Google streamlines user experiences to show only what is useful.<\/p>\n<div style=\"margin-top:40px; margin-bottom:40px;\" align=\"center\"><a href=\"https:\/\/www.designmantic.com\/logo-design?utm_source=material-design-goes-beyond-flat-design&amp;utm_medium=endbutton&amp;utm_campaign=ctatracking\" target=\"_blank\" class=\"cta-button\" rel=\"noopener noreferrer\">Online Logo Design<\/a><\/div>\n<h2>Will Material Design Take Off?<\/h2>\n<p>The main difference between flat  design and Material Design is depth. If we compare designs that adopt the trend  and those that stick to flat design, the former clearly stands out with regards  to a friendly web design, clickability and visual cohesiveness. Will it take  off? That remains to be seen. I, for one, would love to see how other platforms  adopt Google\u2019s design evolution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The laws of physics don\u2019t apply to the digital realm. That is why most web designs are flat or devoid of any physical aspects that would show us what they really are \u2013 mere illustrations. To make users more attuned &hellip; <a href=\"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":12763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255],"tags":[],"class_list":["post-7181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Material Design Over Flat Design | DesignMantic: The Design Shop<\/title>\n<meta name=\"description\" content=\"Is Material Design really better than flat design? Learn how it prevails where flat design falls short.\" \/>\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.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material Design Over Flat Design | DesignMantic: The Design Shop\" \/>\n<meta property=\"og:description\" content=\"Is Material Design really better than flat design? Learn how it prevails where flat design falls short.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/\" \/>\n<meta property=\"og:site_name\" content=\"DesignMantic\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DesignMantic\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-23T09:52:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T06:32:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Flat-Designs-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Evan Brown\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/EvanBrownDM\" \/>\n<meta name=\"twitter:site\" content=\"@designmantic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Evan Brown\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Material Design Over Flat Design | DesignMantic: The Design Shop","description":"Is Material Design really better than flat design? Learn how it prevails where flat design falls short.","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.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/","og_locale":"en_US","og_type":"article","og_title":"Material Design Over Flat Design | DesignMantic: The Design Shop","og_description":"Is Material Design really better than flat design? Learn how it prevails where flat design falls short.","og_url":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/","og_site_name":"DesignMantic","article_publisher":"https:\/\/www.facebook.com\/DesignMantic","article_published_time":"2016-06-23T09:52:26+00:00","article_modified_time":"2024-03-21T06:32:02+00:00","og_image":[{"width":1000,"height":660,"url":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Flat-Designs-1.jpg","type":"image\/jpeg"}],"author":"Evan Brown","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/EvanBrownDM","twitter_site":"@designmantic","twitter_misc":{"Written by":"Evan Brown","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#article","isPartOf":{"@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/"},"author":{"name":"Evan Brown","@id":"https:\/\/www.designmantic.com\/blog\/#\/schema\/person\/6391d01ed964b5a1184066a18d5bb7f0"},"headline":"Material Design &#8211; Going where Flat Design Hasn\u2019t Gone Before!","datePublished":"2016-06-23T09:52:26+00:00","dateModified":"2024-03-21T06:32:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/"},"wordCount":1235,"commentCount":2,"publisher":{"@id":"https:\/\/www.designmantic.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Flat-Designs-1.jpg","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/","url":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/","name":"Material Design Over Flat Design | DesignMantic: The Design Shop","isPartOf":{"@id":"https:\/\/www.designmantic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#primaryimage"},"image":{"@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Flat-Designs-1.jpg","datePublished":"2016-06-23T09:52:26+00:00","dateModified":"2024-03-21T06:32:02+00:00","description":"Is Material Design really better than flat design? Learn how it prevails where flat design falls short.","breadcrumb":{"@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#primaryimage","url":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Flat-Designs-1.jpg","contentUrl":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2016\/06\/Flat-Designs-1.jpg","width":1000,"height":660,"caption":"Designs"},{"@type":"BreadcrumbList","@id":"https:\/\/www.designmantic.com\/blog\/material-design-goes-beyond-flat-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Web Design","item":"https:\/\/www.designmantic.com\/blog\/category\/web-design\/"},{"@type":"ListItem","position":2,"name":"Material Design &#8211; Going where Flat Design Hasn\u2019t Gone Before!"}]},{"@type":"WebSite","@id":"https:\/\/www.designmantic.com\/blog\/#website","url":"https:\/\/www.designmantic.com\/blog\/","name":"DesignMantic","description":"","publisher":{"@id":"https:\/\/www.designmantic.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.designmantic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.designmantic.com\/blog\/#organization","name":"DesignMantic","url":"https:\/\/www.designmantic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.designmantic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2020\/08\/DesignMantic-Logo.png","contentUrl":"https:\/\/www.designmantic.com\/blog\/wp-content\/uploads\/2020\/08\/DesignMantic-Logo.png","width":300,"height":58,"caption":"DesignMantic"},"image":{"@id":"https:\/\/www.designmantic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DesignMantic","https:\/\/x.com\/designmantic"]},{"@type":"Person","@id":"https:\/\/www.designmantic.com\/blog\/#\/schema\/person\/6391d01ed964b5a1184066a18d5bb7f0","name":"Evan Brown","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.designmantic.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9f661793780701b84d700350db08494bbbc69f4a5a52f3d53abb33f6190085f8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9f661793780701b84d700350db08494bbbc69f4a5a52f3d53abb33f6190085f8?s=96&d=mm&r=g","caption":"Evan Brown"},"description":"Evan is an Expert in Digital Marketing. He has been working in the social media space since 2008, with a focus on design services, user interface planning, branding and more. Currently, he is leading content marketing efforts at DesignMantic and has played an integral part in the success story of DesignMantic through strategic marketing campaigns. Evan is also a design pro, who has shown a predilection towards DIY design projects.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/EvanBrownDM"],"url":"https:\/\/www.designmantic.com\/blog\/author\/evan-brown\/"}]}},"_links":{"self":[{"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/posts\/7181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/comments?post=7181"}],"version-history":[{"count":9,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/posts\/7181\/revisions"}],"predecessor-version":[{"id":23059,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/posts\/7181\/revisions\/23059"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/media\/12763"}],"wp:attachment":[{"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/media?parent=7181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/categories?post=7181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.designmantic.com\/blog\/wp-json\/wp\/v2\/tags?post=7181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}