Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

»Material Design« ist eine von Google stetig weiterentwickelte Designsprache. Sie verbindet die Gestaltungsregeln des klassischen Grafik-Designs mit den Möglichkeiten digitaler Benutzeroberflächen. Ziel von Material Design ist u.a. die Verbesserung der Benutzerfreundlichkeit. Darüber hinaus hat Material Design einen charakteristischen Look, so dass im Material Design gestaltete Interfaces sich ideal kombinieren lassen.

In diesem Artikel erklären wir euch, worin der Unterschied zum Flat Design besteht und welche Gestaltungsregeln beim Material Design berücksichtigt werden sollten.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Der Hintergrund von Material Design

Material Design wurde erstmals im Juni 2014 auf Googles Entwicklerkonferenz I/O vorgestellt. Die Designsprache wurde von Google ursprünglich für Android-Apps entwickelt. Die erste Anwendung, bei der Material Design zum Einsatz kam, war die Google eigene Anwendung »Google Now«. Google relaunched nach und nach die internen Apps und Web-Dienste im Material Design und hat den Styleguide öffentlich zur Verfügung gestellt. Mittlerweile findet das Material Design daher auch häufiger Anwendung auf Websites.

Gemeinsamkeiten und Unterschiede zum Flat Design

Da sich der Look von Material Design aus einfarbigen Flächen, schlichten Icons, großen Bildern und aufgeräumten Benutzeroberflächen zusammensetzt, wird der Stil häufig mit Flat Design verwechselt bzw. gleichgesetzt. Auch wenn Material Design im Flat Look gestaltet ist, bestehen doch signifikante Unterschiede.

Anders als beim Flat Design, bei dem es in erster Linie um Ästhetik und Reduzierung geht, besteht ein Schwerpunkt beim Material Design auf der Optimierung der Benutzerfreundlichkeit und in der Einhaltung physikalischer Gesetze. Material Design fügt daher zusätzlich eine virtuelle Z-Achse hinzu, um Dreidimensionalität zu schaffen, die im Flat Design so explizit unerwünscht wäre. Anders als im Flat Design wird viel mit Animationen und animierten Übergängen, sowie mit Licht und Schatten gearbeitet, um dem Benutzer Zusammenhänge besser zu visualisieren.

Flat Design vs. Material Design
Beispiel für den Unterschied zwischen Flat Design und Material Design

Gestaltungsregeln im Material Design

Die Gestaltungsregeln im Material Design sind sehr konkret und umfangreich. Wir gehen daher in diesem Beitrag nur auf die wichtigsten Punkte ein. Eine detaillierte Beschreibung der Regeln könnt ihr dem offiziellen Styleguide entnehmen.

Oberstes Gebot beim Material Design ist die Kontinuität. Animationen und nahtlose Übergänge zwischen Aktionen und Bildschirmen sollte hierbei in direkter Abhängigkeit zum Kontext stehen.

Material Design
Beispiel für Material Design auf der Google Design Website

Dem Material Design liegen darüber hinaus physikalische Gesetze zugrunde, die nicht gebrochen werden dürfen. Die einzelnen Elemente (Materialien) darf man sich dabei wie Elemente aus Pappe oder Papier vorstellen, die sich im selben Raum befinden und auf allen Achsen des Koordinatensystems bewegt werden können. Prototypen aus echtem Papier wurden übrigens auch verwendet um die Design-Sprache zu entwickeln.

Papier-Prototyp und fertig gestaltetes Icon im Material Design
Papier-Prototyp und fertig gestaltetes Icon im Material Design

Alle verwendeten Elemente haben beim Material Design eine identische Dicke (Tiefe) und werden auch auf der Z-Achse verschoben um die Inhalte zu priorisieren. Licht und Schatten werden hierbei als Hilfsmittel benutzt, um den Eindruck von Tiefe zu erzeugen. Insbesondere bei der Verwendung von Schatten sind daher exakte Regeln zu befolgen. Die Elemente können ihre Größe und Form ändern, dürfen aber weder umgedreht noch geknickt werden.

Richtige und falsche Beispiele aus der Guideline von Material Design
Richtige und falsche Beispiele aus der Guideline von Material Design

Auch für UI-Elemente wie Buttons, Formularfelder oder Icons gibt es exakte Designvorschriften. Selbst Effekte und Farbkonzepte werden vorgegeben. Eine sehr häufig verwendete Animation ist beispielsweise der sog. Ripple-Effekt bei Schaltflächen.

Einen sehr guten Eindruck über Look und Verhalten des Material Design vermittelt dieses Video der Material Design-Awards.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Frameworks

Für die Verwendung von Material Design in Webanwendungen stehen einige sehr nützliche Frameworks zur Verfügung. Empfehlenswert sind u.a. Material Design Lite, Materialize oder Angular Material.

Quellen / Links

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 5 Kommentare

  1. Rainer
    schrieb am 22.01.2018 um 22:59 Uhr:

    Ich bin auf diese Seite gestoßen weil ich nach Möglichkeiten suche, dieses hässliche Material Design wieder in lesbare und klare Templates umzutauschen. Egal wo man hin schaut, auf sämtlichen Geräten nur noch leere Seiten mit ein paar Strichmännchen drauf. Ich will endlich wieder fette Buttons die sofort ins Auge stechen und sofort als anklickbar erkennbar sind! Es macht keinen Spaß mehr, einen Browser oder ein Handy zu bedienen wenn alle Elemente nur noch aus dünnen Kritzeleien bestehen.

    Antworten
    • Bluv
      schrieb am 11.09.2019 um 13:25 Uhr:

      Absolut nicht nachvollziehbar, wovon du sprichst. Um Material Design geht es jedenfalls nicht. Vermutlich redest du eher von einem Launcher oder durch einen Hersteller verunstaltete GUI. Oder irgendetwas ist mit deinen Augen nicht in Ordnung. Ich kenne keinen einzigen Browser oder Launcher auf Android der aus leeren Seiten mit ein paar Strichmännchen drauf oder dünnen Kritzeleien besteht.

      Antworten
  2. Robert
    schrieb am 31.03.2016 um 13:39 Uhr:

    Knackige Zusammenfassung des t3n-Artikels, wobei der Effekt dort Inkdrop genannt wird. Ich mag Flat Design und Google’s Designsprache scheint durchaus noch mehr bieten zu können.

    Grüße
    Robert

    Antworten
  3. Lennard
    schrieb am 18.02.2016 um 23:05 Uhr:

    Sehr gut erklärt, danke dafür! :)

    Ich finde es echt stark, wie Google sich im Bereich Design entwickelt und das ganze auch noch responsive.

    Gruß Lennard

    Antworten
  4. Viola
    schrieb am 11.02.2016 um 14:27 Uhr:

    Hallo. Sehr guter und informativer Beitrag! Herzliche Grüße

    Antworten

Schreibe einen Kommentar zu Robert Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →