Webtrend 2016: Material Design

Im Juni 2014 stellte Google auf seiner Entwicklerkonferenz zum ersten Mal „Material Design“ vor. Das dazu auf YouTube veröffentlichte Video diente als kleiner Ausblick auf den kommenden Stil, den Google ab diesem Zeitpunkt für seine Produkte nutzen wollte.

Auf die Frage, was Material Design ist, antworten Mitarbeiter von Google z. B. „ein Designsystem für Interfaces“, „eine Designsprache“ und „eine neue Perspektive auf die Beziehung zwischen Gerät und Nutzer“.

Wichtigste Neuerung ist die Z- bzw. Tiefenkoordinate, die Google benutzt. So lassen sich Elemente überlagern und unabhängig voneinander animieren. Am ehesten ähneln die Elemente Papier, sie werfen einen Schatten und können aufeinander liegen, daher der Begriff Material Design. Jeden Tag haben wir verschiedene Materialen in der Hand, deren physikalischen Gesetze wir kennen. Dort sollen wir abgeholt werden und das Design der Geräte ebenso begreifen. Die Designer bei Google bauten Lichtsimulationen auf, um Oberflächen und Schatten zu begreifen und das Erlebnis am PC nachzubilden.

Im Gegensatz zu Papier können die Elemente auf Smartphone, Tablet oder PC jedoch auch verschmelzen und neue Elemente formen. Wie sich die Materialien zueinander verhalten, erklärt Google in seinem Styleguide.

Die Grundregeln von Material Design sind einfach und schnell erklärt. Jedes Material wirft Schatten, sowohl durch ein direktes Licht als auch durch Nebenlicht. Der Abstand des Materials zum Grund bestimmt die Form des Schattens.

Materialen sind nur immer 1 dp dick, dabei bedeutet dp Density-independent pixel. Diese Pixel richten sich nach der Auflösung des Ausgabegeräts, Standard ist 1 px bei 160 dpi. Die Rechenformel beträgt px = dp * (dpi / 160). Bei einem 240 dpi Gerät wäre die Dicke des Materials also px = 1 dp * (240 / 160) = 1,5 px.

Zwei Materialen können nicht zur selben Zeit am selben Ort sein, daraus geht hervor, dass sich diese auch nicht passieren können, jedoch können zwei Materialen in derselben Ebene zu einem verschmelzen. Ebenso können Materialen nicht geknickt werden, sich aber frei innerhalb ihrer Achse in der Form ändern.

Im Inneren des Materials liegt der Content, der sich innerhalb der Grenzen des Materials frei bewegen kann.

Neben diesen Regeln hat Google noch Richtlinien für die Animation des Materials, Usability, generelle Layouts bis hin zu kleinen Bestandteilen wie Menüs, Listen und Buttons. Der Styleguide hat für beinahe jedes Problem eine Lösung. Falls nicht wird er jedoch laufend erweitert. In der Kategorie Resources werden neben Farbpaletten auch Layout Templates und Design Snippets, sogenannte Sticker Sheets, angeboten.

Die Beliebtheit des Material Design liegt wohl darin, dass es gut durchdacht ist und Designern und Entwicklern die Grundarbeit abnimmt, sodass sie sich auf die Anpassung an den Kunden und die Zielgruppe konzentrieren können.