Magic, utility, and redesigning Material.io

I often tell people that I am the design lead for Google’s design system “textbook”. Material.io is the online textbook where readers learn, discover and reference design guidelines and is the core of Material Design’s public offering. It contains a trove of specialized information about digital product design, written by a group of the smartest and most creative people I have ever met.

In 2021, Material Design 3 was introduced with an iconoclastic approach to visual expression and inclusive perspective on usability in digital products. In October of 2022, we launched a redesigned Material.io which reinforces Material Design 3’s balance between spirit and usability.

For this refresh, the Material.io team showcased new features and components while also demonstrating how Material 3 principles can be extended to solve product-specific use cases, in our case, a rich library of information to help designers and developers build beautiful products.

Click here to check out the new Material.io

Connecting imagery, dynamic color and guidelines

Dynamic color is a tentpole feature of Material You, a subset of features of Material Design 3 that make digital products feel personal based on a person’s device wallpaper or preferences. When designing for Material.io, we considered how we could showcase dynamic color and the new color system while still maintaining the site’s use-case as a reference material.

To achieve this balance, we implemented a sub-feature of dynamic color called content-based dynamic color to modify the colors of Material.io’s UI. This is similar to dynamic color, but instead of relying on personal preferences we relied on a beautiful set of imagery ranging in style, color and subject matter. These images were commissioned by Oddfellows and Jamie Chung and are styled specifically to compliment the diagrammatic and UI example images found across the site.

The dynamic color transformation creates a holistic visual experience by having the site reflect the content a reader is consuming, and demonstrates Material Design 3’s new color system which uses a unique palette of tones and compliments.

Component guideline articles are considered the bread and butter of Material Design’s offerings on Material.io. With that in mind, the team wanted to bring the content-based dynamic color story into the reading experience of articles. Following the same theme categories as the component catalog, each component’s article assets are themed accordingly, and Material.io’s UI transforms to reflect that.

Component catalog

A beautiful example of combining imagery, color and utility, the component catalog page assists readers in finding the best component for their use case. Component cards are organized into categories based on their function, and each of these categories has a unique theme color to showcase how the new color system applies to different components.

When a reader hovers over a component card, a beautiful background image appears, and the card’s colors transform to match that component’s theme. Giving the reader a sense of energetic power, this interaction begins to establish the connection between color and imagery that is a trademark of Material You.

A highly requested feature from Material.io readers was support for dark mode, and we thought we could take the request and push it a bit further. Each of the component catalog images (along with header images across the site) also respond to dark and light mode, transforming to reflect a reader’s preference while also demonstrating Material Design 3’s support for a dark context.

Wayfinding and navigation

When designing for print, the designer is primarily concerned with one interaction: the turning of a page (sometimes supplemented by cross-referencing of indexes, footnotes and glossaries).

In digital products like Material.io, information is inherently hidden behind more complex information architecture, and the user has to perform a number of gestures or actions to reveal it, this is magic. To help readers perform this spellwork, we wanted to provide a consistent wayfinding experience to help them find what they are looking for.

The consistent visual treatment of Material.io’s navigation components establishes a functional gestalt through shape and color, signaling to readers that these UI elements are part of a family, and they share a function in helping them traverse the content on the site.

We combined the new navigation rail with the navigation drawer using a simple hover interaction which gives readers a sense of ergonomic speed and quickly provides an overview of the site’s content with relative ease.

Tabs allow readers to switch between different pages of an article on Material.io. We took the opportunity to create custom tabs to align with other navigation elements and express Material 3’s shape language.

A tertiary form of navigation, the table of contents component allows a reader to traverse up and down an article page. A notable addition to this component is the generous article title, giving readers persistent context for what article they are currently referencing.

Marginalia

Marginalia, a beautiful word I learned not too long ago from a colleague which is used to describe elements found in the margins of a page. When redesigning the article experience for Material.io, the team considered some of these small, sometimes invisible details of the reading experience such as bullet points, semantic colors and list numerals.

We redesigned Do and Don’t labels that avoid the semantic use of red and green, and instead used blue as the affirmative color. Nearly 10% of people struggle with red-green colorblindness (including myself). With that in mind, and with the assurance of 3 signifiers: text, icon, and color, we felt confident in making the call to depart from typical affirmative and negative semantic colors.

Material 3’s shape story is dotted with the use of highly expressive “cookie” shapes, as the team likes to call them. Applying these shapes to bullet points at such a small scale, and randomly rotating them with some simple CSS provides a sense of understated iconoclasm, pushing visual expression for the sake of expression, rather than strict utility.

Expressing spirit through motion

From full-screen page transitions to navigation component animations, the new Material.io expresses an energetic spirit through its motion, from changes in pixels to entire views.

Top-level pages use a vertical slide transition, to reinforce the vertical nature of the navigation rail and drawer. Whole page transitions provide a sense of speed and cohesion by animating an entire page and its elements together, rather than having them load piece by piece.

When navigating between article tabs the view transitions using a lateral slide transition to reflect the horizontal layout of the tabs.

Variable Google Sans and Symbols

Variable fonts and symbols allowed Material.io to implement them in a way to supplement states, providing distinct visual signals for interaction.

Material Symbols are a new set of variable icons from Google Fonts that feature weight, grade and fill axes. Rather than relying solely on color to indicate state change, readers are also given the visual signals of icon weight and fill. Icons react by increasing in weight while hovering and decreasing in weight upon press; this again again provides a sense of magical energy and utility. For navigation components, icons become filled when an item is selected.

Similarly, we implemented a variable version of Google Sans and utilized its grade axes to add another signifier to component states. By using grade rather than weight, text strings don’t become longer and remain the same width as it’s default state.

As the Material.io design team, our goal is to represent the incredible work that Material Design does at Google as best as possible. So many incredible people are behind this work and it is a pleasure to act as both a steward and a catalyst for one of the most prevalent design systems in the world.

Click here to check out the new Material.io

To more systemagic,
David Allin, on behalf of the Material.io team