Material Design

Material Design

Inhaltsverzeichnis

Was ist Material Design?

Nehmen Sie ein Blatt Papier. Heben Sie es einen Fingerbreit über den Tisch.

Sehen Sie den Schatten darunter?

Dieser kleine, dunkle Streifen verrät Ihnen alles: Das Blatt schwebt, es liegt nicht auf, es ist näher an Ihnen als die Tischplatte. Niemand musste Ihnen das erklären. Ihr Auge weiß es, seit Sie zum ersten Mal nach etwas gegriffen haben.

Genau diesen Schatten hat Google 2014 in die digitale Welt geholt. Material Design ist das Gestaltungssystem, das Bildschirme so behandelt, als bestünden sie aus echtem Stoff: aus Schichten, die übereinanderliegen, Schatten werfen, sich bewegen, wenn Sie sie berühren. Es ist kein abstraktes Regelwerk für Designer. Es ist ein Versprechen an die Nutzer: Du musst keine neue Welt lernen. Du kennst diese hier schon.

Das ist der Trick, und es ist ein eleganter. Statt dem Menschen beizubringen, wie ein Knopf funktioniert, baut Material Design den Knopf so, dass er sich verhält wie ein Ding aus Fleisch und Blut. Er senkt sich, wenn man drückt. Er wirft Schatten, wenn er wichtig ist. Eine Welle läuft über ihn, wenn der Finger ihn trifft, so wie ein Tropfen einen Teich kräuselt.

 

Illustration zu Material Design mit Papiermetapher, Schichten, Schatten, 8dp-Raster, Farbflächen und Ripple-Effekt beim Tippen.

Material Design nutzt digitale Papierflächen, Schatten, Raster und Bewegung, um Interfaces vertraut und konsistent bedienbar zu machen.

 

Die drei Prinzipien

Material Design ruht auf drei Säulen. Keine davon ist Theorie. Jede lässt sich anfassen.

Material als Metapher

Das Herzstück. Die Oberfläche verhält sich wie digitales Papier, das gestapelt, geschnitten und verschoben werden kann. Jedes Element hat eine Höhe, eine Position im Raum, eine Beziehung zu den anderen Schichten. Der Schatten ist dabei kein Schmuck. Er ist Sprache. Er sagt: Ich liege weiter vorn. Ich bin der Knopf, auf den es jetzt ankommt.

Kühn, grafisch, absichtsvoll

Material Design traut sich Farbe. Es traut sich große Flächen, klare Schrift, eine sichtbare Rangordnung. Nichts steht zufällig herum. Die Gestaltung lenkt den Blick wie ein guter Erzähler die Aufmerksamkeit lenkt: Zuerst das Wichtige, dann der Rest. Wer ein gutes Plakat gesehen hat, kennt das Gefühl. Man weiß sofort, wohin man schauen soll.

Bewegung mit Bedeutung

Animationen sind in Material Design keine Spielerei. Sie erklären. Wenn eine Seite in die nächste gleitet, sehen Sie, woher Sie kommen und wohin Sie gehen. Die Bewegung hält den Faden, damit Sie sich nicht verlieren. Ein Übergang ist hier ein Wegweiser, kein Feuerwerk.

 

Warum sich der Aufwand lohnt

Stellen Sie sich vor, jeder Raum in Ihrem Haus hätte einen anders gebauten Lichtschalter. Einen zum Drehen, einen zum Ziehen, einen, den man dreimal antippen muss. Sie würden im Dunkeln stehen und fluchen.

Genau das verhindert ein Designsystem. Material Design sorgt dafür, dass ein Knopf sich überall wie ein Knopf anfühlt: in der App, auf der Webseite, auf dem Tablet, auf der Uhr. Diese Wiedererkennung ist kein nettes Extra. Sie ist der Unterschied zwischen einem Werkzeug, das man liebt, und einem, das man wegwirft.

Drei Dinge gewinnen alle, die danach gestalten:

  • Vertrautheit für die Nutzer. Wer eine Material-Design-App bedient hat, bedient die nächste blind. Das senkt die Hürde, etwas Neues auszuprobieren.
  • Geschwindigkeit für die Entwickler. Fertige Komponenten müssen nicht jedes Mal neu erfunden werden. Das spart Wochen.
  • Stimmigkeit für die Marke. Ein Unternehmen, dessen Produkte überall gleich klingen, wirkt verlässlich. Brüche im Erscheinungsbild lesen Menschen unbewusst als Schlamperei.

Bei aller Strenge lässt das System Raum. Die Richtlinien sind ein Geländer, kein Käfig. Wer will, baut darauf eine eigene Handschrift, ohne die gemeinsame Sprache zu verraten.

 

Die Bausteine

Vier Werkstoffe machen das digitale Papier aus.

Schatten und Höhe

Schon erwähnt, aber er verdient eine eigene Zeile: Der Schatten ist das tragende Element. Er zeigt Tiefe, er zeigt Rang, er zeigt, was sich gerade bewegt. Ein schwebender Knopf wirft einen weicheren, breiteren Schatten als eine flach aufliegende Karte. So wie eine Hand näher an der Lampe einen größeren Schatten an die Wand malt.

Farbe und Typografie

Material Design arbeitet mit einer durchdachten Palette: eine Primärfarbe, eine Sekundärfarbe, dazu ruhige neutrale Töne, die den lauten Farben Platz lassen. Die Farbe ist gezielt gesetzt, nie geschüttet. Bei der Schrift setzte Google lange auf die hauseigene Schriftart Roboto, die für den Bildschirm gezeichnet wurde und auch in winzigen Größen lesbar bleibt.

Das Raster

Unter jeder guten Gestaltung liegt ein unsichtbares Lineal. Material Design rechnet in einem 8-dp-Raster, also in density-independent Pixels, die sich auf jedem Bildschirm gleich verhalten. Jeder Abstand, jede Kante folgt diesem Takt. Man sieht das Raster nie. Man spürt nur, dass etwas stimmt, so wie man in einem gut proportionierten Raum tiefer durchatmet, ohne zu wissen, warum.

Bewegung

Die Animationen folgen den Gesetzen der Physik, nicht der Willkür. Dinge beschleunigen und bremsen, wie echte Dinge das tun. Nichts springt, nichts ruckelt. Diese Natürlichkeit ist der Grund, warum eine gut gemachte App sich anfühlt wie Atmen und eine schlecht gemachte wie Stolpern.

Wann haben Sie zuletzt darüber nachgedacht, warum sich ein Knopf wie ein Knopf anfühlt? Vermutlich nie. Und das ist das größte Kompliment, das man einem Designsystem machen kann.

 

Wo Ihnen Material Design jeden Tag begegnet

Sie benutzen es vermutlich gerade. Material Design wurde für Android geboren und steckt in unzähligen Apps auf dieser Plattform, von Gmail über Google Maps bis YouTube. Doch es ist längst über den Tellerrand gewachsen.

Im Web sorgt es dafür, dass eine Anwendung auf dem Laptop sich genauso bedienen lässt wie auf dem Handy. Im Handel und auf Unternehmensseiten hilft die klare Rangordnung Menschen, durch große Mengen an Information zu finden, was sie suchen, ohne sich zu verirren. Überall dort, wo viele Inhalte schnell sortiert werden müssen, spielt das System seine Stärke aus.

 

Werkzeuge und Ressourcen

Niemand muss bei null anfangen. Google legt ein ganzes Sortiment an Werkzeugen bereit.

Da sind zunächst die offiziellen Material-Design-Richtlinien, die jeden Aspekt erklären, von der Farbe bis zur Bewegung. Dazu kommt eine umfangreiche Bibliothek fertiger Komponenten für gängige Frameworks wie Android, Flutter und das Web. Wer einen Prototyp braucht, setzt ihn aus diesen Teilen zusammen, statt jedes Schräubchen selbst zu drehen. Und für Gestaltungswerkzeuge wie Figma gibt es Vorlagen, mit denen sich ein eigenes Erscheinungsbild auf dem Material-Fundament aufbauen lässt.

Das ist die alte Weisheit des Handwerks: Ein guter Tischler hat nicht für jeden Schnitt ein neues Werkzeug. Er hat ein paar gute, die er beherrscht.

 

Von Material You zu Material 3 Expressive

Ein Designsystem, das stehen bleibt, ist ein totes System. Material Design hat sich seit 2014 mehrfach gehäutet.

2021 kam Material You, auch Material 3 genannt. Die Idee: Das Design passt sich Ihnen an, nicht umgekehrt. Aus dem Hintergrundbild des Nutzers leitet das System eine ganze Farbwelt ab. Ihr Handy sieht dann aus wie Ihr Handy, nicht wie jedes andere. Personalisierung, die nicht aufdringlich ist, sondern leise.

Den größten Sprung seither machte Google im Mai 2025 auf der Entwicklerkonferenz I/O mit Material 3 Expressive. Ab September 2025 rollte es zuerst auf Pixel-Geräten unter Android 16 aus. Wichtig zu wissen: Es ist keine neue Hauptversion, sondern eine ausdrucksstärkere Spielart von Material 3. Bewegungen verhalten sich nun wie eine gespannte Feder, sie schnellen, federn, schwingen nach. Farben werden kräftiger, Formen mutiger, Knöpfe größer und greifbarer.

Das Bemerkenswerte daran ist nicht die Optik. Es ist die Grundlage. Google hat diese Entwicklung mit 46 Studien und mehr als 18.000 Teilnehmern abgesichert. Das Ergebnis, nachzulesen im Forschungsbericht von Google Design: Menschen finden die wichtigen Schaltflächen deutlich schneller, und der Vorsprung gilt über alle Altersgruppen hinweg. Ausdruck ist hier kein Selbstzweck. Er ist Orientierung.

Daneben wächst die Barrierefreiheit weiter: bessere Kontraste, sauberere Unterstützung für Vorleseprogramme, mehr Spielraum für Menschen mit besonderen Bedürfnissen. Ein Design, das nur für die Sehenden gut ist, ist eben nur halb gut.

 

Der Kern der Sache

Hier liegt der Punkt, der oft übersehen wird: Das beste Interface ist nicht das cleverste. Es ist das, das sich benimmt wie etwas, das Sie längst kennen.

Material Design hat diese Wahrheit zum Bauplan gemacht. Es borgt sich beim Papier, beim Schatten, bei der Schwerkraft, damit Sie nichts borgen müssen. Die ganze Kunst besteht darin, unsichtbar zu sein. Gutes Design merkt man nicht. Man merkt nur, dass etwas leicht von der Hand geht.

Und vielleicht ist das die Frage, die Sie beim nächsten Tippen mitnehmen können: Wie viel von dem, was sich am Bildschirm „natürlich“ anfühlt, hat in Wahrheit jemand sehr genau für Sie durchdacht?

Weitere passende Glossareinträge

Die Meta Description ist Ihr Klappentext in den Suchergebnissen und entscheidet oft, ob jemand klickt oder weiterscrollt.
Ein Mockup zeigt das fertige Design statisch vorab, damit Aussehen, Wirkung und Fehler früh geprüft werden können.
Media Queries passen Layout, Schrift und Bedienung an Gerät, Fenstergröße und Nutzerpräferenzen an, damit Webseiten überall lesbar bleiben.
Back to top