kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Material Design – Die Designsprache von Google

»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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Viola

    Verfasst am 11. Februar 2016 um 14:27 Uhr.

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

  2. Lennard

    Verfasst am 18. Februar 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

  3. Robert

    Verfasst am 31. März 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

  4. Rainer

    Verfasst am 22. Januar 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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.