Introduction
In our last lesson, you did an excellent job building a standard iOS screen in Figma, applying the core principles of Apple's Human Interface Guidelines (HIG). You learned how concepts like Clarity, Deference, and Depth translate into practical design choices using official UI kits and following strict layout rules.
Today, we shift our focus to the other dominant player in the mobile world: Google's Material Design for Android. While Apple's HIG prioritizes deference to content and a consistent system look, Material Design offers a different philosophy—one rooted in physical metaphors, bold expression, and deep personalization. This lesson will unpack the foundational principles of Material Design 3 (M3), the latest version of the system. Understanding this design language is crucial for your versatility as a freelance designer, enabling you to confidently tackle projects for the vast Android ecosystem.
Part 1: The Philosophy of "Material"
Before diving into specific rules, it's important to understand the "why" behind Material Design. When it was first created, Google's designers asked a fundamental question: what is our digital software made of? Their answer led to a powerful metaphor that continues to define the system.
To get a feel for this core idea, let's watch a short video from the Google Design team that explains the origin story.
This classic video, "Making Material Design," reveals the thinking behind the system's creation. It will help you grasp the central metaphor.
Watch the first two minutes, focusing on these key concepts: The Problem: (Initial impetus) Designers at Google wanted to create a unified design framework that would work across all platforms. The Metaphor: (Quantum Paper) The team developed the idea of a "smart paper" or a magical, digital material. This material has physical properties—it has a surface, it has depth, it casts shadows—but it can also change shape and move in ways physical paper cannot. This central metaphor—that every element in the UI is a piece of tangible, intelligent material—is the key to understanding Material Design. It's an idea that should resonate well with your hands-on experience in creating tactile, bespoke crafts.
Part 2: The Foundations of Material Design 3
Material Design has evolved significantly over the years. The latest version, Material You (or Material Design 3), shifts the focus towards personalization and expression. While grounded in the physical metaphor, M3 is designed to be adaptable, accessible, and deeply personal to the user.
An excellent article from the blog Design Bootcamp breaks down M3 into seven key foundations. We'll use this structure to analyze its principles.
Mastering Material 3 Foundations: A Comprehensive Guide for UI ...
This article provides a clear, high-level overview of the seven foundational principles of Material Design 3.
Read through the entire article to get a quick introduction to each of the seven foundations: Color Typography Shape Motion Interaction Layout Elevation As you read, notice how these principles are designed to create experiences that are not only functional but also expressive and adaptable. We will now explore some of these in more detail.
Part 3: A Deeper Look at Key M3 Principles
Let's dive deeper into four of the most distinctive principles of M3: Elevation, Color, Typography, and Shape. The following video gives a technical breakdown of what's new in M3, which is perfect for understanding how these principles are applied in practice.
Everything you need to Know about Material Design 3
The video "Everything you need to Know about Material Design 3" from Stevdza-San offers a fantastic technical walkthrough of the core updates in M3. We will watch specific clips to understand each principle.
We'll go through this video section by section. You don't need to watch it all at once.
1. Elevation: Creating Depth with Light and Tone
The foundational concept of "material" leads directly to elevation. In Material Design, UI elements exist in 3D space, with a position on the z-axis. This elevation determines how they layer and cast shadows, creating a clear visual hierarchy.
M3 introduced a major update to this concept: tonal elevation. Instead of just relying on shadows, surfaces at higher elevations also receive a subtle color tint, making them appear to "glow" and lift off the background.
Everything you need to Know about Material Design 3
Now, let's watch the segment on elevation from the "Everything you need to Know about Material Design 3" video.
Watch the section on elevation changes. Focus on the visual difference between shadow elevation and tonal elevation. Notice how, in M3, components often use a colored overlay instead of a drop shadow to indicate they are "raised" above the background. This is a more sophisticated approach to depth than in earlier versions.
2. Color: Dynamic and Personalized
This is perhaps the most significant feature of M3. Unlike iOS, which uses a mostly static color palette, M3 introduces Dynamic Color. The system automatically generates a unique color palette for the entire UI based on the user's wallpaper. This makes every user's experience feel personal and unique.
The color system is built on a few key roles:
- Primary: Used for key components like prominent buttons and active states.
- Secondary: Used for less prominent components like filter chips.
- Tertiary: Used for contrasting accents.
- Neutral: Used for surfaces and backgrounds.
Everything you need to Know about Material Design 3
Let's return to the video to understand the M3 color system.
Watch the clip on the new color system. Pay attention to how the algorithm generates a full palette from just a few key colors and how primary, secondary, and tertiary colors are assigned to different roles in the UI.
3. Typography: A New, Scalable System
M3 also introduced a new typographic scale. Instead of the H1, H2, H3 naming convention you might know from the web, or the Large Title, Title 1 from iOS, M3 uses more descriptive categories.
- Display
- Headline
- Title
- Body
- Label
Each category comes in large, medium, and small sizes, creating a comprehensive and flexible type scale that works across all device sizes.
Everything you need to Know about Material Design 3
Next up is typography.
Watch the section explaining the new typography. Note the new naming conventions and the intended use for each style (e.g., Display for large screens, Headline for high-emphasis text on smaller screens).
4. Shape: Expressive and Functional
While iOS components have a very consistent, standardized shape, M3 gives designers more freedom to express brand identity through shape. Components can have different corner styles (rounded or cut) and a range of radius values, from extra small to extra large. This allows for a much more expressive and branded look.
Everything you need to Know about Material Design 3
Finally, let's look at shape.
Watch this short clip on the updated shape categories. Observe the different shape families (rounded and cut) and how different corner radii are applied to various components like cards and Floating Action Buttons.
Part 4: The Designer's Toolkit: Material 3 Design Kit for Figma
Just as Apple provides an official UI kit for iOS design, Google provides a comprehensive Material 3 Design Kit for Figma. This is your starting point for any Android design project. It contains all the standard components, built with the correct styles, variants, and Auto Layout properties, allowing you to design high-quality, consistent screens with incredible speed. Your structured background in finance and audit will appreciate the logic and order of a well-built design system like this.
We will use this kit extensively in our next lesson to build an Android screen. For now, it's important to know that it exists and is the primary tool for applying the principles we've discussed today.
Conclusion
You've now analyzed the foundational principles of Google's Material Design, providing a strong counterpoint to the Apple HIG principles you learned previously. You have a solid grasp of the philosophy and the key elements that give Android apps their distinct look and feel.
Key Takeaways:
- Material Metaphor: Material Design is based on the idea of a tangible, "smart" digital material that has surface, depth, and realistic physics.
- Elevation as Hierarchy: Depth is primarily communicated through elevation, which in M3 is represented by both shadows and tonal color overlays.
- Dynamic Color: M3's standout feature is its ability to create a personalized UI color palette based on the user's wallpaper, using a system of primary, secondary, and tertiary roles.
- Expressive & Scalable Systems: M3 uses flexible and descriptive systems for typography (Display, Headline, Title) and shape (corner radii) to allow for greater brand expression while maintaining consistency.
- The M3 Design Kit: Like with iOS, there is an official Figma kit that is the essential starting point for professional Android design.
Preview of the Next Lesson:
Theory is valuable, but practice is where skills are forged. In the next lesson, we will move from analysis to application. You will "Design an Android app screen applying Material Design guidelines in Figma," putting everything you've learned today into practice by building a screen with the official M3 Design Kit.