Celebrating the product teams that bring Material to life

Announcing the Material Design Award Winners for 2020

It’s time once again to celebrate the product teams who used ingenuity and creativity to bring Material to life. The Material Design Award winners serve as great examples of Material Design in action, using the system as a flexible, customizable foundation for beautiful, usable experiences.

This year’s winners were selected from hundreds of open nominations, across three specific categories: Material theming, motion, and dark theme. They’ve each adapted Material in meaningful ways – from designing a gentle app for those living with epilepsy, to building a comprehensive approach to color, imagery, and components that helps users navigate an online store with ease.

Read about each of the winners below, and stay tuned for more in-depth content on how each team created their award-winning experiences.

Material Theming Winner: Moooi.com

In keeping with their namesake, the Dutch word for "beauty," Moooi focuses on aesthetic fundamentals to create an immersive experience for their digital flagship. As purveyors of design-forward lighting and furnishing, they work with full bleed color, typography, and scale, using a number of reusable components to balance expressiveness and practicality.

Large, graphic headlines and body text set in Sang Bleu are complemented by body text set in Gill Sans. Choosing two large type families gives Moooi’s type system a broad expressive range for conveying product information, site navigation, and editorial headlines across the site.

Moooi’s approach to color is restrained—moments of full-bleed color blocking are used to indicate where a visitor is within the site, and the simple palettes of taupe, white, and black are mirrored by immersive imagery that introduces products and collections. The homepage is led by a dark background and immersive imagery, transitioning into lighter backgrounds and images as one continues down the page.

Underpinning Moooi’s approaches to typography, color, and imagery, a series of reusable components allow users to confidently navigate the site and perform actions like filtering and reviewing product specifications.

We can't highlight Moooi's application of Material Theming without commending them for their accessibility effort. They are using accessible color contrast between text, iconography and background colors, and have invested in a multimodal approach that uses clear hierarchy and semantics which allows users to navigate with their keyboard or voice to move through the site.

Material Motion Winner: Epsy

For an app whose aim is to better the lives of those living with epilepsy, Epsy uses motion meaningfully, guiding users through critical tasks to better their quality of life, like logging triggers, taking medication, and building community connection.

Motion serves a clear purpose in Epsy, and is crafted with care and restraint; from gentle inter-screen choreography to custom animated progress indicators and icons in the bottom navigation bar.

Most animations in the app use longer timing to impart a feeling of calmness and ease. Typically utilitarian elements and features like a calendar grid that might otherwise feel clinical instead become more engaging and meaningful with motion.

These touches don’t just help to guide users toward more confident mental models when navigating the app – they provide subtle encouragement to continually take actions that help power the experience. Epsy’s thoughtful application of motion design facilitates a richer environment for keeping record of an individual’s experience with epilepsy, aiming to help create better outcomes outside the digital environment.

Dark Theme Winner: KAYAK

KAYAK has taken their comprehensive price comparison and travel booking experience to the next level by translating their brand into a dark theme, using subtle but intentional applications of color. Their unique orange brand color is used sparingly to give prominent elements, such as their most important navigation icons, top hierarchy, leaving the majority of space dedicated to dark surfaces. KAYAK’s custom dark background mixes in a hint of blue that works in harmony with secondary blue accents found throughout the app.

With the use of the dark blue-grey surfaces - rather than pure black - KAYAK is able to retain the same elevation model across light and dark themes. The higher their surfaces are elevated, the closer they are to an implied light source, which is displayed through a subtly lighter surface color. KAYAK’s dark theme also accurately renders cast shadows in a dark environment – they are still dark. The surface is dark enough to display light text on their highest and lightest elevated surface, maintaining accessible color contrasts throughout.

KAYAK has taken a considered look at the various needs and experiences of the people using their product, and integrated those considerations directly by making dark theme a pivotal part of their redesign.