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.
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 catalog
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.
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.
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.
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