Homepage Redesign

Material Theming was announced in the summer of 2018, and Material.io was redesigned to provide an expository view about the newly introduced concepts and tools. As time went on, it became clear that users found the existing homepage irrelevant and guideline writers became frustrated by it's lack of flexibility and ability to feature new additions to the guidelines.

I designed an update to the homepage that was succinct in expressing Material Design's core ideas and flexible enough to feature new content with each new release of the guidelines and documentation.

Before

After

The homepage redesign features a succint header with links to getting started content and a set of cards which provide shortcuts to different content around the site.

Illustration as Wayfinding

Users on Material.io consist of both designers and developers but also hybrids, individuals who have a holistic understanding of design and development. Material Design serves each of these user types by providing a wide range of content: design guidelines, development resources, and interactive tools or resources.

I created a illustration system to represent each of these content types, and to provide a method of wayfinding around Material.io via illustrative thumbnails.

Design

Design illustrations takes cues from design tools, and the magic that occurs on artboards with the help of blue, purple, and red mensural tools like guidelines and bounding boxes.


Development

Development illustrations use color palettes often used in code-editors and are based on the mythology of "terminal green".


Resources & Tools

Tool illustrations look to the products they are expressing and emphasize trademark UI elements such as Gallery's commenting feature.


Live Component Demos

Designed the original concept to place live component demos on Material.io. Demos would include code snippets, design assets and theming options. These concepts led to demo implementation across component articles on the site.