Dec 16, 2021

Material Design Award Winners 2021

Learn from three product teams creating great experiences with Material

Posted by


Each year, the Material Design Awards celebrate product teams and creators creating great experiences with Material. The awards showcase the ways teams are using the system as a starting point or solution – the solid, research-backed foundation on which to build innovative interactions, meaningful moments, and entire expressive environments.

This year, we received and reviewed hundreds of open nominations from teams and individuals around the world. We asked for the very best examples across three specific categories: large screen adaptation, dark theme, and motion design.

Our winners for 2021 have something in common: all three of our selections address aspects of collaboration and productivity that reflect – and intersect – physical reality; tangible tasks that have been called to adapt to remote interactions.

Keep reading to learn more about the winners and find out – in their own words – how each team brought Material Design to life in ways that help people create, communicate, and stay on track.

link
Copy link Link copied

Motion Winner: Post-it

“We’ve always felt there’s this connection between Post-it and Material Design, because a Post-it is a physical material.”

Heather Green, Vice President of Post-it Brand, sees the connection between Material’s principles and Post-it’s physical reality as something obvious and intrinsic to the product.

Using Material Design as a framework for both design and implementation, the team behind the Post-it app stayed true to both physical and digital, extending Material’s principles to build meaningful interactions in the app powered by effective motion design, like replicating the feeling of crumpling up a Post-it Note in the real world, an interaction the brand knows is deeply satisfying.

Pontus Axelsson, Founder & President at Bontouch, Post-it Brand’s digital partner, notes that when it comes to motion design, restraint is essential. When designing an interaction like those that connect the Post-it app to its real-world counterparts, Bontouch views motion as one modality to be combined with others. Sound and haptic feedback are used to complete the experience, adding a tangible quality to the digital experience.

When users capture a note in the app – using their device’s camera – the note is animated upward, lifting off its real-world background and signaling a transition from physical space to a digital experience. Touches like these serve to replicate and reinforce existing mental models, allowing Post-it Notes to function in the app as they do in reality.

Key to the team’s approach with the Post-it app is the recognition – particularly through the pandemic – that people don’t actually want to replace tangible notes and real-world interactions entirely with an app. The team has carefully considered what to translate to the app and how to do it effectively. This thoughtfulness, which positions motion as an integral part of the app’s experience, makes Post-it stand out as one of our Material Design Award winners for 2021.

link
Copy link Link copied

Large Screen Winner: Todoist

When building an adaptive experience for Android, Rastislav Vaško, head of Android at Doist, says, “things are adaptive almost by default.” But, he adds, “this can also be a pitfall.” The team at Doist has arrived at a successful adaptive experience for their Android app through iteration, trial and error, and attention to the nuance of adaptive layouts that avoids “falling back” on layouts that may not fully account for certain device sizes or configurations.

Todoist’s adaptive design starts with the basics: foundational layout considerations like margins and content regions. Addressing the app’s unique features and capabilities “a few layers deeper,” introduces more nuance. When designing search for large screens, Senior Product Designer Luis Abreu says Doist tested multiple layouts adapted from small screens. Real-world testing revealed that using more space for previews on tablets created a more information-rich layout that aided search interactions.

Column-based layout grids provide convenient structure for creating and testing such layouts, also allowing for quick decisions about how components adapt; bottom sheets in Todoist respond to screen size to maintain clarity, context, and readability, and navigational components make more use of increased screen size.

For Doist, the Material Design guidelines serve as a shared point of reference between design and implementation, allowing for quicker, easier conversations about design concepts, component behaviors, and user expectations, springboarding iteration on improved large screen designs that have made Todoist one of this year’s award winners.

link
Copy link Link copied

Dark Theme Winner: Meetly

For Meetly, the dark theme is a starting point, not an add-on; Android Engineer Mehul Kanzariya and Director Idris Bhavnagarwala both prefer to use dark themes.

The dark theme-first approach to Meetly’s recent redesign led by Designer Kinjal Waghela resulted in a product that stands out for its comprehensive application of colors across the interface, conveying Meetly’s identity while improving legibility in dark environments.

Particularly noteworthy is Meetly’s attention to illustrations in its dark theme. Waghela treated illustrations in the app – which serve as an important part of Meetly’s approach to branding – like other components, replacing bright background colors with darker, less saturated alternatives that ensure the relationship between background and foreground, UI and illustration, is maintained across themes.

This consistent application of color helped eliminate elements that became “too eye-catching” or “looked out of place” when switching between light and dark themes, an important optical test to ensure a comfortable viewing experience regardless of a user’s environment or preference.