How Google Designers Adapt Material
Material Design provides a set of tools and guidance to help you make informed decisions about the different UX design directions you could take when creating an app. But what happens when the guidelines don’t fit your product needs? And what happens at Google when a designer is working on a product that doesn’t quite fit the guidelines?
The Material guidelines adapt. In this article we’ll look at two Google apps — Keep and Inbox — to understand how they not only bend some of the rules, but how they help shape the Material Design guidelines as a whole.
Inbox: Exploring the typographic grid
Designing a new email web application is an extremely ambitious undertaking at Google, especially when it appears alongside an established product like Gmail. The Inbox team set out to create a denser UI as well as a unique user experience and brand identity while playing by the new Material Design rules. While the Inbox design team was putting together their initial designs, Material Design was still being developed. This presented the team with a great opportunity: The potential to establish what the Material Design web standards could be, while solving the problem of designing for dense UIs.
Designing dense UIs
The initial design for Inbox wasn’t flexible enough, as the grid only had space for seven emails on a 13-inch screen. This was far too small when compared to Gmail, which could show 16-20 emails. Tim Smith, Visual Design Lead for inbox explains:
“If you open Gmail and Inbox side by side, there is a big difference in visual density. This also turned out to be one of the greatest challenges; finding the ideal balance of content and breathing room.”
By making adjustments to the grid, row heights, and how type presented, Inbox managed to set a design standard for dense web UIs and display 12–17 emails, each inside a Material Design card. The font size and interface were also designed to change and adjust to a person’s device. For example, the subject line in an email will increase in font size depending on an increase in screen size.
Using colors, imagery, and icons to give context to the user
Inbox’s visual distinction from Gmail was handled by their use of header images, which relate to the content within bundled emails. If someone using Inbox plans a trip to the New York City, for example, they’ll be shown an image of the Manhattan skyline. Inbox also uses a vast array of icons in a left navigation drawer that are colored according to their function in the app. For example, when a user clicks or taps the green “Done” button, the background color of the header bar also changes to green, keeping the user informed of the change and context.
This use of contextual imagery is another defining characteristic of Inbox’s distinct brand experience.
Designing a header bar for the web
Another challenge for the team was the design of the app bar. The initial proposal was a variable header that didn’t stretch to fill the full browser window, but instead matched the width of the content.
“We worked through about a dozen different variations of this concept until ultimately landing on the full width header bar you see today. We also worked through several prototypes to determine the best search field styling.”
Tim Smith, Visual Design Lead, Inbox
Since the cards in Inbox expand and contract, this meant having to adjust the header every time the user interacted with an email. The app bar also contains a search field and a menu that displays other Google apps. This approach lets Inbox remain responsive without complicating the interface.
Keep: Adapting navigational patterns
Keep is a cross-platform, note-taking application that expands and collapses Material cards on screen to focus a user’s attention while adding notes. A modified bottom navigation bar also lets people create a new note quickly with a single tap.
Encouraging actions with empty states and motion
Empty states typically occur when there isn’t any content to show to the user. Keep uses this design pattern by giving people a blank canvas on which to draft their thoughts. The spareness of the UI encourages the user to explore different elements in the app bar search, which expands to reveal icon filters; a sorting menu that allows users to toggle between list view and grid view; and a left navigation drawer to adjust the app’s main settings. The cards expand and contract to give users context.
“Motion is something we have put a lot of effort into — from the way notes animate into the stream view, to the way they transition when you open and close them.”
Genevieve Cuevas, Software engineer, Google Keep
Using the right Material patterns for your app: bottom navigation vs. FAB
When redesigning the app, Keep’s team of designers and developers pored over the Material Design patterns and ended up applying components like cards which help distinguish notes from one another, a left navigation drawer that makes settings for the app easily available, and contextual menus that change to fit the context of each note — like a note with checkboxes displaying a menu to check all items in a list. Combined, these different design patterns create a clean and functional user experience that adapts depending on the context and needs of the user, a key factor in Keep’s simplicity and easy-to-use interface.
During the redesign process, the Keep team experimented with some of Material’s core navigation by testing an expandable FAB in lieu of the existing bottom navigation. For context, the bottom navigation offered a simple one-tap call to action to create new notes. The new FAB required two taps: one to expand options, and a second tap to create notes.
“When we launched the FAB, some of our users complained about losing the one-tap create note behavior.”
Genevieve Cuevas, Software engineer, Google Keep
This change seemed regressive to people who previously used the app and were accustomed to single-tap navigation. Keep’s journey, testing out and ultimately abandoning core Material components like the FAB, stands as a great example of choosing the Material guidance that works best as opposed to shoehorning behavior that doesn’t fit the product.
Guides not rules
Both Inbox and Keep teams utilized the Material Design guidelines, using them to help design and develop their applications. When they came across a use case that didn’t work for their product, they adapted their designs accordingly. Material Design offers a lot of guidance, built on years of UX experience throughout Google, but it can’t cover everything. Hopefully these examples above show that you can adapt it to suit your needs while still conforming to the overall spirit of the guidelines.
