Stop 09 · Mobile & Responsive DesignTopics · 4/8

Material Design Guidelines (Overview)

In short

Google's Material Design is the design language behind Android and many Google apps. Knowing it helps your Android designs feel native, and it's a great free textbook on design systems.

Google's official design system covering Android's conventions — elevation, motion, and component behavior — the Android equivalent of Apple's Human Interface Guidelines.

The jaadu arranges colourful stacked sheets of paper and cards on a desk.

Think of it like this

Sheets of paper on a desk

Material started with a simple idea: the UI is like sheets of paper on a desk. Some sit higher, some lower, and they slide and stack in believable ways. That's why cards, sheets and buttons have depth and clear layers.

Watch it happen

How Material Design is organised

Material Design

Styles

Components

Dynamic colour

Elevation

FAB

Navigation bar

1/4Material 3 can build a colour scheme from one source colour, even the user's wallpaper on supported Android phones.

The big ideas

What you need to know

Colour roles

Material names colours by role, like primary, surface and on-primary. It's a good model for your own tokens.

Clear layers

Surfaces at different elevations make it obvious what's on top, like a dialog over a page.

Adaptive layouts

Guidance for compact, medium and expanded window sizes helps one app work on phones, foldables and tablets.

Free resources

Google publishes the Material 3 Design Kit for Figma and a Theme Builder to generate colour schemes.

Save yourself the pain

Common mistakes

Oops

Copying Material components exactly and adding no brand at all.

Do this instead

Material is meant to be themed. Use your own colours, type and shapes while keeping its behaviour.

Oops

Putting two or three floating action buttons on one screen.

Do this instead

A FAB is for the one main action. If everything is important, nothing is.

Your mission

Theme Material for your brand

~30 min

Quick check

What is the floating action button (FAB) meant for?

Go deeper

1Skim Google's Material Design guidelines for components and elevation sections.
2Compare a well-designed Android app's patterns to Material Design's conventions.
3Note the philosophical differences between Material Design and iOS's Human Interface Guidelines.