Google in gestalterischer Mission: So funktioniert das »Material Design«

|

Dies ist ein Gastartikel von Jasmin Schmidt von overnightprints.de

Auf der diesjährigen I/O Konferenz im Juni stellte Google seine Neuheiten vor. Neben vielen spannenden Vorstellungen sorgte eine Präsentation für besonders viel Aufsehen: Die Einführung der Designsprache »Material Design«.

Was ist »Material Design«?

Es handelt sich dabei um eine neue und produktübergreifende Designsprache von Google. Sie soll zukünftig auf alle Produkte und Geräte des Konzerns angewendet werden.

Ziel war es, mit »Material Design« eine natürliche und »plastische« Benutzeroberfläche zu gestalten. Dies wird u.a. durch Kontraste, Animationen und verschiedene Ebenen realisiert. Zweck dieser neuen Designsprache ist es, Klarheit zu schaffen und eine Illusion von Haptik für den Benutzer zu erzeugen. Dieser soll sich auf der Benutzeroberfläche nicht verlieren, sondern vielmehr aufgezeigt bekommen, was er machen kann bzw. gerade getan hat. Im Großen und Ganzen geht es darum, eine einfache, klare und intuitive Bedienung zu schaffen. Zudem wird der Zweck verfolgt, ein einheitliches Erlebnis für jedes Gerät und jede Bildschirmgröße anzubieten, ein sogenanntes »Cross-Platform Design«.

Was steckt hinter »Material Design« und was sind die Grundprinzipien?

»Material Design« folgt einigen wichtigen Prinzipien, die eine gelungene Gestaltung mit grundlegenden physikalischen Eigenschaften verbinden.

Materialien als Metapher

Das erste Grundprinzip lautet: Materialien als Metapher. Bei diesem Konzept besteht die Oberfläche aus Wahrnehmungselementen, die in etwa so reagieren, wie es ein vergleichbares Element in der Realität tun würde. Der User soll dabei unterstützt werden, seine Handlungsoptionen schnell zu erkennen und vor allem auf Anhieb zu verstehen. Oberflächen, Kanten und Strukturen bauen auf die Erfahrungen der »greifbaren« Realität auf und können dank der Virtualität sogar noch erweitert werden. Beispiel: Auf einer Benutzeroberfläche werden unwichtige Elemente in den Hintergrund gerückt, abgedunkelt und verschwommen dargestellt, während andere auffällig und auf einer mit Schatten hinterlegten Fläche in den Vordergrund ragen.

Form wird zur Funktion

Beim zweiten Grundprinzip geht es um die Gestaltung. Klar, grafisch und beabsichtigt lautet das Credo. Was »Material Design« ausmacht sind einfarbige, großflächige Elemente, die auch gerne sehr kontrastreich dargestellt werden. Des Weiteren werden zwar Icons verwendet, diese jedoch neu gestaltet und sehr reduziert angewandt. Genauso wirkungsvoll wird Typographie eingesetzt, um den Nutzern Klarheit zu verschaffen. Aus diesem Grund wurde auch der Android-Font »Roboto« angepasst und lesbarer gestaltet. Mithilfe der Gestaltung von Icons und anderen Elementen soll der Benutzer schnell erkennen, wo er sich gerade befindet, was er gerade gemacht hat und was für weitere Optionen für ihn bereitstehen.

material-design-farbpalette-hauptfarbe
Hauptfarbe
material-design-farbpalette-akzentfarbe
Akzentfarbe
material-design-farbpalette-praxis
Farbzusammenspiel in der Praxis

Einfaches Farbschema als Grundlage: Eine Hauptfarbe und eine Akzentfarbe genügen, um die Funktion „Dateien hinzufügen“ sinnfällig zu vermitteln (Bildquelle)

Bewegung unterstützt Bedeutung

Zu guter Letzt geht es bei »Material Design«, und darin unterscheidet es sich von anderen Designsprachen, um Animation, Schattierungen und Überlagerungen. Der Grundsatz lautet: Bewegung unterstützt Bedeutung. Dabei war es den Entwicklern besonders wichtig sowohl physikalisch korrekte als auch angenehme Effekte zu schaffen. Denn wenn alles blinkt und über den Bildschirm fliegt, ist keiner glücklich und das Ziel, Klarheit zu schaffen, damit auch zunichte gemacht. Im »Material Design« werden solche Effekte genutzt, um ein »virtuelles haptisches Feedback“ zu erzeugen. Viel Wert wird dabei auf den Ursprung einer Interaktion sowie den Entstehungsort einer Animation gelegt.

Wie unterscheidet sich »Material Design« von »Flat Design«?

Zwar beruht die Ähnlichkeit zwischen »Flat Design« und »Material Design« darauf, dass auch letzteres auf Icons, Schriftarten und einfarbige, großflächige Elemente setzt. Es gibt allerdings einen großen Unterschied zwischen »Flat Design« und »Material Design«: Statt nur mit einer x- und y-Koordinate auszukommen, arbeitet »Material Design« zusätzlich mit einer z-Koordinate. Das bedeutet, dass nun auch dreidimensional gearbeitet werden kann. Und das hat einige Vorteile: Elemente können unabhängig voneinander überlagert, animiert und Effekte berechnet werden.

material-design-z-achse material-design-schatten material-design-z-achse-praxis

Die drei Raumachsen; Schatten, erzeugt aus Simulation von Umgebungs- und Schlaglicht; Praxis: Der Schatten visualisiert, dass sich der pinke button auf der Z-Achse näher am Auge des Betrachters findet als die blaue Fläche, die wiedrum nur knapp über dem weißen Hintergrund „schwebt“.

Bildmaterial: http://www.google.com/design/spec/what-is-material/environment.html# und http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation

Wo ist »Material Design« bereits umgesetzt?

Wie Googles »Material Design« in der Praxis aussieht, demonstriert am besten das aktuelle Android 5.0 Lollipop. Der Sprung auf Version 5 wird als bislang größter Entwicklungsschritt des Google Betriebssystems gesehen, »Material Design« ist dabei ein wesentliches Merkmal. Weitere Google-Produkte wie Gmail 5.0, Google+ oder die YouTube-App sind ebenfalls schon im neuen Design zu sehen. Es deutet sich an, dass »Material Design« auch für andere Anbieter von Apps zu einem Maßstab bei der optischen Gestaltung wird. Nicht-Google Apps für Android im »Material Design« sind zum Beispiel »Weather Timeline – Forecast«, der »Amaze File Manager« und der populäre News-Reader »Pocket«.

Schreibe einen Kommentar

TYPO3 9 LTS Videotraining

Das Videotraining zu TYPO3 9 LTS

Momentan in Vorbereitung

Klicke hier für weitere Infos zum neuen Videotraining!

close-link

YouTube aktivieren?

Auf dieser Seite gibt es mind. ein YouTube Video. Cookies für diese Website wurden abgelehnt. Dadurch können keine YouTube Videos mehr angezeigt werden, weil YouTube ohne Cookies und Tracking Mechanismen nicht funktioniert. Willst du YouTube dennoch freischalten?