My Top Five (5) Favorite Visual Design Updates in Material Design 3

Google’s Material Design is an open-source design system that provides a unified user experience across platforms and devices. Since its release in 2014, Material Design has evolved and undergone several updates to keep up with changing design trends and user expectations. The latest update, Material Design 3 (Material You or M3), was announced by Google in late October 2021, and it looks like a significant shift from the previous version, Material Design 2 (M2).

What’s new in Material Design 3?

Material Design 3, also known as Material You, is the newest version of the Material Design library. While Material Design 2 was a step toward more customization — it allowed product designers greater flexibility to customize things like font, style attributes, and icon variants, according to a product brand — the newest version of the design system makes further steps toward allowing deeper user-oriented personalisation, introducing many updates including five (5) visual updates:

• A richer color scheme
• Dynamic color palette
• A new approach to elevation
• Adaptive typography
• More natural shapes

Now let’s take a look at each of these separately.

A richer color scheme

Material You introduces a richer, fully customisable palette. The foundation of a color scheme is the set of five key colors (primary, secondary, tertiary, neutral, and neutral variant) that individually relate to separate tonal palettes with 13 tones. Specific tones from each tonal palette are assigned to color roles across a user interface (UI).

Key colors are the foundation for creating any dynamic color scheme. With key colors established, Material’s algorithm specifies the full spectrum of colors needed for expressing interaction states, errors, and accessible contrast.

The five (5) key colors: primary, secondary, tertiary, neutral, and neutral variant — source: Material Design 3

A tonal palette for primary key color — source: Material Design 3

Dynamic color palette

By introducing the dynamic color palette, Material Design 3 gives a more personal feeling to any app. Personalization is a key to emotional user engagement. Dynamic color experiences are built with M3 color schemes. With Android 12, users can generate individualized schemes based on their favorite wallpaper or even extract colors from content. With M3 as a foundation, user-generated colors can coexist with app colors, putting a range of customizable visual experiences in the hands of users.

1) Baseline colors 2) Colors extracted from a wallpaper 3) Colors extracted from content — source: Material Design 3

How does it work, you ask? Material Design 3 has a built-in color combination feature that extracts colors and creates a custom palette based on the user’s wallpaper. This palette is generated automatically, ensuring accessible color contrast ratio and legibility. It provides the color schema for both light and dark modes. The palette is applied to each app that accepts dynamic colors.

Key colors extracted from user’s wallpaper — source: Material Design 3

A full-color palette generated based on the user’s wallpaper colors — source: Material Design 3

New approach to elevations

Elevation is the relative distance between two surfaces along the z-axis. In Material 2, we were using shadow to show the elevation of a component on the UI. In Material 3, elevation is communicated through color. What does it look like? Usually, we will take the tint of the primary color and use it with some increased opacity. The stronger the elevation, the higher the percent of color.

1) One surface at 1dp elevation and another surface at 8dp elevation, as viewed from the front and 2) The difference in elevation between the two surfaces is 7dp, as viewed from the side — source: Material Design 3

Comparison between M2 and M3: on the left, M2 with shadows applied at all levels; on the right, M3 using color rather than shadows to communicate elevation — source: Material Design 3

Adaptive typography

When it comes to typography, there is one principle that always works in your favor — the simpler, the better. And with this version of Material Design, its type scale is fully customisable.

• Variable fonts
• 5 key type styles
• Adaptive type scale

Variable fonts

Material Design 3 suggests using a combination of 2 fonts — Roboto Flex and Roboto Serif. These font families both have a fluid range of weights, from extremely thin to extremely bold styles in the larger optical sizes.

Roboto Flex and Roboto Serif — source: Material Design 3

The 5 key type styles

This more straightforward system allows designers to create type hierarchy easier. A well-structured and consistent text hierarchy supports better readability and accessibility — which is especially important for screen reader users. M3 defines five (5) key type styles:

• Display
• Headline
• Title
• Body
• Label

M3 has five distinct type styles: Display, headline, title, body, and label — source: Material Design 3

Adaptive type scale

Earlier iterations of Material Design relied on hard-coded style values for typography but this changes with Material Design 3. 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 designing for the new crop of foldable devices, with more to come.

An example of adaptive type scale — source: Material Design 3

More natural shapes

Another significant visual change is using more organic shapes and forms in Material Design 3. This approach moves away from the geometric shapes used in Material Design 2 and introduces more fluid, dynamic shapes and structures inspired by nature. This approach aims to create a more natural, intuitive user experience that is easier to understand and navigate.

Examples of shapes — source: Material Design 3

Conclusion

To sum up, the new update of Material Design, known as Material Design 3 or Material You, prioritizes user-oriented personalization. The integration of organic shapes, forms, and colors creates a more intuitive and natural user experience that is easy to comprehend and navigate. These updates strive to make the user experience more personalized and engaging while ensuring accessibility and usability. In general, Material Design 3 marks a notable departure from the previous version and is expected to influence future design trends in the industry.

Thank you for reading! I hope you learned something new! What are your favorite updates in Material Design 3? Let me know in the comments below!