Jan 27, 2022

How Oddfellows Illustrated Material You

Explore (and download) the new illustrations that bring the Material Design 3 site to life

Posted by


If you’ve spent time getting to know Material Design 3, you’ve probably noticed a few new images in component articles, system guidelines, and feature overviews.

In the run-up to the introduction of Material You, the Material Design team partnered with creative agency Oddfellows on a brand-new illustrative system that would bring the concepts behind Material You to life, allowing our “spec” site to be as spirited, expressive, and iconoclastic as the system it documents.

Recently, I had the chance to chat with the folks from Oddfellows who led the project, digging into the work that goes into creating a new illustrative style that ties into the spirit of Material You as an adaptable, personalized design system.

Material You was a “permission slip to create art that was a little weird and unconventional,” according to Oddfellows Creative Director Jarratt Moody. “People are complex and varied in their taste and expression and Material You is intended to be accepting and inviting to everyone. Instead of aiming for a one style fits all universal appeal, we found that personal and original work connects at an emotional level.”

Four distinct styles comprise the Material Design 3 illustration system

To that end, the illustrative system is actually comprised of four distinct styles developed by the team (internally named Ambient, Handmade, Modern Folk, and Sci-Fi) that feature different, highly textural elements. Across the styles, we can see brush strokes, stippled effects, suggestions of ink wash, and even hints of paper or layering.

When tasked with harmonizing such a diverse set of styles into one system, Art Director Yuki Yamada explains, “there was a struggle at first to unify the styles, especially when they all came together in one page. Each style could live on its own very nicely but started to fight once brought together. The solve was with color unification and simplification. Once we switched over to the … Material Design palettes, things were starting to harmonize. And then it was a matter of simplifying object count and details until they all clicked in place.”

Example color swatches

The colors Yamada mentioned, that served as the basis for the illustrative system, reflect a set of color palettes developed alongside the Material You approach to color extraction and palette creation for interfaces seen in Android 12. The color palettes, which – along with others – were used in mockups and test interfaces internally, left their mark on the Oddfellows illustrations, proving the durability of Material’s nuanced, algorithmic approach to palette generation.

Illustrations used for header backgrounds support the contrast requirements for black text

The Oddfellows team used these color palettes to develop illustrations that worked well with one another while also providing functional value as containers for titles or interface mockups. Designer Marc David Spengler noted the importance of “creating a harmonious overall” approach to color: “An important part of my work is to create harmony. Not only in composition but also in color… As the work is made mostly for backgrounds it was important to make it decent and to avoid hard contrasts.” Illustrator Ariel Davis developed a similar approach, “drawn to colors that followed the same idea – greens and yellows for organic shapes and blues, grays, and black for sharper pieces,” using color to “create different moods for different environments.”

Creative Director Jarratt Moody adds, “At times, we add hints of a different palette so there are some common threads to follow when styles live together on a page. Most compositions have lighter pastel areas for the legibility of black type.”

The illustrative style also needed to function as a broader system, allowing for the creation of more assets in the future as Material Design 3 continues to expand. Designer Marc David Spengler focused on creating a visual language that “functions as a kind of building system. Each of these forms has different characteristics that can be rearranged according to requirements.” Illustrator Yuki Yamada emphasized that the system was built “to allow post-design changes for better adaptability and better results as a whole.” Illustrator Ariel Davis found it “interesting open ended challenge,” adding, “it made me problem solve the imagery in a different way where I ended up creating many spot images that could be mixed, matched and placed wherever they needed to go.”

Seeing the final illustrations in-context on the Material Design 3 site, the team still feels the unique expressions they each brought to the project, keeping with Material’s core belief that design is, above all else, personal. Art Director Yuki Yamada sees “a lot of me built in here and there, especially in the construction of the system,” while Illustrator Ariel Davis says, “the colors and subject matter I'm drawn to are a reflection of my personal interests and taste. It feels good to be able to see myself in work used for a broader purpose or a large group of people.”

For Creative Director Jarratt Moody, “It’s exciting to let the work go at the end of the project, and watch it become something else… The work can stay alive that way, and I hope it gives inspiration to designers that are involved in the future to contribute something instead of pulling from a locked set of assets.”

link
Copy link Link copied

Download

The new illustrations Oddfellows developed for the Material Design 3 site will feel at home on your own device, and with Android 12 you can experience the color palettes that inspired them. Download your favorite images to use as a wallpaper below.

Desktop | Mobile

Desktop | Mobile

Desktop | Mobile

Desktop | Mobile