advertisement
advertisement

Exclusive: Material Theming Is Google’s Ambitious New Design Tool

Google is evolving its landmark Material Design philosophy–and making it easier for everyone to use.

Exclusive: Material Theming Is Google’s Ambitious New Design Tool
[Image: Google]

Today at Google I/O, the company revealed a major overhaul of its Material Design language with a new tool called Material Theming.

advertisement
advertisement

Material Theming, on the most basic level, is a plugin for the popular prototyping app, Sketch. It lets designers add an exponential amount of variety to their work while still utilizing Google’s existing design system. App designers can use the plugin’s simple tools and sliders to customize their own work, from creating new kinds of buttons and applying custom colors with ease to importing any typeface and scaling it perfectly. Along the way, Material Theming will balance all of these discrete elements automatically, so everything is legible and nothing looks too tacky.

[Image: Google]

Such changes might sound minor, but they inject new flexibility and personalization into Android apps, websites, and even Material Designs imported over to iOS. That’s key, because Material Theming is designed to address Material Design’s biggest flaw: That it became monotonous. It was sometimes hard to tell one app’s design from another. Everything felt like Google, no matter who made it. The Material Theming plugin allows “Google to look different from developers,” acknowledges Matías Duarte, VP of Material Design at Google. “But it is very much two sides of the same coin. So for developers, I think it’s important they feel excited to take what they can do to make Material Design theirs.”

Material Design can now look earthy and crunchy when applied to a vegan blog, or borderline gothic for a digital newspaper. It can be coated in millennial pink for a retailer, or pop with the bright, electric colors of a social media platform like Snapchat. And the variety will only compound, since Google plans to build out Material Theming with regular monthly releases. We’ll soon see options for adding animations, depth controls like drop shadows and strokes, and even new materials for the interface–perhaps adding glass, cloth, or wood.

Crucially, Material Theming is simpler to implement than Material Design has ever been, too. The plugin uses an algorithm to make your design legible and tasteful as you customize its pieces, ensuring that each component complements the other. These components are more turnkey, too; as long as you’re working in Sketch, they’ll copy themselves across all of your platforms, whether that means an iOS app or website.

In short, Google is transforming Material Design from what many considered a rigid set of guidelines into a more usable tool. Think of it as an algorithm-powered autotuner for app design.

[Image: Google]

Material Design’s Two Big Problems

Google’s 2014 introduction of Material Design became a landmark moment for the company. It was the first time that Google made an earnest attempt to unify all of its products with a common thread–the high-minded philosophy that a user interface should be treated as a tangible object, like paper. It actually took about four years for all of Google’s services to adopt Material Design, but the response has been a win for the company. Developers implemented Material Design across millions of apps, while Google earned a reputation as a company that gets design every bit as well as Apple.

advertisement

However, Duarte is the first to admit that Material Design is still far from perfect–and he realized it pretty quickly after launch. “We heard it loud and clear in the first two years,” he says. “Then we’ve been working on this for two years, and the drumbeat has only gotten louder.”

As Google sees it, there are two flaws with Material Design. First, while the company offered a lot of documentation on the design, many rules and interface elements were difficult for developers to implement. Google hadn’t made Material Design something that could just be dragged-and-dropped into an app at launch, and as a result, there was a surprising amount of disparity–Google counted 3,000 different versions of the core “action button” that developers had made on their own, with varying sizes and drop shadows. Keep in mind, the action button is just a round circle with a plus sign on it! And yet, at scale, implementing it was a mishmash. As direct as Material Design seemed, every developer had their own interpretation.

[Image: Google]

Secondly, Google heard from developers who were worried that they might choose an errant color or typeface–they didn’t feel free, or confident, to customize Material Design. As a result, Material Design quickly became stale, predictable, and monotone. Developers looked like Google. Google looked like developers. These brands were not their own.

“Famously, I got in trouble giving grief to another company for saying their UI language looked the same, and a few years later, we got into the same problem with Material Design!” laughs Duarte.

[Image: Google]

Material Theming

The core idea behind Material Theming is the ability to tweak the color, typography, and shape of your design through simple tabs and sliders in the Sketch plugin the company is releasing today. The changes you make actually influence one another thanks to an algorithm Google developed that essentially puts good design on rails. Then, everything you design is annotated and linked to Google’s Material Design library on Github for developers to easily code.

[Screenshot: courtesy of the author]

“You don’t need to understand it,” says Duarte. From the looks of Material Theming, he’s right. You can choose a color–or two or three–that you would like in your design, and the plugin’s Theme Editor will create an entire color palette from them, assigning the right colors to the right spots to ensure that typefaces or buttons aren’t presented illegibly against the backdrop. (Anything suggested that you don’t like can be easily changed.) Likewise, by editing shapes you can make elements like your buttons more polygonal or rounded. “You can express shapes that aren’t just geometric, but organic and more mechanical,” says Duarte. Meanwhile, the Theme Editor will make sure that your wild geometry doesn’t break an animation or cut off necessary text.

advertisement
[Screenshot: courtesy of the author]

In terms of type, Material Design originally launched with default support for Roboto–Google’s own typeface. Now, the Theme Editor allows you to import any typeface from your computer right into your app, and it will scale it appropriately for use in headers and body copy.

Typography, color, and shape all constitute what Google calls “systems” inside Material Design. Your own design decisions constitute the “theme.” Together, they feed into a rooted system of logic that seeks to turn any developer into a good designer. Of course, whether the logic is good or not will be open to interpretation, but Google’s algorithm is tuned to prioritize some pretty basic rules for legible graphic design by default.

When I ask Duarte what happened to all the promised “materials” in “Material Design”–in 2014, he teased that Material Design was starting with paper as its core component, but would quickly diversify to include alternatives like cloth or wood–he laughs and hints that much is still to come from Material Theming. “A material would be a very nice system, wouldn’t it?” he says. Google isn’t announcing any new materials today, but it’s easy to see how the company could fit them into Material Theming as another customization option.

[Image: Google]

“The basis of that logic is understanding what is the component and its intended purpose? How prominent do its features need to be? All of the fundamental usability we try to make fixed about each component, that’s the true logic,” says Duarte. “Then everything as to how it looks and presents itself, we try to sheer off into a theming system, starting with color, shape, and type.”

Note that Duarte said “starting with color, shape, and type.” In fact, these systems are only the beginning for Material Theming. Every month, Google will release new content for theming, including entire new systems. “Animation could be a system,” says Duarte. “[Another] we’re talking about is stroking and shadowing. The whole lighting and shadowing model is a system. You might say, ‘I want to live in a world with a lot of shadows,’ or ‘a world that’s soft and organic,’ or, ‘I want to live in a world that’s flat.'” In response, Theming would deploy drop shadows or strokes appropriately.

[Image: Google]

Better Design Through Algorithms

When talking to Duarte about the potential of Material Theming, it can sometimes be difficult to separate the design theory from the shipped product. Today, Material Theming will easily copy your favorite typeface around your app in colors that look great. But Duarte constantly alluded to a more nebulous idea, like Theming allowing you to create moments of focus and attention–of being able to emphasize or de-emphasize a button–or just create a visual world that feels right for your brand.

advertisement

These are challenges that are difficult for human designers to solve, much less an algorithm. Yet that’s the ambition of Material Theming. Based on my conversation with Duarte, I could imagine how the Material Theme editor of the future will let me say to my computer, “No, no, this is the most important button in my app–make it look that way” or “I want the user to feel calm when they load this” or every designer’s favorite client request: “Just make it pop.”

If Material Design was the philosophy that explained the entire metaphor of Google’s ideal user interface, then Material Theming may be the tool to master that metaphor through a series of nudges and grunts.

advertisement
advertisement

About the author

Mark Wilson is a senior writer at Fast Company. He started Philanthroper.com, a simple way to give back every day.

More