Begriffserklärung: “Material Design”

Material Design ist eine Erscheinung, die eine kurze Einführungsgeschichte benötigt. Warum? Weil es mit einer Einführungsgeschichte auf den Markt kam.

Bild Die meisten Design-Trends im Web entwickeln sich nach und nach, ähnlich wie Wasser sich langsam in einem unterirdischen Strom ansammelt. Erst wenn ein solcher Strom an einer sichtbaren Quelle hervortritt, bekommt er einen Namen und wird bekannt. Über den Namen wird dann allerdings nicht mehr groß gesprochen. Was organisch entsteht, braucht keine großen Erklärungen.

Die Definition von Flat Design wird im Vergleich zu skeumorphischem Design in der Web-Entwicklung sehr deutlich. Nicht so beim Material Design, seine Einzelelemente sind optisch schwieriger vom Flat Design zu unterscheiden. Manche sagen sogar, dass es beim Material Design mehr um eine Designphilosophie geht als um optische Merkmale.

Material Design wurde 2014 von Google vorgestellt, samt Namen, Werkzeugkasten und Bedienungsanleitung, alles auf einmal. Eine neue Designsprache war geboren. Seit seiner “Geburt” schreiben hunderte Autoren darüber, wie und warum Material Design ein berechtigter Nachfolger vom Flat Design ist. Oder ist er es doch nicht? Mal ehrlich, das wird sich erst nach einiger Zeit zeigen. Der von Google angebotene Vergleich mit einer universellen Sprache stimmt nachdenklich. Da war mal dieses “Esperanto”. Eine großartige Idee. Eine neue Sprache, die alle Schwierigkeiten beseitigen sollte, die durch alte, unlogische und oft unnötig komplizierte Sprachen entstanden sind. Nur, die Unlogischen und Komplizierten haben sich nicht verdrängen lassen und sind heute lebendiger denn je.

Es heißt also abwarten und schauen, wie Material Design sich am besten einsetzen lässt. In der Zwischenzeit gibt es bei der Umsetzung dieser Designsprache ein paar Punkte, die man unbedingt beachten sollte, besonders in Bezug auf responsives Design und seine Hauptprinzipien. Diese Punkte haben wir für Sie aufgelistet.

1. Prinzip “Material”

Material Design sollte die digitale Grafik mit einer betonten Stofflichkeit anreichern. Nicht umsonst hat Carl Kleiner, der Designer des Wallpapers für Android Lollipop, seine Ideen mit farbigem Papier und Skalpell erarbeitet. Die Papierelemente können mit anderen Elementen aus Bibliotheken gefüllt werden und auf diese Weise entsteht eine Material Design Card. Nur lässt sich die materielle Stofflichkeit nicht ohne Weiteres auf jedem Display präsentieren. Die Richtlinien für responsive Layouts im Material Design beschreiben 6 verschiedene Muster, wie die Breite von Designelementen auf die Änderung der Displaygröße reagiert und 3 weitere Muster, wie die Sichtbarkeit derselben die Elemente ändern könnte. Um sicherzustellen, dass die Elemente letztendlich Ihre gewünschte Design-Idee getreu wiedergeben, sollte man sie in jedem Fall auf echten Endgeräten testen.

2. Prinzip “Bewegung”

Bewegungen und Animationen spielen für das UX im Material Design eine zentrale Rolle. Die Elemente von Material Design können unabhängig voneinander überlagert, animiert und mit Schatten versehen werden. Das bringt Bewegung. Wiederum bieten die Google Richtlinien verschiedene Möglichkeiten, wie die Elemente gezeigt oder versteckt werden können. Dabei sind alle UX Design Elemente wie Cards, Buttons, Listen und Formulare mit den vertrauten Animationen wie dem “Ripple Effekt” versehen. Die Animationen werden durch den Klick auf einen Button ausgelöst und die Prinzipien der Bewegungen folgen bekannten physikalischen Gesetzen. Das garantiert ein gutes visuelles Feedback für den Nutzer. Auch das muss auf echten Endgeräten getestet werden, damit die Bewegungsabläufe einheitlich bleiben und dem Kontext gut angepasst sind. Wer das Prinzip “Bewegung” konsequent umsetzt, muss seine App auch konsequent testen.

3. Prinzip des print-basierten Designs

Material Design setzt auf klassische Gestaltungsregeln und Elemente des Grafik-Designs. Genauso wie Flat Design, benutzt das Material Design viele Icons und Schriftarten. Das sichert hohe Wiedererkennungswerte für die tragenden Design-Elemente. Zusätzlich verfügt aber jedes Design-Element über einen Tiefenparameter. Das hilft, die Interface-Elemente nach den Ebenen zu strukturieren, die Elemente bekommen eine klare Hierarchie und Definition. Auch hier kommen die Richtlinien für responsives Design zur Verwendung und bestimmen, welche Ebene auf welchen Display-Größen sichtbar wird. Google Richtlinien bieten Anweisungen für über 10 Display-Größen. Dabei basieren die Anweisungen auf Google Chrome Browser. Selbstverständlich muss man das fertige Design auch auf verschiedenen anderen Browsern testen.

Beim Erschaffen des Material Designs verfolgte Google das Ziel, das Design von Websites und Apps über alle Endgeräte hinweg zu vereinheitlichen. Es gibt aber sehr viele Endgeräte. Dazu gibt es noch die 5 am meisten benutzten Browser und verschiedene Betriebssysteme. Dazu noch die Tatsache, dass nicht alle Nutzer die letzte Version des Betriebssystems haben werden, was besonders auf Windows-Nutzer zutrifft.

Sie werden feststellen, dass das einheitliche Erlebnis nur mit vielen Tests möglich wird. Damit eine Material Design Card mitsamt ihrer Elevation und Animation auf allen Geräten korrektes Verhalten vorweist, muss man dieses Verhalten vorher korrekt testen. Es stimmt, dass alle Elemente des Material Designs auf Responsives Design ausgerichtet sind. Aber so gut die Google Design Richtlinien auch sein mögen, das Testen und Korrigieren können sie nicht verhindern.

Besuchen Sie uns für weitere Informationen unter www.united-coding.com.