The best way to deal with headaches is to pretend you dont have them

Google just released Material 3 Expressive, an ammendment to the existing material design 3 scheme, in light of 40+ extensive user researches they committed. M3 Expressive emphasizes the importance of designing interfaces that allow users to express the self through customization. I, however, want to focus on a set of tactics they introduced in addition to the new components they introduced. these tactics in their words:

represent one axis along which you can make your components, layouts, and products more expressive.

I will share some of these in shortened manner, and you can read in depth as I will provide a link to the article.

1. Use a variety of shapes

Shapes and corner radii in interface design influence user perception and focus. Combining classic and abstract shapes, along with the shape library and corner-radii options, creates visual tension and contrast.

2. Apply rich and nuanced colors

Material’s dynamic color system offers primary, secondary, and tertiary colors for visual hierarchy and action prioritization. utilize the contrast between these color roles to put clearly whats a priority on the page.

3. Guide attention with typography
nothing new with this one tbh. none the less,


Use emphasized typography, including heavier weights, larger sizes, color, and spacing, to create editorial-like moments and direct attention to key information.

4. Use containers on content for emphasis

Organize content logically, giving important elements visual prominence through size, spacing, rhythm, and similarity.

5. Add fluid and natural motion

Make interactions feel alive and spirited through shape morph or surface effects. Apply the expressive motion springs or custom micro animations.

personal tip on this: learn and get used to advanced animation tools like rive or prototyping tools like protopie and play 3.0. interaction design is the future.

7.1 Combine tactics to create "hero moments"

Lets tackle this one thoroughly.
what is a hero moment?
Fulfills two criteria.
1. the section or element is emotionally impactful, and can highlight an emotional reaction or emphasize familiarity
2. the section or element contains a key interaction in your product, where a key information that needs emphasis is present.

eg. the top card section on a banking app, a sticker in a chat interface, the top "people in group chat" section in google messages and imessage, media player widget/ element in the notifications pane, an IOS live activity that shows a sports score or a navigation information

7.2 Combine all the 6 tactics that were discussed above with the intention of breaking predictable and uniformly applied design ideas to display essential info in a unique and fresh way. give ALL necessary time to make these critical interactions "pop"😂

these moments will be the beating heart of your product. be expressive and unexpected with these, to strike the emotional string in users' minds.

Read more here: https://m3.material.io/blog/building-with-m3-expressive