Today, Google announced a major new initiative called Material Theming (read our exclusive on it here). It’s a sequel to its Material Design system that allows companies to easily apply their own colors, typefaces, shapes, and other branding elements directly to an interface in perfect visual harmony.
While Google was building out Material Theming, the company enlisted itself as its first customer. So if you’ve seen initiatives like the new Gmail, you’ve already seen a taste of how Google is using Material Theming to remake its own apps and websites. Google VP of Material Design Matias Duarte walked me through the process the company used to refine own brand using its new tool–and how it applied the familiarity of its iconic primary color logo and Search bar to its many other interfaces and products.
What Is Google? A Logo And A Search Bar
As Duarte’s team reconsidered the company’s visual identity, they realized that its strongest brand anchors were all born from its logo and Search bar.
“We identified four major attributes that we felt were the visual hallmarks people associated with Google. We already had ideas of approachability, and accessibility, and friendliness, but we could create lots of designs that did that and [still did] not quite feel like Google,” says Duarte. “What we learned was it was the extreme simplicity, the amount of visual frequency happening on the image–which is the white space–and the centering as an organizational principle. The typography of the Google mark itself being so strong, and the four colors–not used as a palette, but used together, adjacent to each other like the logo.” The goal became articulating those ideas across Google interfaces at large.
Simplifying Visuals, But With Focus
These brand touchstones play out inside Google’s new material theme, which the company is using to standardize design across its products. To create visual simplicity, Google reduced the drop shadow depth on its interface elements. It’s an effort to use depth more carefully, the way the Search bar does.
“We’ve radically reduced elevation to try to create more white space, and that sense of simplicity. We looked at going completely flat, and we didn’t like how that lost affordance and focus, and it didn’t feel as focused as Google is,” says Duarte. “While Google is simple, it’s focused. There’s a strong sense of this idea of the Search box being a thing you’re going to interact with.” Now, Google “lifts” just one element at a time with drop shadow–like a single column of information in Gmail–to focus the user’s attention on that element, akin to the Search box.
Turning Color Into Action
“Finally, in all our products, we’re applying the four Google colors to bring accent and focus to action. So we’ve created this idea of four color icons, where the icon is made of four colors together,” says Duarte.
In other words, you’ll see a new icon across Google interfaces that’s made up of its familiar logo colors. The idea is to reinforce the Google association by color alone–an early example of this idea is the microphone function, which turns the logo into dots of color to convey that it’s listening. The colors subconsciously cued you to Google’s active presence. “[Color] implies where Google has an exciting action for you to do–that action is a distilled, mini Google unto itself.”