{"id":14851,"date":"2017-01-18T12:15:00","date_gmt":"2017-01-18T06:45:00","guid":{"rendered":"https:\/\/blog.resellerclub.com\/?p=14851"},"modified":"2025-10-24T12:46:23","modified_gmt":"2025-10-24T12:46:23","slug":"material-design-then-and-now","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/","title":{"rendered":"Material Design: Then And Now"},"content":{"rendered":"<p>\u201cIt is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. <i>This is the law.<\/i>\u201c &#8211; <a href=\"https:\/\/archive.org\/details\/tallofficebuildi00sull\">Louis Sullivan on design, 1896<\/a><\/p>\n<p>I remember when I joined the Android bandwagon 4 years ago when mobile devices were running on the Jelly Bean OS. Features like Google Now and various UI improvements were added for a smoother, more responsive feel. The notification system was revamped with actions buttons along with it being expandable. As a user, I was pretty impressed with the ease of navigation. Then came the era of Android 5.0 and along with it, Material Design.<\/p>\n<p><b>What is Material Design?<\/b><\/p>\n<p style=\"text-align: center;\"><b>\u201cFocus on the user and all else will follow.\u201d <\/b><\/p>\n<p>Google\u2019s first rule in their \u201cTen Things\u201d philosophy is emphasis on the user experience above anything else. Material Design is a visual language developed in 2014 to cater to the ever-evolving purpose of design. This so called \u2018material\u2019 is a hypothetical substance out of which all UI elements are constructed. It must behave according to a number of guidelines setout in Google\u2019s <a href=\"https:\/\/material.google.com\/\" target=\"_blank\" rel=\"nofollow noopener\">specsheet<\/a>. This helped Google in developing a single underlying system that allows for a unified experience across platforms and device sizes. Here are a few guidelines:<\/p>\n<ul>\n<li>No two pieces of Material can overlap<\/li>\n<li>All Material elements are opaque<\/li>\n<li>No Material elements can fold or bend<\/li>\n<\/ul>\n<p>Let\u2019s have a look at the key components with which Material Design is based on.<\/p>\n<p><b>The principles of Material Design <\/b><\/p>\n<ol>\n<ol>\n<li>\u2018Material is the metaphor\u2019 &#8211; Google\u2019s design is inspired by tangible objects such as ink and paper. For example, liberal use of grid-based layouts and <a href=\"http:\/\/blog.resellerclub.com\/acing-the-game-of-cards\/\">cards<\/a> represents the ink and paper which is utilized to express our creativity<\/li>\n<li>\u2018Bold, graphic, intentional\u2019 &#8211; Incorporating the foundation elements of print-based design such as typography, grids, space, scale, color, and use of imagery with the intent of being visual guides for users<\/li>\n<li>\u2018Motion provides meaning\u2019 &#8211; Google definitely revamped the appearance and layout of their new operating system, but incorporating meaningful animation that serves to maintain a flow to UI is what took the Android OS to newer heights<\/li>\n<\/ol>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/Q8TXgCzxEnw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><b>What makes Material Design stand out?<\/b><\/p>\n<p>Material Design draws inspiration from real-world forces. It evidently incorporates concepts like gravity and friction. Another thing to keep in mind is \u2018tactile surface\u2019. Imagine you have several sheets of paper that are stacked together in order to create a blueprint for how everything within the design works. These sheets of paper possess the same qualities as that of actual paper; they can change shape and form &#8211; they bend, and\/or stretch based on your interactions.<\/p>\n<h4><b>Skeuomorphism vs Material Design<\/b><\/h4>\n<p>As you know, skeuomorphism in design uses life-like elements to represent the real world or in short, a replica of the actual thing. It takes inspiration from Greek style architecture. It attempts to create three dimensional effects on a two-dimensional surface. Let\u2019s take Apple as an example, the previous versions of &nbsp;iOS incorporated skeuomorphism unlike flat design, which is its successor.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"keuomorphism vs flat design\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-14853\" src=\"\/blog\/wp-content\/uploads\/2017\/01\/994_img1.jpg\" alt=\"994_img1\" width=\"637\" height=\"566\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>You can easily distinguish the two. Skeuomorphism emphasises on lighting and shadows that make it appear like it\u2019s a 3-dimensional design. Skeuomorphism eventually proved to be problematic. Designers stated that it often felt fake because it followed the lines of imitation and ever since, skeuomorphism took to the sidelines. This is when flat design came into being as a response to the problems of skeuomorphism and dominated its way in the digital world.<\/p>\n<p>Flat design takes influence from Swiss style design that began back in 1920. It pushed minimalistic design to a whole new paradigm because it focused on cleanliness, readability and efficient use of space. Have a look at a few highlights of flat design and why it\u2019s replaced skeuomorphism.<\/p>\n<ol>\n<li>Only uses what\u2019s needed, unnecessary design elements and animations are cut out to drastically reduce loading time<\/li>\n<li>Colour variety &#8211; Flat design is a colourful friend. As a designer you have the freedom to experiment with a range of colours; bold or bright<\/li>\n<li>Open spaces &#8211; Makes practical use of space and thus, keeps your design minimalistic. This eliminates any unnecessary visual elements<\/li>\n<\/ol>\n<p>Material Design is an evolutionary by-product of flat design. It may appear to be similar to someone not having expertise in the field of design. There is little yet crucial difference between the two. Let\u2019s have a look at how Material Design is a step further of flat design:<\/p>\n<p><i>MK Cook, UX\/UI Designer at <\/i><a href=\"http:\/\/www.dtelepathy.com\/\" target=\"_blank\" rel=\"nofollow noopener\"><i>Digital Telepathy<\/i><\/a> says that<\/p>\n<ul>\n<li>Flat design has no skeuomorphisms while material design utilizes them subtly.<\/li>\n<li>Flat design is best for simplistic needs while material design is best for more complex needs.<\/li>\n<li>Flat design is overall easier to develop and faster to load than material design.<\/li>\n<\/ul>\n<p>What makes Material Design so special is its ability to be compatible with a variety of devices like cars, TVs, mobiles &amp; tablets. To tackle this daunting challenge, the platform has a range of tools and techniques for handling various devices. For example, Material Design operates on the basis of density independent pixels (dip). Let\u2019s have a look at how this has helped to overcome various design related obstacles.<\/p>\n<p><b>Working with density independent pixels:<\/b><\/p>\n<p>A density independent pixel is equal to one pixel at the baseline density or 160 dpi (dots per inch)<\/p>\n<p>It\u2019s represented as: 1px\/1dp = 160dpi\/160dpi where \u2018dp\u2019 denotes density independent pixel or \u2018dpi\u2019<\/p>\n<p>Working with density independent pixels helps to deal with say two different devices having the same resolution, but occupying different physical space. Thus, you\u2019re able to adapt your design layout in various devices by simply keeping this in mind.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/VeNuwi5kF6c\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p style=\"text-align: center;\">Video courtesy &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=VeNuwi5kF6c\" target=\"_blank\" rel=\"nofollow noopener\">Udacity<\/a><\/p>\n<p>The beauty of Material Design is that it moves beyond app layouts, buttons etc. It\u2019s also a set of guidelines for how we interact with our devices. It emphasizes on movement animation which draws the user\u2019s eye to the correct part of the screen. Google has also released APIs for third-party developers to incorporate the design language into their applications. These APIs let you:<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Respond to touch events with <b>touch feedback<\/b> animations<\/li>\n<li>Hide and show views with <b>circular reveal<\/b> animations<\/li>\n<li>Create more natural animations with <b>curved motion<\/b><\/li>\n<li>Animate changes in one or more view properties with <b>view state change<\/b> animations<\/li>\n<\/ul>\n<p>Let\u2019s dive in deeper to understand how Material Design completely revamped the look and feel of the Android OS. Let\u2019s observe the evolution of the Google Play Store from version 3 onwards, all the way to it\u2019s freshest appearance.<\/p>\n<p><b>Google PlayStore v3 (HoneyComb)<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-14857\" src=\"\/blog\/wp-content\/uploads\/2017\/01\/Google-PlayStore-3.png\" alt=\"Google PlayStore 3\" width=\"336\" height=\"560\"><\/p>\n<p>Back when Honeycomb launched, Google introduced a new so-called &#8220;holographic&#8221; user interface theme. As you can see, the Play Store was predominantly black and had a scroll feature for each app category. The search button was to the top right corner and lacked the sliding menu bar that opens from the left.<\/p>\n<p>&nbsp;<\/p>\n<p><b>Google PlayStore v4 (JellyBean)<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-14859\" src=\"\/blog\/wp-content\/uploads\/2017\/01\/Google-Play-Store-4.jpeg\" alt=\"Google Play Store 4\" width=\"335\" height=\"596\"><\/p>\n<p>You can notice a considerable number of changes to the Play Store interface. The colour scheme moved to white and still used lush green as a secondary colour. Everything is cleaner, crisp, and polished.<a href=\"https:\/\/androidcommunity.com\/tag\/google\/\"> Google<\/a>\u2018s focused on bigger images everywhere, card style layouts similar to<a href=\"https:\/\/androidcommunity.com\/tag\/google-now\/\"> Google Now<\/a>, and of course recommendations.The app category scroll was discontinued and the use of buttons came into place as you can see in the picture below.<\/p>\n<p>Picture courtesy &#8211; androidcommunity.com<\/p>\n<p>&nbsp;<\/p>\n<p><b>Google PlayStore v5 (Lollipop)<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-14865\" src=\"\/blog\/wp-content\/uploads\/2017\/01\/Google-Play-Store-5.png\" alt=\"Google Play Store 5 lollipop resellerclub blog\" width=\"369\" height=\"594\"><\/p>\n<p>This marked the beginning of Material Design. The side menu (that you can draw by touching the top left icon) became a crucial aspect of app building. It used a persistent search bar that was a lot faster &amp; came with Google Now accessibility. Category buttons were entirely coloured while the icons took to a flat white. v4 was a lot flatter since Material Design started to use subtle skeuomorphic elements like shadows (in the cards below).<\/p>\n<p>&nbsp;<\/p>\n<p><b>Google PlayStore v6 (Marshmallow)<\/b><\/p>\n<p>Playstore came out with more minimalistic and lucid version for Marshmallow. Version 6 started to use hero banners to highlight new apps with a scroll feature, app category icons were now using round buttons. It focused primarily on making it easier for users to handle any Android app beta tests that they may want to be a part of.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-14871\" src=\"\/blog\/wp-content\/uploads\/2017\/01\/Google-Play-Store-6-XDA-developers.png\" alt=\"Google Play Store 6 XDA developers\" width=\"645\" height=\"375\"><\/p>\n<p style=\"text-align: center;\">Picture courtesy &#8211; <a href=\"http:\/\/xdadevelopers.com\" target=\"_blank\" rel=\"nofollow noopener\">xdadevelopers.com<\/a><\/p>\n<p><b>Google PlayStore v7(Nougat)<\/b><\/p>\n<p>Material design has come a long way and now has a smarter, sleeker appearance with the launch of Android Nougat. There\u2019s not a lot of difference in version 7 except for the revamped menu as well as a a more intelligent recommendations section. Google will surely add more tweaks and enhancements on the fly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-14869\" src=\"\/blog\/wp-content\/uploads\/2017\/01\/unnamed.png\" alt=\"google playstore 7 nougat resellerclub blog\" width=\"357\" height=\"635\"><\/p>\n<p>What I\u2019d like to conclude is that transition animations are of prime focus in today\u2019s touch-oriented society. Google\u2019s Material Design has definitely made user-experience a lot richer and will continue to do so. Material Design is an advisable language to use because it makes development easier owing to the guidelines it must follow. Basically, you don\u2019t have to start from scratch and it doesn\u2019t take much time for end users to understand the UI.<\/p>\n<p><b>How can Material help your Business?<\/b><\/p>\n<ol>\n<li>Capital &#8211; Designing your own UI guidelines has costs<\/li>\n<li>Uniformity &#8211; Adhering to Material Design means you blend into how other apps look<\/li>\n<li>Time &#8211; For larger projects you are guaranteed to come across problems and conflicts if you don&#8217;t use guidelines<\/li>\n<\/ol>\n<p><b>How to successfully incorporate Material Design?<\/b><\/p>\n<ol>\n<li>Do not ignore the Material grid &amp; keylines since it\u2019s a print-based design<\/li>\n<li>Since the foundation of Material Design is paper and ink, only use shadows where it matters. Excessive use could cause a lot of noise<\/li>\n<li>There are a lot of <a href=\"https:\/\/material.uplabs.com\/posts\/c\/resources\/tutorial\">good tutorials<\/a> and resource sharing <a href=\"https:\/\/material.uplabs.com\/\">websites<\/a> out there to help you get get started<\/li>\n<\/ol>\n<p>You can also refer to the following <a href=\"https:\/\/www.sitepoint.com\/10-essential-material-design-resources-and-tutorials\/\" target=\"_blank\" rel=\"nofollow noopener\">tutorial links<\/a> to help you get started with Material Design. What are your favourite PlayStore apps that you use on a day-to-day basis? We\u2019d love to hear about it in the comments section below!<\/p>\n<p>&nbsp;<\/p>\n<h2>Reseller Club Hosting Services<\/h2>\n<p><a href=\"https:\/\/www.resellerclub.com\/reseller-hosting\">Reseller Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/windows-reseller-hosting\">Windows Reseller Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/cloud-hosting\">Cloud Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/vps-hosting\">VPS Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/managed-vps-hosting\">Managed VPS Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/dedicated-server-hosting\">Dedicated Server Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/windows-dedicated-server-hosting\">Windows Dedicated Server<\/a> | <a href=\"https:\/\/www.resellerclub.com\/managed-dedicated-server-hosting\">Managed Dedicated Server<\/a> | <a href=\"https:\/\/www.resellerclub.com\/shared-hosting\">Linux Shared Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/windows-shared-hosting\">Windows Shared Hosting<\/a><\/p>\n<div class=\"fb-background-color\">\n\t\t\t  <div \n\t\t\t  \tclass = \"fb-comments\" \n\t\t\t  \tdata-href = \"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/\"\n\t\t\t  \tdata-numposts = \"10\"\n\t\t\t  \tdata-lazy = \"true\"\n\t\t\t\tdata-colorscheme = \"light\"\n\t\t\t\tdata-order-by = \"social\"\n\t\t\t\tdata-mobile=true>\n\t\t\t  <\/div><\/div>\n\t\t  <style>\n\t\t    .fb-background-color {\n\t\t\t\tbackground:  !important;\n\t\t\t}\n\t\t\t.fb_iframe_widget_fluid_desktop iframe {\n\t\t\t    width: 100% !important;\n\t\t\t}\n\t\t  <\/style>\n\t\t  ","protected":false},"excerpt":{"rendered":"<p>\u201cIt is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.\u201c<\/p>\n","protected":false},"author":43,"featured_media":14875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_has_post_settings":[],"_rc_manual_related_posts":[],"footnotes":""},"categories":[1367,1523],"tags":[],"hashtags":[],"class_list":["post-14851","post","type-post","status-publish","format-standard","has-post-thumbnail","category-design","category-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Material Design: Then &amp; Now<\/title>\n<meta name=\"description\" content=\"What is Material Design and how has its evolution contributed to better UI? How can Material Design help your web design\/development business?\" \/>\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.resellerclub.com\/blog\/material-design-then-and-now\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material Design: Then &amp; Now\" \/>\n<meta property=\"og:description\" content=\"What is Material Design and how has its evolution contributed to better UI? How can Material Design help your web design\/development business?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/\" \/>\n<meta property=\"og:site_name\" content=\"ResellerClub Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100005889763273\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-18T06:45:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-24T12:46:23+00:00\" \/>\n<meta name=\"author\" content=\"Siddanth Pillai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddanth Pillai\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/\"},\"author\":{\"name\":\"Siddanth Pillai\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/#\\\/schema\\\/person\\\/cd949fa831a86faaba3b7f7d7e4cfbec\"},\"headline\":\"Material Design: Then And Now\",\"datePublished\":\"2017-01-18T06:45:00+00:00\",\"dateModified\":\"2025-10-24T12:46:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/\"},\"wordCount\":1737,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Web Design Blogs\",\"Web Development Blogs\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/\",\"url\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/\",\"name\":\"Material Design: Then & Now\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2017-01-18T06:45:00+00:00\",\"dateModified\":\"2025-10-24T12:46:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/#\\\/schema\\\/person\\\/cd949fa831a86faaba3b7f7d7e4cfbec\"},\"description\":\"What is Material Design and how has its evolution contributed to better UI? How can Material Design help your web design\\\/development business?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"material design: then and now resellerclub blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/material-design-then-and-now\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material Design: Then And Now\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/\",\"name\":\"ResellerClub Blog\",\"description\":\"Web Hosting &amp; Domains\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/#\\\/schema\\\/person\\\/cd949fa831a86faaba3b7f7d7e4cfbec\",\"name\":\"Siddanth Pillai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b29b68b590029578599d33061f92d5f57d502c094a43df40c072d3caf2e2a8e0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b29b68b590029578599d33061f92d5f57d502c094a43df40c072d3caf2e2a8e0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b29b68b590029578599d33061f92d5f57d502c094a43df40c072d3caf2e2a8e0?s=96&d=mm&r=g\",\"caption\":\"Siddanth Pillai\"},\"description\":\"Siddanth can eat 7 hotdogs in one sitting. Apart from Content Marketing, he enjoys singing and is a professional Karate instructor\",\"url\":\"https:\\\/\\\/www.resellerclub.com\\\/blog\\\/author\\\/siddanth-p\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Material Design: Then & Now","description":"What is Material Design and how has its evolution contributed to better UI? How can Material Design help your web design\/development business?","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.resellerclub.com\/blog\/material-design-then-and-now\/","og_locale":"en_US","og_type":"article","og_title":"Material Design: Then & Now","og_description":"What is Material Design and how has its evolution contributed to better UI? How can Material Design help your web design\/development business?","og_url":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/","og_site_name":"ResellerClub Blog","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100005889763273","article_published_time":"2017-01-18T06:45:00+00:00","article_modified_time":"2025-10-24T12:46:23+00:00","author":"Siddanth Pillai","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Siddanth Pillai","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#article","isPartOf":{"@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/"},"author":{"name":"Siddanth Pillai","@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/cd949fa831a86faaba3b7f7d7e4cfbec"},"headline":"Material Design: Then And Now","datePublished":"2017-01-18T06:45:00+00:00","dateModified":"2025-10-24T12:46:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/"},"wordCount":1737,"commentCount":0,"image":{"@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#primaryimage"},"thumbnailUrl":"","articleSection":["Web Design Blogs","Web Development Blogs"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/","url":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/","name":"Material Design: Then & Now","isPartOf":{"@id":"https:\/\/www.resellerclub.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#primaryimage"},"image":{"@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#primaryimage"},"thumbnailUrl":"","datePublished":"2017-01-18T06:45:00+00:00","dateModified":"2025-10-24T12:46:23+00:00","author":{"@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/cd949fa831a86faaba3b7f7d7e4cfbec"},"description":"What is Material Design and how has its evolution contributed to better UI? How can Material Design help your web design\/development business?","breadcrumb":{"@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#primaryimage","url":"","contentUrl":"","caption":"material design: then and now resellerclub blog"},{"@type":"BreadcrumbList","@id":"https:\/\/www.resellerclub.com\/blog\/material-design-then-and-now\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.resellerclub.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Material Design: Then And Now"}]},{"@type":"WebSite","@id":"https:\/\/www.resellerclub.com\/blog\/#website","url":"https:\/\/www.resellerclub.com\/blog\/","name":"ResellerClub Blog","description":"Web Hosting &amp; Domains","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.resellerclub.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/cd949fa831a86faaba3b7f7d7e4cfbec","name":"Siddanth Pillai","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b29b68b590029578599d33061f92d5f57d502c094a43df40c072d3caf2e2a8e0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b29b68b590029578599d33061f92d5f57d502c094a43df40c072d3caf2e2a8e0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b29b68b590029578599d33061f92d5f57d502c094a43df40c072d3caf2e2a8e0?s=96&d=mm&r=g","caption":"Siddanth Pillai"},"description":"Siddanth can eat 7 hotdogs in one sitting. Apart from Content Marketing, he enjoys singing and is a professional Karate instructor","url":"https:\/\/www.resellerclub.com\/blog\/author\/siddanth-p\/"}]}},"_links":{"self":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/14851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/comments?post=14851"}],"version-history":[{"count":11,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/14851\/revisions"}],"predecessor-version":[{"id":38454,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/14851\/revisions\/38454"}],"wp:attachment":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/media?parent=14851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/categories?post=14851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/tags?post=14851"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/hashtags?post=14851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}