WebWissen: Material Design

Material Design ist der neue Webdesign-Trend im Jahr 2015 und die stärkste Veränderung im Bereich Webdesign seit Microsofts Einführung von Flat Design im Jahr 2010. Google, Erfinder der Designsprache, hat Guidelines veröffentlicht, welche das Konzept, Ziele und Prinzipien von Material Design veranschaulichen und erläutern. Wir geben schonmal einen kurzen Einblick.

Was bedeutet „Material Design“ und worum geht es? – Konzept und Prinzipien

Material Design bringt die Prinzipien von gutem Design sowie den Fortschritt und die Möglichkeiten von Technologie & Wissenschaft in einer neuen visuellen Sprache zusammen. Das Material ist als Metapher zu verstehen mit der Idee, es haptisch anmuten zu lassen. Das Material erinnert an Papier, ist technologisch fortgeschritten und begeistert auch durch simple aber logische Elemente wie Animationen. Animation und Bewegung ist ein zentrales Prinzip von Material Design. Bewegungsabläufe sind immer dem Kontext sinngemäß nachempfunden und dennoch einheitlich. Die Interaktion des Nutzers mit dem Interface wird vollständig nachvollziehbar, durch visuelles Feedback der Oberfläche. Die Prinzipien von Material und Bewegung folgen immer den physikalischen Gesetzen.
Ein weiteres Prinzip dem „Material Design“ folgt sind die Grundlagen von Print-basiertem Design: Typografie, Raster, Farbe, Verwendung von Bildern. Diese Grundlagen schaffen Hierarchie, geben den einzelnen Elementen Bedeutung und führen den Nutzer.


Wie wird „Material design“ praktisch umgesetzt? – Reduktion und Performance

Haptische Oberflächen, Texturen und andere dekorative Elemente sind schon lange kein Bestandteil mehr von Webdesign. Es geht vielmehr darum, dem Nutzer die bestmögliche User Experience zu bieten und ein natürliches Verhalten der Objekte und des Interfaces zu gewährleisten. Flat Design hatte bereits einen ähnlichen Ansatz: Nur Elemente, die von Nutzen sind zu verwenden, Fokus auf den Inhalt und das unterstützend ohne ablenkende Objekte oder Effekte. Dieser Ansatz wird im Material Design nun erweitert. So wird bspw. Performance neuerdings verstärkt betrachtet. Durch den extrem hohen Anteil von mobilen Endgeräten müssen Websites schnelle Ladezeiten haben, um auch den Nutzern unterwegs optimale User Experience zu bieten. Für die Gestaltung bedeutet dies, unnötige Elemente komplett zu eliminieren, da diese die Performance negativ beeinflussen würden.

Material Design Graphics
Viel Weißraum, flächige Farben und grafische Icons geben der Designsprache ein modernes, schlichtes und einheitliches Erscheinungsbild. [Bildquelle: Screenshot aus Googles Material Design Video]
Material Design Layering
Im neuen Material Design verfügt jedes Element über ein Tiefen-Parameter. Durch verschiedene Ebenen bekommen die Interface-Elemente Hierarchie und Struktur. Haptik und Tiefe gewinnt nach Flat Design wieder an Bedeutung. [Bildquelle: Google Developers Blog]

Google ist damit wieder einen großen Schritt in Richtung einheitlicher Designsprache gegangen und setzt einen neuen Standard. Hier findet ihr die Guidelines von Google zu Material Design.

Alle Beiträge von Michael

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.