Zum Inhalt springen

Material Design

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 10.11.2026

Material Design ist das Designsystem von Google, vorgestellt am 25. Juni 2014 auf der Entwicklerkonferenz Google I/O. Es legt fest, wie Oberflächen in Android und vielen Google-Diensten aussehen und sich verhalten: Flächen mit Tiefe, kräftige Grafik, klare Typografie und fließende Bewegung. Die dritte Generation heißt seit 2021 Material You, 2025 folgte Material 3 Expressive.

Material Design

Das Designsystem von Google mit Regeln und Komponenten für Oberflächen, Farben, Typografie und Bewegung.
Beispiel: „Die App folgt Material Design, deshalb wirken Buttons und Menüs auf Android-Geräten vertraut.“

Abgrenzung zum eigenen Design System: Material Design ist das öffentliche System eines Herstellers. Ein Design System für eine Marke leitet seine Regeln aus deren Erscheinungsbild ab.

Woher Material Design kommt

Google stellte Material Design 2014 als Gestaltung mit tastbaren Flächen, kräftiger Grafik und fließender Bewegung vor. Als Begründer nennt Google seinen Designchef Matías Duarte. Seitdem gibt es eine öffentliche Dokumentation mit Regeln für Farben, Typografie, Abstände, Bewegung und fertige Komponenten.

Zwei Felder mit derselben kleinen Oberfläche aus Kopfleiste, Karte mit Bild, Schaltfläche und rundem Plus-Knopf. Links sind alle Flächen flach und ohne Schatten, rechts haben sie abgerundete Ecken und Schatten unterschiedlicher Tiefe.
Flat Design verzichtet auf Schatten, Material Design zeigt mit ihnen, welche Fläche über welcher liegt.

Material You und Material 3 Expressive

Mit Android 12 kam 2021 Material You: Die Oberfläche übernimmt ihre Farben aus dem Hintergrundbild des Nutzers. Material 3 Expressive folgte 2025 mit Android 16 und betont Form, Farbe und Bewegung stärker.

Google stützt die neue Fassung auf 46 Studien mit über 18.000 Teilnehmenden, wichtige Elemente seien damit bis zu viermal schneller erkannt worden. Das sind Angaben des Herstellers.

Material Design für Websites

Für Websites dient Material Design vor allem als Vorlage. Viele Oberflächen übernehmen einzelne Muster, etwa Karten, schwebende Aktionsknöpfe oder die Farbrollen; eine Marke mit eigenem Auftritt baut daraus ihr eigenes Design System.

Siehe auch:

Design System

Gepflegte Sammlung aus Gestaltungsregeln, wiederverwendbaren Bausteinen und deren Dokumentation für alle Oberflächen einer Marke.

#Webdesign-Grundlagen #Gestaltungsgrundlagen

Atomic Design

Methode, Oberflächen aus fünf aufeinander aufbauenden Ebenen von Bausteinen zu entwickeln statt Seite für Seite zu gestalten.

#Webdesign-Grundlagen

Benutzeroberfläche (UI)

Die sichtbare und bedienbare Schicht eines Programms oder einer Website, über die ein Mensch Eingaben macht und Rückmeldung erhält.

#Benutzererfahrung (UX)

Icons

Kleine Bildzeichen, die eine Funktion oder einen Inhalt auf einen Blick erkennbar machen.

#Website-Struktur #Gestaltungsgrundlagen

Dark Mode

Darstellung einer Oberfläche mit dunklem Hintergrund und hellem Text, als Alternative zur hellen Standarddarstellung.

#Webdesign-Grundlagen