WWW… Wednesday! Material Design 3

by Taylor Slattery | January 4, 2022

Material Design, Google’s design system for user interfaces, made its debut in 2014. Since then, the system has been further developed and expanded, with the latest iteration, Material Design 3, coming alongside the release of Android 12. As the name suggests, the system was designed to give both users and designers a sense of the materials with which we build and interact across our devices. To accomplish this, Google’s experienced team of designers put their heads together and conducted intensive studies of real materials, crafting interfaces out of paper and studying the effects of lighting and other cues that help to communicate depth. By harnessing these same principles in Material Design, they were able to create a system with which interaction is intuitive, and used it to unify the user interfaces across Google’s various products and projects.

Since Material Design’s introduction 7 years ago, devices have changed, as have the way we use them. Not only are our screens much larger now, but some of them also fold. Beyond just these new functional concerns, with Material Design 3, Google aims to address the emotional needs of users as well—hence, Material You. This time around, special attention has been paid toward creating a more humanistic approach to design, with a focus on creating individualized, expressive user experiences. This means more customization features both in appearance and function.

Perhaps the most noticeable of these updates comes in the form of Dynamic Color, a color system introduced in Android 12 that allows users to generate unique color palettes from wallpapers. These palettes are reflected across the UI and apps native to the device. The success of this function is owed to baseline color schemes and design tokens. Design tokens use labels based on their role within the design system, with color families sporting labels like primary, secondary, and tertiary. Roles are further specified with labels like containers and background, which are used to designate classes and states.

In practice, these tokens are assigned to components in place of static color values. The relationship between these colors and labels established in the baseline color scheme makes changes, for both users and designers, incredibly simple. Using the Material Theme Builder, you can quickly build and test custom color themes with any changes made to a color group affecting all components that share that design token across the UI. Further, because the system is built on roles and relationships between the colors in the system, creating and maintaining appropriate contrast for both light and dark versions becomes simple and intuitive.

Material Design 3 also introduces a new, simplified type scale that makes for easy scaling across devices. The new adaptive type scale allows designers to describe type as simply small, medium, or large, and map appropriate type values to device contexts rather than fixed values. Devices are grouped according to size so specific type values only need to be assigned at a group level rather than to each device within the group independently.

Widgets have also received a facelift, sporting simplified forms that play nicely with Dynamic Color and provide users with a fun and functional way of personalizing their device. You can find the full documentation for Material Design 3 here.