Material Design needs no introduction. Its priceless contribution to enhanced user experience is transparently documented. This Android-oriented design language and Google-supported protege flexes its contribution to feature-rich onscreen touch experiences through natural motion. The endgame of Material Design has always been to mirror real-world objects attributed to realistic animations and lighting features that intend to produce appealing 3D effects.
- 1 Material Design 3 New Features
- 1.1 Dynamic Color Implementation
- 1.2 Foldable Devices Design
- 1.3 Design Tokens
- 2 Final Note
Material Design 3 New Features
Google’s Material Design 3 (M3) got its fair share of the spotlight during the 2021 Android Dev Summit. Through Material You; Google’s updated Material Design language version, Android 12 users are first in line to experience this design system’s adaptive user interface. The expressiveness of Google’s Material Design 3 showcases several updated libraries, components, and guidelines.
Dynamic Color Implementation
M3 color schemes are responsible for Android 12 devices’ dynamic color ranges. Through customization settings like wallpaper generation, it is possible for an Android 12 user to work with individualized color schemes. In this case, users have the flexibility of customizing their visual experiences such that the app colors and the user-generated colors can mutually co-exist.
Dynamic color implementation can be broken down into three segments:
1. User-Generated Schemes (UGS)
When a user enables dynamic color under their personal wallpaper selection, they will have initiated user-generated schemes on an individual device level. Built-in apps (e.g. clocks and calculators) and Settings are examples of system UI components that can reflect the user-generated color preferences.
2. M3 Baseline Color and Token
Users that prefer their apps to operate under a dark or light theme will benefit from the default colors the baseline color scheme offers. User-generated color schemes are seamlessly accepted by the Android system apps as a result of tone relationships and color roles attributes that define the baseline scheme structure. Therefore, apps can ignore the baseline color values and go with user-generated color schemes.
3. Custom Colors
While dynamic colors are good for an app’s thematic lifespan, custom colors ensure that these apps do not lose their thematic meaning through the reservation of specific additional color roles. With dynamic color and baseline scheme already existing, custom/semantic color adds some flexibility to interface design.
Foldable Devices Design
Devices with flexible screens have a lot to gain from this feature. The objective is to have the folding and unfolding actions of flexible screens reserve the much-needed screen space instead of making it unavailable. For an app to be adaptable to a foldable screen design, it needs to pass through some considerable conditions and constraints.
A folded smart device depicts the outlook of a smartphone while an unfolded one depicts the outlook of a tablet. This outlook comparison is in relation to the screen space with anticipated conditions of 4-6 inches for the smartphone and 8-10 inches for the tablet.
2. Content Viewing Distance
Regardless of a smart device’s posture (folded or unfolded), scalable content should be under a comfortable and adaptable viewing distance of 12-20 inches.
3. Screen Orientation
An adaptable and automated landscape or portrait screen orientation should be initiated upon any screen folding or unfolding action. It helps scale the displayed content for a comfortable viewing angle.
Since user interactions like typing can be discouraging on an unfolded screen and encouraging on a folded screen, users have the flexibility of limiting their screen actions to one-hand or two-hand interaction.
25% of unfolded screen display areas tend to be unreachable to most users. Several factors add up to this user limitation including the size of the users’ hands or fingers. Therefore, this 25% upper screen area should accommodate limited user interaction actions. Also, the screen’s bottom edge should only accommodate non-essential interactive elements. With such implementations, a user should be able to comfortably reach the targeted areas of their device’s screen without straining.
6. Center Hinge
Since this area of a smart device initiates the folding action of the screen, a UI design of an unfolded screen should not have essential elements or information alongside the center hinge (48dp).
Style values such as fonts and colors need to be implemented easily and consistently across usable platforms, designs, tools, and codes. By storing such style values, tokens help achieve this objective. The use of hardcoded values is sidelined to ensure the design system’s products are built, scaled, and maintained in a streamlined manner. Color and typography values in Material Design now embrace the use of the system and reference tokens.
With tokens, the need for hex codes static values for colors is no longer a requirement. Design tokens enable you to identify and reference the design color you wish to implement via self-explanatory terminologies. Also, implemented style choices and changes are easy to record and track due to the design token’s repository-like feature. An entire product consistently benefits from an implemented style update.
Google’s Material Design 3 (M3) seeks to settle a score with questionable UX (User Experience) through its impeccable UI (User Interface) design footprints. M3 is a UI design heaven for Android 12 developers that want to reach new heights.