Exploring Material Design 3: Creating Stunning Visuals for Your App
Did you notice Google changing the design of its apps like Playstore, Gmail, Contacts, and so on! Please welcome, Material 3
Before diving deep into Material 3, let’s divide this topic into 5W and 1H
What, Why, Who, Where, When, How
And Bonus resources in the end :D
What is Material 3?
Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.
Material.io includes in-depth UX guidance and UI component implementations for Android, Flutter, and the Web.
The latest version, Material 3, enables personal, adaptive, and expressive experiences — from dynamic color and enhanced accessibility to foundations for large screen layouts and design tokens.
Key Features of Material Design 3
Material Design 3 introduces a number of new features and improvements, including:
- Dynamic color
- Tonal colors
- New shapes
- New typography
Why Material 3?
Looking back on the days when it was all just about material 1 and 2. The Design system was very generic is not so pleasant to the eyes. Comparing it with iOS would be a bad idea.
Here, take an example.
And let’s check out the iOS design system,
Please note, for a fair comparison, I had to use outdated design systems.
So, what do you prefer?
Who should use Material 3?
If you’re still using XML for creating UI for your Android projects, don’t worry buddy. You can still use Material 3. It is for both Compose and XML, as both are interoperable as well. Material 3 is also supported in Flutter.
Also, FYI, Compose Multiplatform is the key to developing Apps for all platforms.
In any case, you can migrate from M2 to the M3 design system slowly and gradually. This will help you to get a good grasp and idea about it.
Where to use Material 3?
Just like me, you must have your old projects developed following Material 2 guidelines. Try upgrading to M3.
Start with small widgets or components like a Date picker or Time Picker. If you haven’t used those, try the new Alert Dialog.
Wanna see some examples?
When to use Material 3
When you’re starting out with Jetpack’s new UI Framework, Compose. Start with the Material 3 Design System. Although Jetpack Compose supports Material 2, Material 3 offers a lot more than Material 2.
There could be many reasons to try it out. One of the most like features of Material 3 is Dynamic color.
Dynamic Color
It is possible due to an algorithm that applies new colors to Material 3 Components. This coloring depends upon the wallpaper you’ve set on your Homescreen. These algorithm-generated colors override the Material 3 Colors scheme to apply Dynamic Color. Learn More
Note: This works only for Android 12 and above
- Baseline scheme.
- Colors extracted from a wallpaper.
- Colors extracted from the content.
How to get started with Material 3?
Material 3 is some kind of Rocket Science. It’s just a Design System. In simple words, it’s a new way to imagine, design, and present User Interface.
This is the reason why I’ve bombarded this Blog with Visuals instead of just texts.
Let me share some of the official docs:
Bonus Resources:
If you’re starting or have started Jetpack Compose with Material 3, here are some cool resources I use while developing UIs.
