How to Make Material 3 Look Good

Intro to Material 3

Before diving in, let's introduce Material Three. For those unfamiliar, Material Three is a design system developed by Google's Material Team. It builds upon earlier versions and was initially introduced, I believe, in 2014 (I might need to double-check that). It's primarily geared toward mobile and touchscreen interfaces, often seen as less relevant for web development.

If you're into web development, especially using tools like Webflow, your association with Material might be limited to one thing: cards. Cards were a significant innovation within Material and have become quite commonplace. However, there's more to Material that's highly beneficial.

Pros of Material Design

Scalability

Firstly, Material's scalability is remarkable. It establishes a direct link between a designer's experience during the design phase and what developers see during development. This connection is crucial, especially in the no-code space where designers aim for dynamic elements like alternating between light and dark themes or dynamic color engines. Material's structure makes it easier for designers to visualize these implementations in a development environment.

Credibility

Another great aspect is its credibility. Google's exhaustive research backs Material's design decisions. Google's known for meticulous research, as evidenced by the famous blue color study, and this thoroughness informs Material's design choices, saving you from guesswork.

Cons of Material Design

Despite these advantages, there's a prevailing belief that only Google can make Material look good. This sentiment often surfaces when hastily developed apps using Material components, such as in React Native or directly in Android Studio, exhibit a certain "cheap Android look". Although Google's designs might appear beautiful and user-friendly when studied, reproducing that finesse independently remains challenging.

Google's mission to make information easily accessible and aesthetically pleasing reflects in their Material documentation. However, this can lead to misleading conclusions. Google aims for a one-size-fits-all approach, providing strict guidelines for various UI elements. Take, for example, the floating action button, which comes with a plethora of specific rules for its use. Following these rules ensures accessibility but might lack the finesse that makes a user experience truly delightful.

So, how do we elevate Material designs to match Google's finesse? Surprisingly, it often involves breaking these predefined rules, and that's what we'll delve into.

How to Make Material 3 Look as Good as Google Does

Color

An overview of the color system

How it works

To quote directly, it's akin to paying by a number, and here's the essence: it commences with a base color, generated either by choosing a key color or uploading a wallpaper image. Subsequently, an algorithm detects the primary color from the app and uses it to generate an entire color palette.

As of this recording, the algorithm defaults to generating approximately 26 swatches, each allocated to distinct roles in the user interface. This process involves feeding the source color into a theme generator, a custom algorithm devised by Google. This generator derives five pivotal colors forming the foundation of the overall color scheme, encompassing primary, secondary, tertiary, neutral, and neutral variant tones. For each key color, multiple swatches are produced, with tone indicating the darkness or lightness of a color.

A unique algorithm

What distinguishes this algorithm is its utilization of an innovative color space called HCT (which I won't delve into the theory behind at this moment, but it's impressive). Essentially, it offers greater accuracy by creating a spectrum of dark-to-light tones based on how human beings perceive color depth. This approach recognizes that deeper colors aren't always more saturated than lighter ones—it's not a linear relationship, as saturation depends on the hue.

Optimized for intuitiveness

When designing contemporary interfaces, considering depth within the interface—imagining everything on a z-axis—becomes crucial. Accurate color swatches that reflect this depth are invaluable, especially considering the imminent mainstream arrival of VR. As quoted from Material Three's documentation, the 26 standard color roles are already assigned to elements in the UI, signifying their importance for different UI components.

For instance, the primary action button and background fill are associated with the primary swatch, while text on that button corresponds to the Z on primary swatch. The documentation provides various options from there for different elements, emphasizing the versatility and richness of the color system.

Types of Colors

Color roles in Material Three are typically categorized into five primary groups.

Surface Colors

Surface colors encompass neutral elements like cards, screen backgrounds, drop-down menus, and containers that do not require specific colors. Following these are the primary, secondary, and tertiary colors, typically representing brand colors used for accent elements in the foreground such as buttons, icons, and interactive components.

Primary, Secondary, Tertiary

These are your brand colors. They're used to add color to elements while emphasizing or de-emphasizing them.

Containers

Containers refer to fill colors for elements that contain other elements—like buttons or cards.

"On" Colors

The "on" colors start quite literally with their designated names; for instance, the "on primary" swatch is meant for text displayed on top of a container filled with the primary color.

Variants

Variant roles, on the other hand, provide a lower emphasis and are paired with another role, serving as a less emphasized alternative. Contrast ratio and accessibility are significant benefits of Material's dynamic color algorithm, enabling theme changes without the worry of these factors. However, adhering to Material's color pairing rules is emphasized to avoid mismatches—like pairing "on primary container" with a color like "outline."

Sometimes You've Got to Break the Rules

Altering the brand colors: primary, secondary, and tertiary

However, straying from these strict rules can simplify matters. For instance, while the documentation suggests specific uses for primary, secondary, and tertiary swatches, it's acceptable to deviate based on visual discretion. You might find that using a different swatch enhances the appearance of certain elements, which Material Three allows.

Regarding the generation of secondary swatches, the automated algorithm often produces a desaturated version of the primary color. Material suggests using it for less prominent components requiring color, like chips or bottom navigation. However, manual selection of a different secondary palette is feasible, although the documentation does not explicitly highlight this flexibility.

Tertiary swatches are intended for accents, providing contrasting elements to balance primary and secondary colors or draw heightened attention to specific UI elements. However, the literal hierarchy implied by the names "primary," "secondary," and "tertiary" doesn't necessarily dictate their usage frequency. For instance, an interface might heavily leverage primary colors, sparingly use secondary, and scarcely use tertiary.

The purpose of the tertiary swatch is to offer contrasting accents or draw attention to specific elements, as indicated in the documentation. Visual hierarchy plays a role, but deviation from these strict hierarchies is permissible and sometimes necessary for cohesive and effective design, especially when brand colors clash with assigned hierarchies.

In essence, while Material Three provides a guideline, breaking these rules for better design outcomes is acceptable. Adaptation based on visual aesthetics and brand-specific requirements is encouraged.

Bending the rules on containers

Let's discuss the surface container swatches in Material Three, which are variations of the surface tone. They come into play when distinguishing nested containers, particularly in layouts involving grids of cards with sub-modules, data, or visualizations. These swatches aid in clear compartmentalization within such nested structures.

However, the naming conventions might be misleading. The terms "low to high" refer solely to the level of emphasis, not their index or position. This can cause some confusion, especially when the highest surface container tone ends up being darker than anticipated. It's an adjustment, as I'm used to brighter elements being higher in the hierarchy.

Sometimes, strictly following Material guidelines might result in unexpected color placements.

For instance, the background swatch might be used for elements deeper within the UI hierarchy, leading to a different visual outcome than expected. Even Material's own documentation showcases instances where the background swatch isn't used for the background itself.

The takeaway here is not to blindly break the rules but to understand the role these colors play in your interface. Modifying guidelines to fit your own design system is key. Google's success with Material design lies in their ability to adapt and bend these recommendations to suit specific design needs.

When working with Material Three's color system, don't restrict yourself to the literal names of the color swatches. Experimentation within reason is encouraged. However, drastic changes like making the background color primary are not advisable.

Moving on to fixed swatches, Material Three allows seamless switching between light and dark themes, ensuring the right contrast ratios for different hues. This alleviates the headache of manually managing colors during theme changes, as the algorithm takes care of maintaining the invisible tonal spectrum behind each key color.

Each tone maps to specific roles in the schema. For instance, in a light scheme, using the primary swatch might correspond to primary 40, while in a dark scheme, it could relate to primary 80. The algorithm handles this mapping, simplifying the process of adapting colors between themes in various development environments.

Implementation might vary based on your development setup, ranging from CSS modifications to tailwind's global CSS variables. Tutorial resources are available, and creating media queries to detect user preferences for themes is recommended.

Ultimately, to create visually appealing Material color schemes, trust your instincts and avoid strictly adhering to guidelines that might limit the creative process.

Spacing

Let's start by examining the asymmetry within Material components, particularly concerning the spacing and alignment of elements like buttons and cards. While the Material team has likely deliberated extensively on button spacing, I find there's a certain asymmetry that doesn't sit well with me. It appears to stem from the use of mathematical alignment rather than optical alignment, possibly due to accessibility concerns regarding button size.

For instance, examining buttons in design tools like Figma reveals slight discrepancies between recommended padding and what I perceive as an optimal alignment. While these changes might seem minor, for those attentive to detail, they can significantly impact visual aesthetics. I've even devised a formula, based on golden ratios, to fine-tune button alignments, but this might not be for everyone due to its mathematical complexity.

When dealing with icons and text placements in buttons or cards, maintaining symmetry and proportionality is crucial. I've found certain inconsistencies in Material components, where the spacing between text and icons doesn't align precisely. This visual discomfort arises from asymmetry in text container heights when images or icons accompany them.

Adopting principles of golden type margins and adjusting bounding box heights for consistency can rectify these asymmetries. This approach seeks to establish balanced proportions, aligning the visual elements more harmoniously. However, implementing these changes across all Material components might not be necessary, especially if certain elements already maintain optimal alignments.

Examining chips, for example, reveals a near-perfect icon padding around them in Material components. Interestingly, applying golden ratio principles might not always yield improvements and, in some cases, might even worsen the visual balance. Therefore, meticulous modification of every single component might not be needed, as some elements might already align well.

In essence, while there are imperfections and asymmetries in Material components, addressing these issues with careful consideration and adjustments based on golden ratio principles can significantly enhance their visual coherence. However, it's crucial to recognize when certain elements already achieve a satisfactory balance, and not every component requires modification.

Typography

Let's dive into typography, an aspect that's often subjective and a matter of personal preference. I have a contentious stance on fonts—I believe 'Inter' stands as the best font choice for any application. However, in Material Three's list items, especially where you have a list item followed by supporting text, I find the hierarchy could benefit from clearer distinctions. The contrast ratio between list item headings and their accompanying text, typically defined by the 'on surface' and 'on surface variant' swatches, seems insufficient to me. While accessibility considerations are crucial, replicating Apple's aesthetics might lead to contrast ratio compromises, notably evident in their use of lower opacity text, which doesn't always meet contrast standards.

Regarding typography spacing, I've observed instances of asymmetry in Material's list items, where the bounding box of accompanying images doesn't align precisely with the top stroke of the text. This minor issue could potentially impact visual aesthetics but doesn't detract significantly from functionality.

When using 'Roboto' or similar typefaces, optimizing text spacing, or letter spacing, can contribute to enhancing the text's visual appeal. If you're aiming to replicate Apple's or Google's font consistency, paying attention to letter spacing at various font sizes becomes crucial. Optimal letter spacing can be calculated using specific algorithms, as seen in 'Inter,' where careful consideration of spacing adds to the overall aesthetic appeal.

Typography scale, especially concerning display size type, is another crucial factor. While Material Three's guidelines might lack clarity in differentiating between headline, title, or label sizes, consistency in line height and spacing is paramount. Golden ratio values often guide font sizing decisions but may not always provide clear guidelines on font usage, leaving room for subjectivity.

Switching gears to elevation and drop shadows, I personally have an inclination towards them. I believe they're making a comeback, and when done right, they significantly enhance the visual appeal. However, Material's implementation of shadows might seem a bit hazy, possibly due to a combination of key lights and somewhat dark design settings, likely tailored more for smaller screens.

Incorporating the softer, more dramatic shadows seen in macOS or Windows UI could significantly enhance Material's elevation structure. A key point to note is avoiding pure black shadows, as they tend to look harsh and can impact the overall visual balance. Instead, opting for desaturated hues from the primary color palette or background swatches can offer more visually appealing shadows

Ending Notes

To wrap up, I'd like to highlight an issue regarding the background and surface swatches in the algorithm used for material theme generation. There seems to be a persistent tendency for the algorithm to favor light pink, which has been identified as a known bug. While it's somewhat improved now, if you're utilizing the signal plug-in for the material theme generator, be vigilant. If you find the background swatch unexpectedly appearing as pink, manually adjust it by selecting the hue from the next brightest neutral swatch that aligns with your intended color scheme.

In practice, minor alterations within a 5° range difference of lightness could suffice. When establishing a design system based on Material, these minor tweaks can significantly enhance the overall aesthetic while keeping the essence of the Material design intact. Implementing such adjustments can elevate the appearance of Material design, possibly even surpassing Google's standards.

If you found today's insights helpful, stay tuned for more updates. Additionally, if you hold different perspectives on the ideas presented, I encourage you to engage and share your thoughts. Your feedback fuels discussions and helps improve our understanding. Moreover, if you're interested in having Chamberland apply these rules to your existing website or design, feel free to reach out.

For those seeking more information or wishing to reference this content for training purposes, a transcript of this video will be available on the Chainlift blog.

That's all for today. Thank you for your time and for watching.

Curious about working together?

Book some time with me!

We'll talk about your project, and I'll help you break it up into smaller pieces. Then, we can look at the to-do list together and see where I can help out the most.