Product Design

Three Important Updates to Google's Material Design

Four years ago, Google debuted Material Design. This design language has since unified the company’s products under a consistent style. It can be seen in everything from Google Search to its new standalone Tasks app.

Recently, Google updated a few products with visual changes and new functionality in the months leading up to Google I/O 2018. The redesigned Gmail web interface and Google I/O 2018 app are two examples. This new style has the fundamentals of Material Design, but with a refreshed look and feel.

The redesign was formally introduced at Google I/O 2018 as Material Design Theming. The updates aim to make Material Design more adaptable, approachable, and able to be customized to brands. These are based on things Google noticed about how Material Design has been used for products and by brands since its creation.

Material Design and its guidelines are a living system meant to evolve. Small updates have been made to the design language over the past four years, but nothing too drastic; just enough to keep them relevant and useful. Until now.

These updates to Material Design reflect how our world has changed since 2014. And they showcase what’s worth considering for the future. In 2018, there are new opportunities and challenges to address through design. Here are a few ways Material Design Theming reflects this:

1. A Refined Color Palette

Material Design is bold, graphic, and intentional. These first two principles can be seen immediately in its color palette. The guidelines originally advocated for heavy use of color throughout Material interfaces. While delightful, this undermined the idea of using color purposefully.

The latest Material Design updates use a lighter hand with color and have more white space. Color is saved for elements that have purpose, making layouts feel more focused. An example of this is in Google’s Tasks app. A clean white background and black text make its single blue button pop. It invites users to “Add a new task” with focus and intentionality.

Tasks Gray-01 Color is reserved to highlight actions in Google’s new Tasks app.

Google has also expanded its color guidelines. They recommend defining light and dark variations of a product’s primary color. The light variation should always be paired with black text, and the dark with white text. These options provide ways to keep color palettes accessible. They account for how color and text might need to be adjusted as they’re used throughout an interface to remain accessible.

These updates show how being more intentional about color and increasing white space can freshen up a design system. They can also make products more inclusive for users. And ultimately, they help designers create more focused, refreshed, and accessible experiences.

2. Embracing Bottom UI Patterns

The Material Design system originally had few components meant to live at the bottom of the screen. This likely reflects the smartphone landscape back when Material Design was created and released. Most smartphones in 2014 had 4-inch screens. There are a different set of things to consider when designing for such small devices. Legibility and making sure buttons are big enough to interact with are priorities.

In 2018, phones are larger and some even have edge-to-edge displays. The average smartphone screen is about 5 inches. Making sure users can easily perform actions on such large devices is a new challenge. The lower half of the screen has become prime real estate for keeping actions within reach for users. It’s no surprise that Google embraced bottom UI in it’s latest updates.

For comparison, last year’s Google I/O app had a filter for the Schedule tab in the upper right corner. It was a stretch for users to refine what events they wanted to view. This year’s Google I/O app has the filter relocated to the bottom of the screen as a floating action button. It’s much easier to access.

GoogleiO Gray-02 Google I/O 2018 app using a floating action button (FAB) for filtering.

The updated Material Design guidelines even feature an all-new component known as a bottom app bar. This new element is intended to display navigation and primary actions at the bottom of the screen. An example can be seen in the Tasks app mentioned above.

While bottom navigation and UI weren’t originally part of Material interfaces, they’re necessary for today’s users. These UI patterns are a way to bring actions right to user’s fingertips. It’ll be interesting to see how Google finds opportunities in its other products for these new elements.

3. Touch-optimized UI

We’ve become accustomed to controlling our phones and tablets with touches and gestures. It was only matter of time before touch screens made their way into laptops and computers.

Many of Google’s Chromebooks now have touchscreens and are taking on more features typical of smartphones. As of recently, Chromebooks are able to run apps from the Google Play Store. This creates new ways to consider how users are viewing and interacting with apps.

Luckily, the latest Material Theming showcases how to optimize UI for touch experiences. For example, interactive components now have increased rounding at the corners: 4dp, up from the original 2dp. This distinguishes cards, buttons, and selected UI from inactive elements.

For instance, take the new Gmail web interface: Gmail web is the first platform to be updated, with the Gmail apps next to get these improvements and more. It features many instances of rounded UI:

Gmail Gray-03 The menu in the new Gmail web interface features rounded UI to show active and tappable UI.

The “Compose” button has a pill-like shape. Its appearance, along with some shadowing, make it feel tappable and active. Below it in the menu, the selected tab gets a highlight that ends with a rounded cap. Carrying this roundness through to the highlight reinforces that this style indicates an active or interactive element.

With touch as a common way of interacting with interfaces on many of our devices, UI needs to be optimized for these experiences. Material Design’s latest updates use style to help differentiate active and static elements. This seems like a step in the right direction to improve interfaces for touch.

Key Takeaways

Material Design was exactly what Google and the hodgepodge world of apps needed in 2014. It defined a set of expectations for making great experiences across platforms and devices. Years later, we have new needs for our design systems. The latest updates to the Material Design system showcase ways we can improve our own experiences to address these needs.

Tweaking colors, embracing new UI patterns, and optimizing for touch are a few things to learn from Material Theming. And there’s much more to learn from the updated Material Design website and wide array of new and reworked apps released at Google I/O 2018.

But of all their latest updates, one of the best might be in a blurb at the bottom of the Material Design Introduction page: here, Google mentions that they plan to keep making updates to Material Theming on a monthly basis. Hopefully this means we won’t have to wait another four years to see where Material Design is headed.

Quiet innovations and a push for mindfulness: Takeaways from Apple’s WWDC 2021 Keynote

From iOS 15, iPadOS 15, and macOS Monterey getting announced to a clear push for...

Read the article