Flat Design 2.0: Das ist Material Design

Spätestens als das Team um Jon Wiley auf der Google I/O 2014 die Grundprinzipien des Material Designs und dessen feste Integration in das kommende „Android L“-Betriebssystem vorgestellt hat, erregt Material Design als neuer gestalterischer Trend weltweit große Aufmerksamkeit.

Grundsätzlich arbeiteten die Designer von Google an einem Konzept zur einheitlichen Gestaltung für alle Geräte von Smartphones über Tablets bis zu Desktop-Computern („Cross-platform Design“). Da Gestaltungsprinzipien wie Konsistenz und ein einheitliches „Look & Feel“ jedoch nicht nur plattformübergreifend, sondern gerade auch innerhalb einer Plattform oder einer Webseite wichtig sind, entwickelte das Team den Ansatz weiter und definierte schließlich einen neuen, universellen Design-Trend, der sowohl klassische Gestaltungsprinzipien wie auch wissenschaftliche Innovationen und Techniken in einer visuellen Sprache vereint: Material Design.

Vorhandene Erfahrung auf das Design von Software übertragen

Für die Herstellung der meisten Dinge und Objekte im „echten Leben“ hat die Menschheit bereits viele Jahrtausende Erfahrung gesammelt: Durch genaue Beobachtung der Umgebung, durch Aussortierung der besten Materialien und schließlich durch Erlernung der speziellen Eigenschaften einzelner Materialien haben wir tausende Jahre an Erfahrung in der Erstellung von Objekten gesammelt.

Im Gegensatz dazu steckt die Gestaltung von Software - ob Webseite, App oder Desktopanwendung - noch in den Kinderschuhen, denn Screendesign, Webdesign und Interaktionsdesign sind allesamt gestalterische Ansätze, die erst wenige Jahrzente alt sind.

Material Design definiert daher einige wichtige Prinzipien, um Konzepte guter Gestaltung mit den grundlegenden physikalischen Eigenschaften zu verbinden, die wir Menschen bereits seit so langer Zeit kennen und beherrschen.

Oberflächen, Gewicht und Hierarchie: Materialien als Metapher für Interface-Elemente

Egal ob eine Software mit einer Maus und einer Tastatur, per Touch-Steuerung mit den Fingern oder sogar mit der eigenen Stimme gesteuert wird: Durch den Einsatz von bekannten Materialien als Metapher für Interface-Elemente bietet Material Design ein ganzheitliches Konzept, um eine anregende und verständliche Erfahrung zu bieten.

Oberflächen und Kanten eines Materials bieten beispielsweise visuelle Hinweise, die wir aus der „greifbaren“ Realität kennen und helfen so, mögliche Interaktionen schnell zu verstehen. Digitale Materialen bieten dabei sogar den Vorteil, die Regeln der physikalischen Welt zu brechen und so bekannte Prinzipien wie durch Magie zu erweitern - wodurch die Interaktion mit einer Oberfläche zum virtuellen Erlebnis werden kann.

Unsere Perspektive: Material Design als Gestaltungsansatz für ein modernes Webdesign

Neben greifbaren Materialen als Metaphern beschreibt Material Design auch den Einsatz von typographischen Elementen, sowie von Rastern, Farben und Bildern. Diese sollen - im Gegensatz zu anderen gestalterischen Trends - allerdings nicht nur schön anzusehen sein, sondern vielmehr eine klare Hierarchie erzeugen, die den Fokus des Betrachters bewusst auf die wichtigsten Elemente lenkt.

Durch eine bewusste Farbwahl, durch einfache, wirkungsvolle Typographie und durch wohl bedachte Weißräume können viele Prinzipien des Material Designs auch im Webdesign eingesetzt werden, um wichtige Informationen und Interaktionen einer Webseite zu betonen.

Auch die Bewegung von Elementen durch Animationen und Übergänge helfen, die Aufmerksamkeit eines Nutzers bewusst zu steuern. Gerade moderne Techniken wie CSS-Transitions und CSS-Animationen können durch Einhaltung der grundlegenden Prinzipien des Material Designs deutlich intuitiver und zielgerichteter gestaltet werden.

Preview: Animationen, Style und Layout, sowie Komponenten und Muster für ein modernes Webdesign

In den nächsten Artikeln werden wir daher einen detaillierten Einblick in den Einsatz von Material Design zur Gestaltung moderner, plattformübergreifender Webseiten geben. Insbesondere werden wir dabei den Einsatz von authentischen und zielführenden Animationen behandeln, aber auch die Grundlagen einer plattformübergreifenden Gestaltung und eines einheitlichen Layouts beschreiben. Auch werden wir einen Blick auf bereits vorhandene Komponenten des Material Designs wie „Karten“, „Chips“ und die traditionellen „Buttons“ werfen und allgemeine Muster zur Erzeugung eines konsistenten Webdesigns vorstellen.

Abschließend werden wir die (durchweg positiven!) Auswirkungen von Material Design auf die Usability einer Webseite oder Webanwendung unterstreichen und einige Ressourcen für eine intensivere Beschäftigung mit dem Thema präsentieren.