Wie sich Googles Designkonzept in Webprojekten einsetzen lässt: Material Design für alle

Material Design ist eines der Buzzwords dieses Jahres. Doch was verbirgt sich wirklich hinter dem eher unscheinbaren Begriff? Viele sehen Material Design als „Googles Interpretation von Flat Design“, dabei steckt sehr viel mehr hinter der von Google definierten Designsprache, die sich nicht nur für Android-Apps, sondern auch für Web-Anwendungen eignet.

Natürlich hat das 2014 vorgestellte Material Design in erster Linie etwas mit Optik zu tun. Und es ist nicht verwunderlich, dass Parallelen zu Flat Design gezogen werden: Beide Designsprachen legen den Fokus auf Icons, Schriftarten und große Bilder als tragende Elemente, die um großflächige Design-Elemente sowie kontrastreiche Farben ergänzt werden. Hier enden aber auch schon die Gemeinsamkeiten und die Unterschiede beginnen.

Die Maximen von Material Design

Während es bei Flat Design mehr um eine Ästhetik des Flachen und Reduzierten ging, steht bei Material Design die Funktion im Vordergrund. Google hat es sich zum Ziel gesetzt, eine Design-Sprache zu entwickeln, mit der sich einheitliche und zugängliche Applikationen entwickeln lassen sollen. Eine Vielzahl von Regeln wurden definiert, um eine möglichst positive Interaktion zwischen Benutzer und Anwendung zu ermöglichen.

Eine Design-Welt mit mehr Tiefgang

Material Design nutzt neben der X- und Y-Achse des Bildschirms eine virtuelle Z-Achse, um ein Gefühl von Räumlichkeit zu erzeugen.
Material Design nutzt neben der X- und Y-Achse des Bildschirms eine virtuelle Z-Achse, um ein Gefühl von Räumlichkeit zu erzeugen.

Die Welt von Material Design findet im dreidimensionalen Raum statt, was bedeutet, dass jedes Element eine x-, y- und eine z-Achse besitzt und sich darauf bewegen kann. Die Elemente werden dabei als physikalisch verstanden, mit einer Höhe in z-Richtung. Sich überlagernde Material-Objekte müssen das auch optisch widerspiegeln und in der Konsequenz also Schatten aufeinander werfen.

Material Objekte dürfen nicht denselben Raum auf der Z-Achse einnehmen. So muss beispielsweise der globale Schatten der Objekte immer deutlich machen, welches Objekt auf einer übergenordneten Ebene liegt.
Material Objekte dürfen nicht denselben Raum auf der Z-Achse einnehmen. So muss beispielsweise der globale Schatten der Objekte immer deutlich machen, welches Objekt auf einer übergenordneten Ebene liegt.

Licht und Schatten

Jede Material-Design-Anwendung wird von mehreren virtuellen Lichtquellen angestrahlt, sodass jedes Element der Anwendung, je nach Position im dreidimensionalen Raum, einen Schatten wirft. Das so genannte „directional light“ generiert einen Schatten in eine bestimmte Richtung, während die „ambient lights“ einen weichen Schatten an allen Kanten des Objekts erzeugen.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.