What exactly is this so-called ‘Material Design 2,’ and what will it look like?

If you follow Google at all, you’ve probably heard this “Material Design 2” buzzword that’s been going around since February. At that point it was little more than just number, but as I mentioned, we had rudimentary evidence that there was really something to this. Long story short, we’d heard whispers as far back as early last year that Google was working on a spiritual successor to Material Design, but didn’t have any tangible evidence to back that up.

Now, there’s lots of evidence, enough so in fact that we can start to piece together exactly what it is Google’s doing here. Whatever you want to call it, Google’s reimagining its approach to design, so let’s tear this apart…

A brief look back

The famed Matias Duarte revealed the first iteration of Google’s Material Design four years ago at Google I/O 2014, and it was a remarkable step forward for the company. There was a scattered and chaotic approach to design across Google’s 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.

Since then, Android and pretty much all of Google’s 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. 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.

Just in time for I/O 2018, pretty much all of Google’s 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’s interesting about the Gmail redesign is that it’s not just Material. It’s showing evidence of a new, evolved form of Material that many call “Material Design 2”. Now that Google’s finally caught up, is it really time for yet another change? Kind of.

What exactly is “Material Design 2”?

It’s 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’ve managed to unearth in recent months, people will probably start to be able to really differentiate between what is “old” and what is “new” — because there are some key giveaways. This is what we’re calling “Material Design 2”.

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. Some might argue that it’s not Material Design at all anymore, but before we talk about that, let’s take a quick dive into some of the design concepts that, so far, define this refreshed design.

White space & translucency

One of the most obvious changes with the new Material Design is the abundance of white space, and this is definitely a controversial change. In the many examples of apps that we believe take guidance from Google’s latest internal Material guidelines, like some versions of the Google app Feed, Google Tasks, the I/O 2018 app, and more, there’s lots of white space that seems intended to provide a clean, minimalist look.

There aren’t really any specific examples of this, but it’s rather something that just seems like a common theme among any design changes Google has made to its apps in recent months.

In some places, there’s also signs of translucency becoming more common, with one prominent example being the Pixel Launcher that Google shipped with the Pixel 2. That Google Feed and app drawer are translucent to this day, and we haven’t seen many other examples so far — save for quick settings and app drawer in Android 8.1.

Colorful icons

While not exactly a trend that we have seen elsewhere in Google’s apps yet, I think the colorful icons that Google included with Developer Preview 1 of Android P are worth noting as uniquely new. In fact, there are many elements of the new Settings app that I think are representative of Google’s new Material Design as a whole. You can find rounded corners throughout the app, there’s bits of Google Sans, and Google is embracing brighter colors generally.

“Google Sans”

Another aspect that is becoming more and more obvious, at least among Google’s first party apps that we’ve seen so far, is the adoption of “Google Sans” as a font for headers — but notably not as a complete replacement for the long-beloved Roboto. Basically, Google Sans is a version of Product Sans (Google’s proprietary font for its namesake logo and other product logos) that it’s been using across some web apps and pages, and lately, its Android apps.

Google uses the new font on its recently-refreshed Wear OS site, 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’m probably not yet aware of.

Rounded corners

Next up is the abundance of rounded corners — 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’s apps and has found prominence in its most recent designs. One of the most obvious places to see this is in the Google Feed, but it’s also readily apparent in the Google Tasks app, Google Pay on the web, other pages in the Google app, and elsewhere.

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.

New rounded tab indicators

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. Well, in recent “Material Design 2”-adherent apps, we’re seeing a brand new tab design pop up that brings rounded corners and doesn’t cover the entirety of the tab.

So far, we’ve 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’t 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.

There are two interesting things to note here. First, none of the examples we’ve 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 — and they are swipeable. So don’t get worried, yet!

Rounded selection highlights in menus

Another common theme we’re seeing in apps presumably built with the new guidelines in mind are these new rounded selection highlights in menus. For example, in the left-most screenshot below, there’s a menu that’s 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 on Google Pay on the web and the background picker in Chrome OS.

BottomAppBar will be big

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’m told by a source that the BottomAppBar that was added to the Material guidelines alongside Android P is going to be a critical piece of this new refreshed Material.

There’s 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.

I’m told that these BottomAppBars are going to come to the majority of Google’s first-party apps where applicable.

Conclusion: Name? Launch?

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 “launch”.

First, on the topic of its name, I’m told by a source familiar that Google isn’t actually going to call this “Material Design 2,” and, in fact, probably isn’t changing the name at all. While, yes, it’s definitely a stark contrast to the look of the first paper-y and shadow-heavy “material” look of the original, most of the underlying fundamentals here aren’t changing. Even in the Google I/O app, it says that the app was built with “Material Components”. I don’t see that changing.

As for the new design’s “launch,” I don’t know if we’ll 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’s always evolving. So to me, it feels like this is just the latest evolution, and while Google might promote it as such, I think the “launch” will just be its ongoing rollout across Google apps and services in the coming months.