Letzte Woche hat Google in Rahmen seiner Entwicklerkonferenz eine neue Designsprache vorgestellt. „Material Design“ heißt sie, und soll zukünftig für alle Google-Produkte verwendet werden – seien es Android-Apps, Webseiten oder Chrome-Browser. Unsere Grafikabteilung hat die Neugier gepackt und sich gleich mal mit Googles neustem Schatz beschäftigt…

ZIELE UND PRINZIPIEN VON „MATERIAL DESIGN“

Als Ziel hat Google sich gesetzt, eine visuelle Sprache zu entwickeln, die klassische Prinzipien von Design mit neuen Technologien vereint und es ermöglicht, für den Benutzer einen nahtlosen Übergang zwischen allen Plattformen und Gerätegrößen zu schaffen. „Material Design“ soll sich überall wie Zuhause fühlen, egal ob auf einer kleinen Smartwatch oder auf einem riesen Android-TV-Bildschirm.

Die grundlegenden Prinzipien des neuen Designs kommen aus der Welt des Print. Klare Raster, großzügige Schriften und Bildschirm füllende Bilder zählen zu den wichtigsten Bausteinen der neuen Layouts. Auch bunte knallige Farben kommen vermehrt zum Einsatz. Damit erinnert „Material Design“ stark an das Flat-Design ( in letzten Jahren sehr populär im Bereich Web- und App-Design). Eine Sache ist jedoch grundlegend anders: Obwohl es auf den ersten Blick so erscheinen kann, ist „Material Design“ nämlich gar nicht Flat!

„MATERIAL DESIGN“ IST DREIDIMENSIONAL

Das neue Design kann man sich am besten als eine Art Papierschnitt vorstellen. Jedes Element wird als eine materielle Schicht angesehen. So können einzelne Elemente unabhängig voneinander überlagert und bewegt werden. Durch Zusammenspiel von Oberfläche und Schatten schafft Google eine physikalische Struktur, die erklärt, was geklickt oder bewegt werden kann. Auch Feedback von der Oberfläche und Elementen ist beim Einsatz von „Material Design“ wichtig.

„MATERIAL DESIGN“ IST DREIDIMENSIONAL. Quelle: Google.de

„MATERIAL DESIGN“ IST DREIDIMENSIONAL. Quelle: Google.de

 

BEWEGUNG IST DAS „A“ UND „O“

Jede Oberfläche, jedes Bild, jeder Button soll nach den Prinzipien von „Material Design“ dem User Feedback geben, ob es berührt, angeklickt oder bewegt wurde. Durch subtile Veränderung der Farbe, Transparenz oder Schatten lässt sich leicht erkennen, was gerade auf dem Bildschirm passiert. Alles ist auf Bewegung ausgerichtet.

Auch das Ausführen von Funktionen einer Webseite oder einer App wird durch Bewegung untermalt. Kein Element erscheint einfach so aus dem Nirgendwo. Die Oberflächen verschieben sich, ähnlich wie sich Papierblätter in der Realität getan hätten. Pop-Ups und Overlays breiten sich aus dem Punkt aus, der geklickt oder angetippt wurde. Zieht man an einem Element, werden weitere Elemente mitgezogen oder öffnen etwas, was da drunter liegt. All das soll die Benutzung der Anwendungen, die nach Prinzipien von „Material Design“ produziert wurden zu einem ganz neuen Benuztererlebnis machen.

„MATERIAL DESIGN“ – EIN KURZLEBIGER TREND ODER EIN MUSS FÜR DIE ZUKUNFT?

Zur Zeit lässt sich schwer sagen, ob „Material Design“ ein interner Trend von Google Produkten bleibt oder nach und nach auf die große Design-Community überschwappt. Auf jeden Fall bringt diese neue Design-Richtung einige interessante Einsätze mit sich und greift genau da ein, wo viele die Mängel an Flat-Design sahen, nämlich in puncto Unübersichtlichkeit und fehlender Hierarchie der Inhalte.

Für alle, die mehr über das „Material Design“ wissen möchte, hat Google eine Webseite mit Guidlines (https://www.google.com/design/spec/material-design/introduction.html#introduction-goals) ins Netz gestellt. Außerdem gibt es eine kleine Kosstprobe unter https://www.polymer-project.org/ Dieses UI-Kit von Google kann man als Developer für die Entwicklung eigener „Material“-Web-Applikationen nutzen.

Quellen:
https://www.google.com/design/spec/material-design
https://googledevelopers.blogspot.de/2014/06/this-is-material-design.html
https://www.polymer-project.org/