Material.io
Product design
Visual design
Art direction
Design systems
Lead visual design for a redesign of Material.io, Google’s core public offering for design guidelines and best practices. This refresh featured Material 3, a new, iconoclastic approach to UI design that balances spirit and usability. The design demonstrates how Material 3 principles can be extended to solve product-specific use cases, in this case, a rich library of information to help designers and developers build beautiful products.
Pages on Material.io are dynamically colored to represent a core feature of Material 3 & Android using a set of beautiful imagery as their base.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.Small, iconoclastic motions details such as image-rich hover animations invite the reader to engage with guidelines in a visually expressive way.Guideline details like Do’s and Don’ts were redesigned to be more color-blind friendly.Imagery assets like component catalog examples react to dark or light modes.
Collaborators —
Kunal Patel
Nicole Liao