Web development

Google’s Material Design 3 and Android 12 Users

black iphone 5 on black computer keyboard

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.

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.

1. Size

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.

4. Ergonomics

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.

5. Reachability

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).

Design Tokens

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.

Final Note

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.

Leave a Comment