Jeder liebt Material Design! Wirklich jeder? Nein, ein kleines gallisches Dorf … das gar nicht so klein ist, leistet Widerstand. Während sich die Designstandards auf dem Gebiet der mobilen Apps weit verbreitet haben, scheint ihr Siegeszug im Desktop-Web zu stagnieren. Woran liegt das? Und ist das nun gut oder schlecht?
Die Idee des Material Design ist noch relativ neu und dann doch wieder nicht: immerhin orientieren sich die Designstandards und -empfehlungen an klassischen Print-Vorlagen und haptischen Prinzipien. Als Sprache und Designtrend kam das Thema jedoch erst vor knapp zwei Jahren auf – genauer gesagt auf der Google I/O im Juni 2014.
Von Android ins Web
Zuerst präsentierte Google seine neue Design-Sprache ausschließlich für Android. Schnell entstanden jedoch auch Adaptionen der Designelemente für das Web und diverse Frameworks. Im Jahr 2015 legte Google darum selbst nach: Mit Material Design Lite bietet der Internetriese seit dem vergangenen Jahr eine eigene Library an, die das Material Design ins Web bringt.
Darüber hinaus gibt es inzwischen eine fast unüberschaubare Zahl an UI-Sets, Themes und Frameworks, die es Entwicklern und Designern erleichtern, die Ideen des Material Designs in ihre Anwendungen und Websites zu übernehmen. Angular Material, MDB, Materialize und viele weitere Lösungen haben wir bereits im Dezember 2015 vorgestellt; jüngst hielt Material Kit Einzug in die große Familie der Designsprache. Sogar für XAML steht ein Material Design Toolkit zur Verfügung.
Chrome für iOS wird materiell
Auch bei Google selbst gibt es immer wieder kleine Schritte in Richtung der Vereinheitlichung des Look-and-Feel ihrer Anwendungen und Plattformen. Die Desktop-Version von Chrome 50 für Chrome OS bekam erst im April ein Redesign nach den Material-Design-Standards verpasst. Zu den Neuerungen im Design gehören ein angepasstes Farbschema, sowie MD-Buttons. Windows- und Mac-User können das überarbeitete Design bisher nur über Chrome Canary testen; die Überarbeitung ist noch nicht abgeschlossen.
Das Stichwort der „Vereinheitlichung“ stellt jedoch eine gute Überleitung zur Kritik an den Design-Standards dar. Immerhin hat der Trend nicht nur Anhänger, auch die Gegenseitige hat einiges zum Material Design zu sagen. Das wohl wichtigste Argument lautet wohl, dass nur Google wirklich originelle Websites in diesem Stil erstellen kann – und dass alle anderen Seiten dann eben aussehen wie von Google gemacht. Im Weiteren wird argumentiert, dass das Material Design die Kreativität im Webdesign unterdrücken würde, weil die Design-Standards und vorgefertigten Elemente immer die gleiche Handschrift tragen. Alles sehe gleich aus, so die Kritiker am Material Design.
Erst Bootstrap, jetzt Material Design
Um es vorweg zu nehmen: Der Vorwurf, die Kreativität von Webdesignern zu töten, ist nicht neu: schon Bootstrap musste sich diese Unterstellung gefallen lassen, genau so wie das Flat Design. Wie man an diesen Beispielen aber sieht, ist das Internet noch immer nicht zu einem grauen Einheitsbrei geworden. Insofern kann die Sorge um kreatives Design im virtuellen Raum wohl als übertrieben angesehen werden – kreatives Webdesign bewegt sich jenseits von Trends; es kann Trends aufgreifen und sich zunutze machen, ohne gleich langweilig zu werden.
Andererseits ist da aber auch die Kritik am „Google-Stil“ an sich, die weiter geht als nur zu unterstellen, dass kein Platz mehr für Kreativität im Material Design bleibt. Immerhin stimmt es ja: Google hat die Standards entworfen und bestimmt darüber, wie diese sich weiterentwickeln. Und auch, dass Google selbst Vorreiter in der Umsetzung des Material Designs ist, lässt sich nicht von der Hand weisen. Darum trauen sich viele Designer gar nicht erst an den Designtrend heran – sie möchten sich nicht in ihrer Freiheit einschränken lassen.
Versteckte materielle Designs
Im Material Design geht es allerdings vor allem darum, was der jeweilige Webdesigner aus dem Trend macht – immerhin kann Google zwar Richtlinien aufstellen; erzwingen kann der Internetriese die Einhaltung dieser Regeln aber nicht. So lassen sich einzelne Elemente des Material Designs auch durchaus in Apps einbinden, die auf den ersten Blick gar nicht nach Google aussehen.
Wer hätte beispielsweise bei dem beliebten Messenger WhatsApp jemals gedacht, dass die mobile App aussehen würde, als stamme sie aus dem Hause Google? Das tut sie nicht – dennoch entsprechen so manche Designelemente den Standards des Material Designs. Dazu gehört beispielsweise der Kopfbereich, der beim Scrollen sichtbar nach oben hin ein- oder ausgefahren wird. Auch die sichtbare Reaktion in Form einer grauen Welle, die abgespielt wird sobald der Nutzer einen Chat oder Kontakt antippt, entspricht den Spezifikationen des Designtrends. Einen Floating-Action-Button oder das typische Kartendesign sucht man jedoch vergebens.
Awards für Best Practices
Im Web kann genau so mit den Spezifikationen verfahren werden. Google selbst vergab im vergangenen Jahr die Material Design Awards. Ins Auge sticht dabei vor allem die Auszeichnung für die App der New York Times – diese wurde nämlich für einen besonders gelungen Umgang mit Typografie ausgezeichnet. Und griff dabei keineswegs ausschließlich auf den schlichten Stil zurück, den Google empfiehlt.
Auch darüber hinaus hat Google die Kritik an der rigiden Formulierung der Font-Guidelines erhört: Waren zu Beginn nur zwei Fonts mit den Richtlinien kompatibel, ermutigt das Unternehmen Designer nun, auch zu anderen Schriftarten zu greifen, solange sie mit bestimmten Regeln übereinstimmen. Auch darüber hinaus liegt es natürlich in der Freiheit des Designers, einen anderen Font zu wählen; immerhin gehört das Schriftbild häufig untrennbar zur Identität einer Marke.
Unten statt oben
Ein großer Kritikpunkt hinsichtlich der Vereinheitlichung der Web-Ansicht eines Angebots und seiner mobilen Darstellung im Material Design war auch die Gestaltung des Menüs. Zwar entspricht das Hamburger-Icon in der oberen linken Ecke des Bildschirms den Nutzererwartungen; auf größeren mobilen Geräten kann es jedoch schwer erreichbar sein, wenn User das Device ausschließlich mit der rechten Hand verwenden. Hier hat Google inzwischen aber nachgelegt: nun können Menüleisten auch am unteren Bildschirmrand angelegt werden, die dieses Problem (das auch jenseits des Material Designs auftritt) lösen. Der umstrittene Floating-Action-Button, der von manchen Designern abgelehnt wird weil er Content verdeckt, kann so ersetzt werden.
Als problematisch erwies sich auch immer wieder Googles Vorschlag einer Farbpalette für Anwendungen im Material Design. Eine Auswahl strahlender Farben wird präsentiert – und von vielen Designern als verbindliche Vorgabe verstanden. Das ist so aber nicht korrekt. Google legt Designern vor allem die Verwendung bestimmter Kontraste nahe, um die Nutzeraufmerksamkeit gezielt zu steuern. Welche Farben verwendet werden, kann der Designer natürlich selbst festlegen – auch Muster können zur Anwendung kommen!
Barrierefreiheit und Material Design
Die Idee der Farbkontraste ist indes nicht neu. Auch die Standards des barrierefreien Webdesigns sprechen davon, dass Kontraste die Zugänglichkeit von Content erhöhen. Es wird sogar immer wieder diskutiert, dass graue Hintergründe deutlich angenehmer für die Augen sind als weiße – also ist es keine Spezialität des Material Designs, hier bestimmte Vorschläge zu unterbreiten. Wer aber streng den Richtlinien folgt, wird tatsächlich immer wieder ein Design erstellen, das genau so gut auch von Google sein könnte.
Darüber hinaus lohnt es sich, nach Ressourcen für Designs im materiellen Stil jenseits von Google zu suchen. Zwar wird dort eine Library mit mehr als 900 Icon-Elementen angeboten; auch anderswo im Web gibt es aber Symbole, die zum Design-Trend passen. Nova bietet beispielsweise ein kostenloses Icon-Pack mit 350 Symbolen an; auf MaterialUp finden sich von typsischen Google-Symbolen bis hin zur Eule unzählige Designs, die den Standards der Sprache entsprechen. Auch in Sachen Animation bietet das Portal viele Inspirationsquellen an, die alles andere als gleich aussehen.
Alles gleich? Selbst machen!
Obwohl das Material Design sich im Web nicht so weit durchgesetzt hat wie anfangs angenommen, erfreut es sich im Mobile-Bereich einer großen Beliebtheit. Auch hat die Vergleichbarkeit vieler materieller Designs durchaus Vorteile: Der Nutzer findet sich intuitiv auch in neuen Anwendungen zurecht. Ob diese nun lila-grün-gestreift oder google-blau-rot sind, spielt dabei eher eine untergeordnete Rolle. Die Bedienelemente und haptischen Prinzipien sind es, die den Reiz des Designtrends ausmachen. Ohne eigene Impulse wird ein Webangebot im Material Design aber tatsächlich schnell langweilig – das trifft aber genau so auf WordPress-Seiten zu, die das Twenty-Something-Theme des Jahres ohne Abwandlungen verwenden. Somit ist das also kein spezifisches Problem des Designtrends.
Aufmacherbild: Colorful chalk pastels – education, arts,creative, back to school via Shutterstock / Urheberrecht: gorillaimages
