Material Design 3.0
Hello Folks! It’s Berkin and in this article, I will talk about Material Design 3.0. Happy reading!
Material Design 3.0 or in other words Material You, has been published in May 2021. This design system has been released with a motto which is “most expressive and adaptable design system yet”.
Before the features of Material You, Let’s remember what Material Design is, And why we are using this design language?
Material Design and Material You
Google has published the Material Design in 2014. It is a set of guidelines for increasing overall look and feel of mobile apps with logical design principle.
Material You is the latest version of this technology.It comes up with a brand new approach to app design. One that can be dynamically personalized to each users’ tastes.
Dynamic Color
Dynamic color is the first novelty of Material Design 3.0. Due to this feature, an algorithm scans the user’s wallpaper to generate individualized schemes and tonal palettes of accent and neutral colors. This feature’s first implementations start with Android 12.
Beyond scanning, through Dynamic Color user-generated colors can coexist to app colors, puts a range of customizable visual experiences in the hands of users.
Foldables
Another Material Design 3 feature provides UI considerations for foldable devices. Postures is a screen configuration unique to foldable phones indicating when the device is folded or unfolded. Postures can extend to unfolded landscape and unfolded portrait. This features can be exist on different screen size and aspect ratio.
Foldable Material Design features include:
- Postures
- Reachability
- Center Hinge
- Dividing the Screen
Postures
Postures are the screen configurations that foldable devices can take on, offering several different layout contexts for an app.
Reachability
Most of the time, 25% of unfolded screens can not be reached by users unless the grip is adjusted. Material You restrict amount of interactions that are placed in the upper %25 of the screen.
In addition, do not place essential interactive elements too close to the bottom edge. Forwhy, especially large hands can struggle to reach this area of the screen.
Center Hinge
The center of the folding screen has a tactile difference due to the device hinge that enables folding.
For avoiding visual lose on builded application and designing error, do not use anything along the center 48dp of an unfolded screen.
Dividing the Screen
For avoiding placing important actions in the middle 48dp area of the screen, M3 divide the screen into composition area which work best with 2 columns for layout.
Landscape Mode
In a landscape orientation, place primary navigational components on the vertical edges of the screen (1) and separate content and elements into two columns (2).
Portrait Mode
Use one column for portrait layouts. Horizontal space is limited in portrait mode, leaving little room to meaningfully implement two columns.
Design Tokens
Design Tokens allow to store style values, such as colors and fonts to be applied consistently across designs, code, tools, and platforms.
The aim which we want to achieve is to help organizations build and update process. This is beneficial for designers and amazing features to be ensure that they pick the same color or not.Also ,This is valid for fonts too.
Android 12 Relationship
Android 12 foregrounds the design language of Material You through updated widget styles, a dynamic color system, custom shapes, and motion enhancements.
Starting with Android 12 on Pixel devices, users can personalize their phone with dynamic color by generating unique color experiences from any wallpaper image. Extracted colors can be applied across the entire OS, from the notification shade to the lock screen, to volume controls, and more.
Credits:
Next month,I am going to write a new article. Sooo, do not forget to follow me and See you later, alligator!😂
Twitter: https://twitter.com/berkin_yilmaz
