Everything you need to know about Material Design 3
As part of our app design software series, we take a look at all the new guidelines, components and tools available with Material Design 3.
New year, new design. Following the release of Android 12 in May 2021, Google announced in late October a complete overhaul of its design language: Material Design 3.
Material Design 3 is the technical name of Material You, which was unveiled in early 2021 through a Pixel 6 ad, and it’s a revolution for Android developers and designers. In this article, we’ll take a look into everything new, the first examples of apps designed with Material 3, and resources available to help you get the best out of it.
What are Material Design and Material You again?
Material Design is Google’s design language, created in 2014. It’s a set of guidelines put together by Google to improve the overall look and feel of Android apps with consistent design practices.
Material You, its latest version, is marking a brand new approach to app design. One that can be dynamically personalized to each users’ tastes.
With Material You, Google’s ambition is to help all designers “create designs that are personal for every style, accessible for every need, alive and adaptive for every screen.” And bring back creativity and excitement for Android apps.
In a Fast Company interview, Google VP of design Matias Duarte declared: “The material metaphor was maybe too good, and the paper has come to dominate our interfaces. They are consistent…but they’ve gotten a little stale, boring, too tied to a modernist same-ism that is spread everywhere.”
From now on, apps and widgets can be customized based on users’ wallpaper colour palettes. What’s particularly smart about this approach is that it doesn’t require additional efforts from the users, given that most of us already customize our wallpaper.
Material You also makes it easier for designers to build responsive and accessible apps, offering users more control over the contrast, size, and spacing settings. Let’s take a closer look.
What’s new in Material Design 3?
Dynamic Colours
Material Design 3 is undeniably a bold update, and its most exciting change is dynamic colours. Here’s how it works.
Material Design 3 has a built-in colour combination feature that extracts colours from users’ wallpaper images.
A palette with different colour roles is then generated and applied to any app that accepts dynamic colours.
As defined by its designers, the app’s own colour palette is combined and harmonized with the user to create a personalized version of the app, in both dark mode and light mode.
Using Material Theme builder, designers can create their palette and see how their app colours shift in tone to create a harmonized variation with good contrasts and colour combinations.
These custom schemes can be applied selectively to text, icons, backgrounds, and even illustrations, on all pages or selected areas. For example, you can decide to use dynamic colours on a user profile page but not your home page.
UI Components
UI Components got a style refresh too. Generally speaking, Material Design 3 adopts a simpler, more playful look. It features rounder elements, lighter shadows, more white space, and new active states, all compatible with dynamic colours.
For instance, the navigation bar, formerly known as the bottom navigation, is now taller and doesn’t have a shadow anymore.
The same applies to the navigation rail and the top app bar.
Meanwhile, floating action buttons, or FABs, are now boxier and available in a new, larger format to adapt to larger screens.
Cards now come in three formats: elevated, filled and outlined.
Finally, dialog modals now use more padding to accommodate their boxier shape, along with more prominent headlines to improve readability.
Foldable devices
If CES is any indicator of the future of mobile devices, then designers need to brace for foldable screens.
Luckily, Material Design 3 is making the transition easier for them with a new comprehensive set of guidelines, compositions, components, and animations.
Composition: Compositions are Material Design 3 layouts, designed for large, foldable screens.
First, we have lists, a layout that displays list information on the left side of the screen, with expanded details on the right. Lists are perfect for conversation threads, file browsers and media collection.
Then we have supporting panels. Similar to lists, supporting panels display complementary information on one side of the screen. But in this case, the right side of the screen is mobilized to show document comments, related files, or other support information related to the focus panel on the left.
Similar to what can already be found in news or social media mobile apps, Material Design 3’s feeds are cards used on foldable devices to suggest new content.
Finally, the Hero layout can be used to highlight your top images or videos on top of other layouts, such as supporting panels.
Motion: Foldable devices enable brand-new interactions and transitions. For instance, multiple apps can now run simultaneously, side by side, and users can constantly switch between radically different screen sizes. Here are some examples of new motions that Material Design 3 enables to help users navigate and interact with your content.
Motion for navigation bars:
Motion from folded to open landscape:
Motion for dialogs:
Adaptive type scale: If you remember, one of Google’s main goals for Material Design 3 is to help creatives design for every screen. That’s why they now encourage designers to use a scale (small, medium, large) to map font sizes to all screen sizes, instead of using fixed values. This comes particularly handy when it comes to designing for foldable devices.
General guidelines: Head to Material Design 3 to learn all the best practices when it comes to organizing components and creating multi-window dynamics for foldable screens. And the great news is that most of these best practices apply to all apps, and not just the ones created with Material Design.
Design tokens
A somehow less talked about novelty, design tokens are a new Material tool meant to improve consistency and collaboration among design teams. Yet their time-saving potential is tremendous for large teams working on multiple and sophisticated app builds.
Tokens carry dynamic style values — colours, typefaces, measurements, or even other tokens — that can be updated across an entire project at once.
They make it possible for teams to manage styles from a single place across design and implementation phases on all platforms (not just Android). Doesn’t it sound like your next app update could be 98% less painful?
New tools and resources to help you migrate to Material Design 3
- M3, your new destination for Material guidelines.
- Material Theme Builder: a must-have tool for anyone who wants to explore dynamic colours. Google’s theme builder lets you visualize how dynamic colours would look in your app, create your custom palettes, and export everything more easily. It is available as a Figma plugin and web tool.
- Design Kit for Figma: released by the Material Designware team itself.
- Updates to Jetpack Composer: for the brave souls out there custom coding their apps.
Examples of apps designed with Material 3 for Android 12
Material Design 3 has only been available to non-Google apps since late October 2021, which is why so far, very few apps have been launched or redesigned with it. But here is what it looks like when applied to Google’s own apps:
Google Calculator
Gmail
Google Drive
Clock app
What’s next for Material Design 3
According to Matias Duarte, 3D objects could be on their way. We can also expect more customization parameters and more control over the colour palette, according to the 9 to 5 Google blog.
At Designware, we feel like Material Design 3 marks an exciting new chapter for Android apps, and we plan on building brand new themes to help designers implement it with any template, or their custom layouts — for Android apps and for any other native app format or website
Yet, some big questions remain: how many brands will be ready to adopt Material Design 3’s personalized approach when it somehow means giving up some design control? How will designers feel about blending personalized and branded palettes, and how will we collectively make sure to keep each of our apps unique? Let us know what you think in the comments section!
