{"id":3999,"date":"2018-05-07T08:00:55","date_gmt":"2018-05-07T08:00:55","guid":{"rendered":"https:\/\/www.gtechbooster.com\/?p=3999"},"modified":"2022-11-30T22:02:06","modified_gmt":"2022-11-30T22:02:06","slug":"material-design-2-need-to-know","status":"publish","type":"post","link":"https:\/\/gtechbooster.com\/material-design-2-need-to-know\/","title":{"rendered":"Material Design 2: Need to know"},"content":{"rendered":"\n<p>You have probably heard of \u201cMaterial Design 2\u201d making a buzz around since February. Whispers have been rallying as far back as early last year that Google was working on a spiritual successor to its Material Design without any solid stance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A brief look back<\/h2>\n\n\n\n<div class=\"gtech-migrated-from-ad-inserter-placement-2\" style=\"text-align: center;\" id=\"gtech-1488672947\"><div style=\"margin-right: auto;margin-left: auto;text-align: center;\" id=\"gtech-2475613030\"><a data-bid=\"1\" data-no-instant=\"1\" href=\"https:\/\/gtechbooster.com\/linkout\/76065\" rel=\"noopener\" class=\"notrack\" aria-label=\"26002\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechbooster.com\/media\/2025\/10\/26002.jpg\" alt=\"\"  srcset=\"https:\/\/gtechbooster.com\/media\/2025\/10\/26002.jpg 1200w, https:\/\/gtechbooster.com\/media\/2025\/10\/26002-768x768.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" width=\"500\" height=\"500\"  style=\"display: inline-block;\" \/><\/a><\/div><\/div><p>The famed Matias Duarte revealed the first iteration of Google\u2019s Material Design\u00a0four years ago at Google I\/O 2014, and it was a remarkable step forward for the company. <\/p>\n\n\n\n<p>There was a scattered and chaotic approach to design across Google\u2019s products, Android was long considered ugly and many felt it was starting to look dated, and Google just needed a fresh new philosophy that would unify its products and bring some aesthetic beauty to boot.<\/p>\n\n\n\n<p>Since then, Android and pretty much all of Google\u2019s apps and platforms have embraced the new approach to design. While Android itself and its apps were first to jump on board, it was interesting to see the keystone web apps march forward on their slow crawl to Material Design goodness. <\/p>\n\n\n\n<p>Less popular attractions like Google+ got Material fast, some took a couple years, and you might know that some stragglers (like Calendar) only just late last year got makeovers.<\/p>\n\n\n\n<p>Just in time for I\/O 2018, pretty much all of Google\u2019s most important services have made the move. One of the last holdouts was Gmail on the web, and it finally got its new coat of paint just this week. But what\u2019s interesting about the Gmail redesign is that it\u2019s not just Material. It\u2019s showing evidence of a new, evolved form of Material that many call \u201cMaterial Design 2\u201d. <\/p>\n\n\n\n<p>Now that Google\u2019s finally caught up, is it really time for yet another change?\u00a0Kind of.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What exactly is \u201cMaterial Design 2\u201d?<\/h2>\n\n\n\n<p>It\u2019s not a drastic departure from the most modern and recent approaches Google has taken to design (like Calendar on the web for instance). But with the latest Google visual updates we\u2019ve managed to unearth in recent months, people will probably start to be able to really differentiate between what is \u201cold\u201d and what is \u201cnew\u201d \u2014 because there are some key giveaways. This is what we\u2019re calling \u201cMaterial Design 2\u201d.<\/p>\n\n\n\n<p>Another reason that this latest round of tweaks to Material Design 2 will stand out to many is because these flatter all-white backgrounds and rounded corners and refreshed fonts really do look drastically different from the vision that Matias Duarte laid out 4 years ago. <\/p>\n\n\n\n<p>Some might argue that it\u2019s not Material Design <em>at all<\/em> anymore, but before we talk about that, let\u2019s take a quick dive into some of the design concepts that, so far, define this refreshed design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">White space &amp; translucency<\/h3>\n\n\n\n<p>One of the most obvious changes with the new Material Design is the abundance of white space, and this is definitely a controversial change. <\/p>\n\n\n\n<p>In the many examples of apps that we believe take guidance from Google\u2019s latest internal Material guidelines, like some versions of the Google app Feed, Google Tasks, the I\/O 2018 app, and more, there\u2019s lots of white space that seems intended to provide a clean, minimalist look.<\/p>\n\n\n\n<p>There aren\u2019t really any specific examples of this, but it\u2019s rather something that just seems like a common theme among any design changes Google has made to its apps in recent months.<\/p>\n\n\n\n<p>In some places, there\u2019s also signs of translucency becoming more common, with one prominent example being the Pixel Launcher that Google shipped with the Pixel 2. <\/p>\n\n\n\n<p>That Google Feed and app drawer are translucent to this day, and we haven\u2019t seen many other examples so far \u2014 save for quick settings and app drawer in Android 8.1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Colorful icons<\/h3>\n\n\n\n<p>While not exactly a trend that we have seen elsewhere in Google\u2019s apps yet, I think the colorful icons that Google included with Developer Preview 1 of Android P are worth noting as uniquely new. <\/p>\n\n\n\n<p>In fact, there are many elements of the new Settings app that I think are representative of Google\u2019s new Material Design as a whole. You can find rounded corners throughout the app, there\u2019s bits of Google Sans, and Google is embracing brighter colors generally.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u201cGoogle Sans\u201d<\/h3>\n\n\n\n<p>Another aspect that is becoming more and more obvious, at least among Google\u2019s first party apps that we\u2019ve seen so far, is the adoption of \u201cGoogle Sans\u201d as a font for headers \u2014 but notably not as a complete replacement for the long-beloved Roboto. <\/p>\n\n\n\n<p>Basically, Google Sans is a version of Product Sans (Google\u2019s proprietary font for its namesake logo and other product logos) that it\u2019s been using across some web apps and pages, and lately, its Android apps.<\/p><div class=\"gtech-mid-cont\" style=\"text-align: center;\" id=\"gtech-1313775014\"><div style=\"margin-right: auto;margin-left: auto;text-align: center;\" id=\"gtech-3598596147\"><a data-bid=\"1\" data-no-instant=\"1\" href=\"https:\/\/gtechbooster.com\/linkout\/17207\" rel=\"noopener\" class=\"notrack\" aria-label=\"26001\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg\" alt=\"\"  srcset=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg 1024w, https:\/\/gtechbooster.com\/media\/2023\/01\/26001-768x960.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" width=\"500\" height=\"625\"  style=\"display: inline-block;\" \/><\/a><\/div><\/div>\n\n\n\n<p>Google uses the new font <a href=\"https:\/\/wearos.google.com\/\">on its recently-refreshed Wear OS site<\/a>, for email headers in the new Gmail, in many apps in the Google Tasks app and the new Google I\/O 2018, and in plenty more places I\u2019m probably not yet aware of.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rounded corners<\/h3>\n\n\n\n<p>Next up is the abundance of rounded corners \u2014 or at least a much rounder radius on corners that were technically round already. This is another theme that just seems to be spreading throughout Google\u2019s apps and has found prominence in its most recent designs. <\/p>\n\n\n\n<p>One of the most obvious places to see this is in the Google Feed, but it\u2019s also readily apparent in the Google Tasks app, <a href=\"https:\/\/pay.google.com\/send\/home?authuser=0\">Google Pay on the web<\/a>, other pages in the Google app, and elsewhere.<\/p>\n\n\n\n<p>Another prime example for these new rounded cards is in the Wear OS app, where we get a very flat design for all these watch face cards and just a subtle shadow to show you which one you have selected.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">New rounded tab indicators<\/h3>\n\n\n\n<p>Tabs in Android have traditionally had a highlight that stretches across the entirety of the tab and, in many cases, you could swipe between them to navigate to other tabs. <\/p>\n\n\n\n<p>Well, in recent \u201cMaterial Design 2\u201d-adherent apps, we\u2019re seeing a brand new tab design pop up that brings rounded corners and doesn\u2019t cover the entirety of the tab.<\/p>\n\n\n\n<p>So far, we\u2019ve seen this A\/B tested on certain location listing pages in Google Maps for Android (I have it on my Pixel 2 XL, but Abner isn\u2019t seeing it on the latest version of the app), the new Google Account settings page which we enabled recently, and in two different places in the recently-launched Gmail for web redesign.<\/p>\n\n\n\n<p>There are two interesting things to note here. First, none of the examples we\u2019ve found so far of this design have allowed the same swipe functionality that the old design had. Second, the just-launched Google I\/O 2018 app has a design for its tabs that are somewhere between the old and the new \u2014 and they are swipeable. So don\u2019t get worried, yet!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rounded selection highlights in menus<\/h2>\n\n\n\n<p>Another common theme we\u2019re seeing in apps presumably built with the new guidelines in mind are these new rounded selection highlights in menus. <\/p>\n\n\n\n<p>For example, in the left-most screenshot below, there\u2019s a menu that\u2019s opened via a hamburger menu button on a new BottomAppBar (read more below) and within that menu the currently-selected option is highlighted blue. We also see this <a href=\"https:\/\/pay.google.com\/send\/home?authuser=0\">on Google Pay on the web<\/a> and the background picker in Chrome OS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">BottomAppBar will be big<\/h3>\n\n\n\n<p>Phones have gotten bigger, and with bigger phones and not-so-much bigger thumbs, reaching to top of the display to navigate around apps has gotten more difficult. I\u2019m told by a source that the BottomAppBar <a href=\"https:\/\/material.io\/components\/ios\/catalog\/bottomappbar\/\">that was added to the Material guidelines alongside Android P<\/a> is going to be a critical piece of this new refreshed Material.<\/p>\n\n\n\n<p>There\u2019s two apps straight from Google itself which are already showing an early peek at what this will look like. One of which is Tasks, which has a wide floating action button that seems to sit on top of the BottomAppBar, and another is the new Google I\/O 2018 app, which has the version identical to the one seen in the guidelines.<\/p>\n\n\n\n<p>I\u2019m told that these BottomAppBars are going to come to the majority of Google\u2019s first-party apps where applicable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion: Name? Launch?<\/h2>\n\n\n\n<p>To wrap all this up, I think it might be best to set the record  straight on exactly what we should call this and when we should expect  to see it \u201claunch\u201d.<\/p>\n\n\n\n<p>First, on the topic of its name, I\u2019m told by a source familiar that  Google isn\u2019t actually going to call this \u201cMaterial Design 2,\u201d and, in  fact, probably isn\u2019t changing the name at all. While, yes, it\u2019s  definitely a stark contrast to the look of the first paper-y and  shadow-heavy \u201cmaterial\u201d look of the original, most of the underlying  fundamentals here aren\u2019t changing. <\/p>\n\n\n\n<p>Even in the Google I\/O app, it says  that the app <a href=\"https:\/\/material.io\/components\/\">was built with \u201cMaterial Components\u201d<\/a>. I don\u2019t see that changing.<\/p>\n\n\n\n<p>As for the new design\u2019s \u201claunch,\u201d I don\u2019t know if we\u2019ll really see one.  Google might show some kind of demo reel or promo video at Google I\/O  next month, but you have to remember that Google Design is like a  living, breathing organism that\u2019s always evolving.<\/p>\n\n\n\n<p>So to me, it feels  like this is just the latest evolution, and while Google might promote  it as such, I think the \u201claunch\u201d will just be its ongoing rollout across  Google apps and services in the coming months.<\/p>\n\n\n\n<p> Credits: <strong>9to5google<\/strong> <\/p>\n<div class=\"gtech-end-cont\" id=\"gtech-2486697885\"><div style=\"margin-right: auto;margin-left: auto;text-align: center;\" id=\"gtech-4245702368\"><a data-bid=\"1\" data-no-instant=\"1\" href=\"https:\/\/gtechbooster.com\/linkout\/17207\" rel=\"noopener\" class=\"notrack\" aria-label=\"26001\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg\" alt=\"\"  srcset=\"https:\/\/gtechbooster.com\/media\/2023\/01\/26001.jpeg 1024w, https:\/\/gtechbooster.com\/media\/2023\/01\/26001-768x960.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" width=\"500\" height=\"625\"  style=\"display: inline-block;\" \/><\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>You have probably heard of \u201cMaterial Design 2\u201d making a buzz around since February. Whispers have been rallying as far back as early last year that Google was working on a spiritual successor to its Material Design without any solid stance. A brief look back The famed Matias Duarte revealed the first iteration of Google\u2019s [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":4002,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[64,372,6,1612,1611],"class_list":["post-3999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-features","tag-android","tag-google","tag-programming","tag-ux","tag-ui"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/posts\/3999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/comments?post=3999"}],"version-history":[{"count":0,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/posts\/3999\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/media\/4002"}],"wp:attachment":[{"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/media?parent=3999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/categories?post=3999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechbooster.com\/api-json\/wp\/v2\/tags?post=3999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}