M3 Expressive: Design with emotion
Craft more engaging and user-friendly products by leveraging emotion-driven UX. M3 Expressive delivers this through vibrant colors, intuitive motion, adaptive components, flexible typography, and contrasting shapes.
What’s Material 3 Expressive?
Stay ahead in the ever-evolving UX design landscape and create truly engaging, impactful experiences. Material Design's latest evolution, Material 3 Expressive, equips you with the tools to make your product more engaging, intuitive, and desirable. Discover the new components, motion physics, color updates, and more – keep reading for a full introduction.
People today increasingly view their devices as extensions of themselves, not just tools. This shift underscores the power of expressive interfaces, which forge deeper connections by evoking specific feelings or moods through visual design and interaction. Material 3 Expressive builds upon this understanding as an evolution of the Material 3 design system. It offers a collection of new features, updated components, and design strategies specifically aimed at creating emotionally impactful UX. We understand that creators want to enhance user experiences by establishing clearer hierarchy, improving utility, and developing more personal styles that resonate emotionally with their users. Importantly, M3 Expressive is not a new version or replacement of M3; it's an enhancement, not "M4."
The power of expressive design
Material 3 Expressive represents our most deeply researched update to the design system since its inception in 2014. Informed by extensive user research, encompassing 46 studies and over 18,000 participants, this evolution goes beyond mere aesthetics to genuinely elevate your users' experience. Our key research insights include:
- Expressive designs are preferred by people of all ages.
- Expressive designs consistently score higher on user attributes like playfulness, energy, creativity, and friendliness.
- Users are more likely to switch to products that use M3 Expressive components and techniques.
- Expressive designs are easier to use, with participants spotting key UI elements up to four times faster in expressive screens.
Implementing the new expressive features across Google products quickly revealed key design tactics for guiding user attention to critical screen elements. These tactics represent different axes for enhancing the expressiveness of your components, layouts, and products. While these are our findings, M3's enhanced flexibility empowers you to experiment and discover what works best for your audience.
1. Use a variety of shapes
Leverage shape as a powerful communication tool in your interface. The basic forms of components, containers, and content set the initial tone for users. Combine shapes and corner radii to generate visual tension or cohesion and direct focus within your app. Experiment with classic and abstract shapes to develop unique visual structures and groupings. Utilize the shape library and the new corner-radius features to strategically blend round and square shapes for tension and visual contrast.
2. Apply rich and nuanced colors
Material's dynamic color system provides a spectrum of colors for primary, secondary, and tertiary elements and surfaces. Strategically mixing these colors for key components or visual elements can effectively highlight the most important information on a screen. Establish clear visual hierarchy using surface tones. Leverage the contrast between primary, secondary, and tertiary color roles to prioritize actions and streamline navigation for users.
3. Guide attention with typography
Draw attention to important UI elements like headlines and actions by using emphasized text styles. Create engaging, editorial-style moments in your app through strategic typography. Direct user focus and make key information more impactful by using heavier weights, larger sizes, color variations, and thoughtful spacing. Establish effective hierarchy within and across content blocks by incorporating additional type styles from the Material type scale.
4. Contain content for emphasis
Structure content into clear, logical groupings or containers. Visually prioritize the most important content, tasks, or actions by providing ample whitespace and applying the brightest surface mapping. Employ principles of size, spacing, rhythm, similarity, or other grouping techniques to make key elements stand out distinctly.
5. Add fluid and natural motion
Your UI should fluidly respond to the user's context. Dynamically shift components or controls based on the environment to simplify task completion. Optimize content for foldable and large screens through tailored adjustments or by implementing canonical layouts.
6. Leverage component flexibility
Design your UI to intelligently adapt to the user's context. By shifting components or controls based on the environment, you can make task completion significantly easier. Optimize content for various screen sizes, including foldable and large displays, through custom adjustments or by leveraging canonical layouts.
7. Combine tactics to create hero moments
Hero moments are crafted by intentionally layering expressive tactics, breaking free from predictable or uniform design. Their purpose is to deliver a distinct, memorable statement or to present crucial information in a novel, almost editorial style. These moments act as powerful focal points. Dedicate your energy to making your most critical interactions truly resonate; they are the emotional core of your product!
Hero moments should be concise, delightful, surprising, and unexpected. Strategically limit your product to one or two such moments to maintain their impact and avoid overwhelming the user.
