What makes a product look and feel unique? And how do you communicate that identity to the people on the other side of the screen. At Google, we make hundreds of digital products under the same colorful, quirky logo. And while Google’s brand has evolved and changed over the years, design remains a common thread tying together our varied constellation of apps, services, and technologies. With the launch of Material Theming – our end-to-end capability that allows teams to easily and systematically express a brand’s unique identity – design details, like type, shape, and color can be baked into custom Material themes and applied easily across a digital experience. We’ve built the Google Material Theme to express what makes Google uniquely Google. Details like the use of white space, the four Google colors, and our custom typeface, Google Sans, work together to convey a familiarity and trust to our users. Our theme gives Google apps a new, modern interface built with all the best practices of Material Design, but customized and adapted so that every part of the UI works together to serve that product’s function.
A number of product teams, including Gmail, Google News, Google Pay, and Google Home, helped define and test-drive the Google Material Theme. The redesigned interfaces for all four products launched recently, and we’ll be rolling out even more refreshed Google experiences in the coming months. Anyone can use Material Theming to make their product stand out, from a small startup to a large company with a diverse set of apps. Learn from our experience developing and applying the Google Material Theme to better understand how you can use themed components to create a shared, expressive brand experience that’s flexible and uniquely yours.
Gmail: Using color to focus on content
“Gmail is a challenging product to design because there are so many users – 1.4 billion – and such a breadth of ways that people...
“Gmail is a challenging product to design because there are so many users – 1.4 billion – and such a breadth of ways that people use it,” says Gmail’s lead designer, Jeroen Jillissen. “It’s a productivity tool, and you never want to break people’s workflow.” Gmail’s design team approached the app’s recent redesign with a clear goal: keep the focus on content. The Google Material Theme helps support user attention and productivity, as people tailor their email experience through density, labels, and inbox organization.
Color proved to be a key technique in directing a user’s attention to important messages and actions in the refreshed interface. New emails turn the inbox label an eye-catching red, while intelligent features like nudge and smart reply appear in shades of orange and blue respectively. The new extended FAB sits prominently at the top of the navigation drawer, to focus attention toward one of the product’s primary user actions: composing new emails. The use of elevation and a responsive layout grid also contribute to the revamped user experience.
Updated guidance on the responsive layout grid allowed the designers to pare down layers of legacy features while introducing multiple panes of content in a collapsible, left-side navigation, as well as a new right-hand panel providing quick access to Calendar, Tasks, and other multi-tasking features.
Related: The color system
Google News: Designing an AI-powered experience
“Machine learning is not a replacement for design, it has to operate in service to the overall experience,” says Google News lead designer Tae Wan...
“Machine learning is not a replacement for design, it has to operate in service to the overall experience,” says Google News lead designer Tae Wan An. “The experience itself must communicate the benefits of AI in the product.” For the creators of Google News – which uses artificial intelligence to curate journalism from around the globe – that means relying on visual clarity and content hierarchy to help introduce new concepts to the user.
Typography plays an important role in visually supporting the app’s information hierarchy, drawing the eye to important headlines. Material’s typographic scale allows for 12 different type styles, optimized for legibility and systematically applied throughout an interface from button labels to body copy. Google Sans is the display font of the Google Material Theme, and is used to feature important headline text across all of Google News’ platforms. The body text for articles is displayed in platform-native typefaces to maintain visual continuity on a specific device or operating system. That means reading articles in Roboto on Android and the web, and in San Francisco on iOS.
Related: The type system
Google Pay: Using shape to express friendliness
“Users might be nervous about interacting with digital payments, so anything we can do to make it feel approachable is something we’re conscious about,” says...
“Users might be nervous about interacting with digital payments, so anything we can do to make it feel approachable is something we’re conscious about,” says Google Pay’s lead designer Seth Hamlin. The concept of making digital payments is still relatively new, so the team wanted to use playful imagery and friendly rounded shapes to communicate an approachable vibe. At the same time, the recognizable details of the Google Material Theme signal familiarity and help generate trust.
The Google Pay app also uses shape in an expressive way – echoing the playfulness of the Google logo through round-cornered cards and circular avatars. Custom illustrations draw focus and communicate core concepts in a clear way.
Related: About shape
Google Home: Creating a delightful onboarding experience
“Our challenge was to avoid an overly cloying and optimistic tone of ‘awesome, everything is done’ throughout the onboarding flow,” says Triona Butler, lead designer...
“Our challenge was to avoid an overly cloying and optimistic tone of ‘awesome, everything is done’ throughout the onboarding flow,” says Triona Butler, lead designer for Google Home. “There are many steps a user has to go through before they reach a success state, like playing a song on their device.”
Onboarding is an important part of any app, but for Google Home, it’s unmissable. Users must move step-by-step through the process of connecting to their Wi-Fi network and setting up their device in order for the experience to work. Google Home’s design team helped make the onboarding a delightful, visually engaging experience with colors and animations aligned to the Google Material Theme. Because the eye is naturally drawn to motion and vibrant hues, these animations proved to be an effective technique for encouraging users to make it all the way through device setup.
The onboarding animations use Google colors to guide attention and create a coherent flow. Abstract metaphors help communicate complicated technical steps in a user-friendly way. Balanced imagery means success, motion cycles mean processing, and collapsed ‘blocks’ indicate a failure state.