Ralf Kienzler

25.3.2015

Material Design – Was steckt hinter dem Designtrend 2015

Zusammen mit einer neuen Android Version namens Lollipop hat Google auf seiner Entwicklerkonferenz I/O letzten Sommer eine neue Designsprache namens Material Design präsentiert, die plattformübergreifend auf allen Geräten eingesetzt wird. Seither wird dieser Leitfaden als einer der großen Trends für dieses Jahr ausgerufen, aber wodurch genau unterscheidet er sich eigentlich von anderen Styleguides?

Schaut man sich die Material Design Grundsätze an, so werden drei Punkte betont:

  • Die Material Metapher
    Bekannte Materialien aus der Realität sollen das Erscheinungsbild beschreiben und durch digitale Möglichkeiten ergänzt werden. Das Interface ist der realistischen (taktilen) Wahrnehmung von Papier nachempfunden.
  • Intuitiv und natürlich
    Die Oberflächen (Surfaces) sollen sich wie vertraute Objekte aus der Wirklichkeit verhalten (NUI).
  • Animationen mit Bedeutung
    Bewegungen von Komponenten erfolgen auf natürliche Weise und unterstützen so die Interaktion.
material-3D
Material Design

Was versteckt sich hinter der Papier Metapher?

Material Design Pages sollen wie Papierstapel übereinander oder nebeneinander angeordnet werden und so ein plastisches Erlebnis schaffen. Welche Seiten über anderen positioniert werden, wird durch die Einführung der Z-Achse geregelt, jedes Objekt erhält also eine Tiefen-Koordinate. Sichtbar wird ihre Position durch virtuelle Beleuchtung (Key light & Ambient light), das heißt im Klartext erstmal nichts anderes als das Comeback des Schattens.
Die Beschreibung der Oberflächen und Seitenelementen entspricht darüber hinaus einer ausführlichen und modernen Interface Guideline, die aktuelle Trends wie Responsive Design, den Einsatz von viel Weissraum und großer Typografie beschreibt, Empfehlungen gibt und Beispiele liefert.

Motion provides meaning

Interessanter sind da schon die Kapitel, die sich mit der Beschreibung von Animationen beschäftigen: hier werden Empfehlungen für das Verwenden von Animationen von Elementen und Ansichten, ihre physikalischen Eigenschaften (wie sie beschleunigen und abbremsen und welche Kräfte auf sie wirken) und wie sie zueinander stehen und Ansichten verbinden. In der Ausführlichkeit findet man das in Interface Guidelines üblicherweise nicht.
Wert wird hier darauf gelegt, dass Animationen bei Material Design nicht nur Übergänge zwischen zwei Ansichten sind, sondern dass gezielt choreografiertes Motion Design die Aufmerksamkeit des Nutzers lenken kann und ihr so ein eine zusätzliche Funktion zuteil wird. Bisher beschreiben Animationen meinst nur ihre Bewegung (z.B. Auftauchen, Hineinbewegen, Überblenden) nicht ihren funktionalen Charakter (z.B. Feedback geben oder Hierarchisches Timing).
An dieser Stelle könnte sich künftig tatsächlich einiges ändern: wenn wir darüber nachdenken, wie sich Dinge bewegen, werden Animationen mehr werden als nur schickes Beiwerk. Vielleicht werden Agenturen irgendwann Animation als dritter Bestandteil ihrer Arbeit neben Interaktion und Ausgestaltung etablieren.

Zusammenfassend zeichnet Material Design also vor allem zwei Dinge aus:

  • Material Design ist eine moderne, umfangreiche und sehr detaillierte Interface Guideline, die beim Entwickeln von verständlichen und anschaulichen Layouts hilft, aber wie alle detailreichen Guidelines auch einschränkt.
  • Im Kern unterscheidet sich Material Design aber vor allem durch die ausführliche Beschreibung von Animation, die den Nutzer beim Verständnis der Interaktion helfen soll.

Wer von Material Design Trend 2015 spricht, meint in erster Linie vermutlich Anleihen beim Google Styleguide und einen durchdachten Einsatz von Animation.

Ralf Kienzler

Zauberer

rk@coeno.com

Newsletter

Bleib auf dem Laufenden!

Mit dem 4x jährlich erscheinenden Newsletter erhalten Sie alle 3 Monate aktuelle Neuigkeiten unserer Agentur. Wir werden Ihre E-Mail Adresse zu keinen weiteren Zwecken verwenden und Sie können den Newsletter jederzeit bequem über einen Link im Mailfooter abbestellen.
Mehr dazu erfahren Sie in unseren Datenschutzbestimmungen.

Thank you! Your submission has been received!
Oh! Etwas hat nicht geklappt. Bitte versuch es nochmal.