Google’s Material Design grows up at I/O — here’s everything you need to know

Material Design has been around for about four years now, and while it has accomplished a lot in unifying the appearance and core functionality of Google’s own apps across its platforms, Google wants to take its approach to design to a whole new level. This year at I/O 2018, Google introduced the next stage for Material Design, and they’re thinking much bigger this time…

The big news is Material Theming

Moving past the strongly opinionated and rigorous guidelines that Google now admits pushed many third parties away previously, they’re hoping that a rethought and powerful new design system that gives developers and designers more flexibility will be much more useful for itself and you alike. That system is called Material Theming, and Google says it’s a superset of what it launched 4 years ago.

So contrary to the very specific look and style that shipped with classic Material Design, Google has instead decided that the way forward is providing the tools and guardrails for developers and designers to create beautiful apps across platforms with their own language. Meanwhile, the Material Design components are still serving as the ideological baseline for the system.

“What Material Theming allows us to finally accomplish is that we have a design system for making design systems, so that anybody, no matter how small a developer they are or how few designers they have, can make a design system themselves using Material as the foundation for that,” Google’s famed designer Matias Duarte said in a discussion with members of the press this week at I/O 2018.

So with Material Theming, third party app developers like Twitter or Facebook or GroupMe or MoviePass (or as Google itself has actually shown examples of, Lyft, Genius, Zappos, and others) can make a Material-based theme for their Android app that fits well with the Android aesthetic. Or perhaps a small, indie developer can use Google’s tools and guardrails as substitute for a corporate design department and use that Material Theming look across all its platforms — Android, iOS, and the web.

Google’s helping you do it

But as mentioned, Google isn’t throwing out all the work they did with Material over the last 4 years. Most of it is sticking around, actually, and Google more looks at this evolution as them building on what they already did and introducing lots of new tools to make Material a reality for everyone.

“Our components are still the baseline of usability. They’re still the fundamental building blocks of the system. And what we’re doing is we’re introducing a slew of things to make this come alive,” Material Creative Director Rachel Been added.

What are those tools? The big thing to know about is the Material Theme Editor, currently available for Sketch, which Google says “helps you … apply global style changes to color, shape, and typography.” Within, there’s a new generative palette creator, typefaces are being opened up (you’re not stuck with using Google’s Roboto font anymore!) and optically corrected for all components, there’s support for symmetric and asymmetric shapes, and there are 3,000 new icons across four new sets.

If you’re already sold and want to jump in, you can get the Material Plugin at Google’s Material site.

And Google itself is doing it

While third-party developers are almost certainly most excited about the new tools and Google’s new approach — seeing Material as a system for making systems — the rest of us are most excited, probably, for Google’s own take on this whole thing. If Google’s going to introduce a system for making systems, then Google should make a system of its own, right?

Yes, and that’s what we — and much of the press — have been calling “Material Design 2” until now. On the topic of the name for the new design for Google’s properties and apps, I thought while we’re here I’d make it clear that it’s officially the “Google Material Theme.” And that makes sense. Google introduced Material Theming, third-parties are making Material Themes, and Google is making its own. Matias touched on this.

“We tossed around a lot of different ways to frame it,” Matias said. “But we realized the most important thing about this release was the separation of style from function. So that ability of allowing developers and designers and craters to make it theirs by theming it, was the thing we wanted to highlight.”

He added, “So the idea of arbitrarily putting a stick in the ground at this I/O and saying that it’s “2” didn’t make much sense. But what actually happened yesterday is that we’re giving the world theming in the same way that Google has put a new theme on material.”

The Google Material Theme has four elements as prescribed by Google: the typeface (Google Sans, which is a size-optimized version of Product Sans), white space (Google’s being intentional about seeing white as a color, they say), colors (the red, blue, yellow, and green you’re familiar with), and focus on elevation (which is basically the main piece that is being retained, stylistically, from the previous paper and ink metaphor).

You can see countless examples of this throughout some of Google’s newest apps, from Google Tasks for Android and iOS to the new Gmail experience on the web, to Google Pay and the Google Home app. Throughout all of these, we get to see this fresh new take on Material to varying degrees, and Matias told us that that’s by design — they’re letting product teams in Google roll it out as they see fit.

If you’re completely out of the loop, you can check out our article from a few weeks ago that details some of the other stylistic elements we’re noticing pop up across Google’s newly-redesigned apps.

But where’s the Material?

There’s one aspect of the new Material that’s confusing a lot of people, and I can see why. The new Material (the Google Material Theme) doesn’t really look like “Material” at all. I got a chance to ask Google about this this week, and they basically said that while, yes, it is clearly stylistically evolved, there are definitely some aspects that are inherited from the last four years of work, most primarily the elevation model.

“I think one of the things is the elevation model, and that materiality of actually having the lighting system that you have with physical materials — how lighting behaves in cast. The concept of varying elevation degrees having different shadows cast is based on materiality and the way space moves,” Material’s Rachel Been told us. “In Google News, for example, we are bringing prominence with elevation treatments. The depth model that’s bringing more prominent things to you is based on materiality.”

Google Material Theme coming… slowly

For some apps, this new look is already here. As you can see in the screenshots above, some of what Google calls its “showcase partners” are already adopting it in full stride. The Google I/O 2018 app, Google Pay, Google Tasks, and Gmail on the web are some of the most obvious examples. Google’s Matias Duarte told us that this is just the first wave, and that we can expect this to be a rolling cascade for the rest of Google’s apps. Gmail for mobile seems to be one of the big ones coming soonish.

What’s next for Material Design

It seems like this is just the tip of the iceberg. Obviously only a handful of Google’s apps have adopted the new Google Material Theme, and only five partners have actually showcased what their apps would look like taking advantage of Material Theming. So we can expect a lot more to come from both Google and the countless third-parties that surely intend to implement this new system.

Google says, too, that third-party response has been very positive, and they seem optimistic that far more brands are going to adopt this system than did Google’s original, more stringent guidelines. Even telling brands to take and customize the previous look, Matias said brands felt like they couldn’t use it because of the style. In contrast, he says the response to Material Theming “has been just unbelievably positive.”

But beyond that, Google told us specifically that they’re going to be releasing a lot of incremental changes and updates and new components throughout the coming weeks and months. Now that the new mindset is out in the open, Google says that development is going to be happening much more in the open too.

“We are moving to a much faster release cadence, so you’re going to see new components, new subsystems being released now that we have reached this milestone. We are going to be doing all this development out in the open and releasing them much more quickly,” Matias told us.