Material Design - Wie gestaltet man Webseiten?

Material Design ist ein Buzzword, das seinen Anfang bei Google nahm. Google will damit Webdesignern eine/ihre Designsprache näherbringen, die nicht nur bei der Gestaltung von Webseiten, sondern auch bei Android-Apps, dienlich sein soll.
Dem Material Design steht das sog. Flat Design gegenüber. Beiden Ansätzen ist gemein, dass sie auf grosse Bilder, Icons, Schriften sowie grossflächige Design-Elemente setzen.

Screenshot von design.goole.com

Im Gegensatz zu Flat Design setzt Material Design auf Funktionalität, weniger auf Ästhetik. Ziel ist es, die Interaktion zwischen Anwendung und Benutzer zu erleichtern.

Google's Webseite zum Thema ist wirklich gründlich und vermittelt Erkenntnisse in aller Tiefe. Ein Besuch für Design-Interessierte lohnt sich auf alle Fälle.

Hier ein paar zusammenfassende Themen als Teaser um was es geht.

Wo Licht ist, ist auch Schatten
Die Szenerie einer Webseite oder eines Smartphone-Screens wird wie auf einer Bühne ins beste Licht gerückt und jeder Gegenstand angestrahlt. "Ambient lights" werfen einen weichen Schatten an alle Kanten,  "Directional light" geniert einen Schatten in eine Richtung.

3D wo 2D ist

Auf den Screens soll dem Benutzer der Eindruck vermittelt werden, dass sich alles im Raum abspielt und dass Tiefgang hergestellt wird. So werden Gegenstände auf einer x-, y- und einer z-Achse dargestellt. 2-D-Gegenstände werfen eben dann Schatten auf den darunterliegenden Gegenstand oder den Untergrund, resp. Hintergrund.

Bewegung wird simuliert

Design erträgt Übertreibung schlecht. So gilt "Umblättern" als unerwünscht. Bewegung wird durch Interpolation erzeugt.

Material Motion zeigt wie eine App organisiert ist und was sie tun kann. Bewegung fokussiert auf verschiedene Ansichten, weisst darauf hin, was geschieht, wenn ein Nutzer die Geste abgeschlossen hat. Sie schafft eine Hierarchie und Beziehung zwischen den Elementen.

Kontinuität

Kontinuität ist ein gebot von Material Design. So soll jede Bewegung aauf dem Bildschirm logisch nachvollziehbar sein und nicht bloss der Ästhetik dienen. Zum Beispiel dient der "Inkdrop"-Effekt dem Nutzer anzuzeigen, dass er und wo er auf eine bestimmte Stelle geklickt hat. Davon ausgehend weiter sich ein Overlay radial aus.

Zusammenfassend lässt sich sagen, dass Material Design eine Grundlage bietet, die konsequent angewendet zu optisch sehr ansprechenden Screen-Gestaltungen führt und ein Hilfsmittel ist, um die Benutzerführung zu vereinheitlichen und somit für den Nutzer zu vereinfachen.





Video zum Thema Making Material Design: 
Crafting Material


Hier noch interessante Links zu konsequent angewandtem Material Design Webseiten:

- Material Up
- Material Design Lite
- Material Interaction
- Material Ui