Material Design ist der klangvolle Name einer Designsprache, die von Google entwickelt wurde. Der Wunsch nach einer Vereinheitlichung und einem Standard in der Gestaltung von Apps war maßgeblich für den Entwicklungsprozess. Zunächst nur für Android-Apps vorgesehen, gewinnen die Vorgaben und Spezifikationen mit Release der dritten Version auch für Webdesigner und Developer zunehmend an Bedeutung. Woran liegt das und für wen ist Material Design interessant? Wir geben einen Überblick.

Glaubt man Googles Berichten, so begann alles mit einem simplen kreativen Brainstorming. Die Kernfrage war, wie sich das Empfinden und die Bedürfnisse von Nutzern mit modernen Technologien vereinbaren ließen.

Man wollte wissen, wie Strukturen wahrgenommen werden, wie Schaltflächen aussehen und Dinge sich verhalten sollten. Wie sollten Dinge wie

  • Formen, Buttons, Icons, Components
  • Themes, Guidelines, Colors, Schriften
  • Animationen, Interaktionen

beschaffen sein, um die User zu leiten und zur Interaktion einzuladen?

Flache Elemente mit Tiefenwirkung – Material Design setzt auf räumliches 2D

Das Ergebnis war eine Designsprache, die zwar prinzipiell auf einem etablierten Flat-Design beruht, sich jedoch zugleich an 3D-Elementen, Animationen und der Physik bedient. Als Vorbild fungierten flache aber greifbare Elemente. Ein Beispiel: Ein aus Papier gefaltetes Kästchen liegt zwar vergleichsweise eben auf einem Untergrund – trotzdem wirft es einen subtilen Schatten und grenzt sich somit visuell und physikalisch nachvollziehbar von seiner Umgebung ab.

Letztlich sorgen kartenähnliche Flächen im Flat-Design-Stil für einen minimalistischen Look. Animationen und Schatten lassen die Flächen jedoch wie reale Materialien wirken und geben ihnen Tiefeneffekte. Die ziehen nicht nur die Aufmerksamkeit des Nutzers auf sich, um somit wichtige Elemente hervorzuheben, sondern laden auch zur Interaktion ein.

Was Material Design alles umfasst

  • Licht & Schatten – Material Design wertet einfache Flächen durch Beleuchtungseffekte auf, die der realen Welt nachempfunden sind.
  • Als Schriftart wird “Roboto” verwendet, die auch als Google Webfont bereitsteht. Für Überschriften, Fließtext, Schaltflächen und vieles mehr sind insgesamt 13 Stile (Schriftgrößen) vordefiniert.
  • Farb-Schemata, unterteilt in 19 Grundfarben.
  • Vorgegebene Standard-Symbole tragen dazu bei, den Wiedererkennungswert und die Einheitlichkeit von Benutzeroberflächen zu erhöhen.
  • Subtile aber häufig eingesetzte Animationen sollen dem Benutzer Feedback geben und dadurch zur Benutzerfreundlichkeit beitragen.

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten

Gründe für eine neue Design-Sprache

Doch kommen wir zunächst zu den Grundüberlegungen, die Google anstellte. Welche Motivation gab es, eine eigene Designsprache zu entwickeln? Die Antwort: Mit Android stellt Google ein Betriebssystem für mobile Endgeräte bereit, das den Markt beherrscht. Rund 70 Prozent Marktanteil, sowohl in Deutschland als auch weltweit, sprechen eine deutliche Sprache. Im Vergleich kommt Apple mit iOS in Deutschland lediglich auf knappe 30 Prozent.

Wiedererkennungswert und Nutzerbindung: Einheitliches Design als Marketingstrategie

Zur Entwicklung eines Betriebssystems gehört auch ein UI Kit (User Interface Framework), das ein möglichst einheitliches Look & Feel bietet. Neben den von Google entwickelten Apps sollten auch die Anwendungen externer Entwickler einer Vorgabe folgen die es Android Nutzern erleichtert, sich schnell zurechtzufinden. Doch nicht nur ein einheitliches Benutzerinterface, das sich wie ein roter Faden durch die gesamte Bedienung mitsamt aller Apps zieht, bindet die Nutzer. Wer sich erst einmal daran gewöhnt hat, scheut auch deutlich stärker den Wechsel zu einem anderen System.

Übrigens: Ende 2021 beschritt Google auf iOS den umgekehrten Weg und unterstrich damit die Bedeutung nativer Apps. Man entschied sich, die hauseigenen Apps für iOS zukünftig nicht mehr mit Material Design, sondern mit Apples UIKit zu gestalten. Nur so ist es möglich, für Apple-User eine inkonsistente Benutzererfahrung zu vermeiden und Apps wie Google Mail, Google Maps und YouTube auch auf iOS zu etablieren.

Diese Entscheidung zeigt zugleich die Vor- als auch die Nachteile von Material Design auf. Denn eine Vereinheitlichung von Benutzeroberflächen ist zunächst natürlich positiv zu bewerten. Benutzer gewöhnen sich an Mechanismen, Symbole und Strukturen. Das macht die Nutzung weiterer Apps mit verwandter Oberflächengestaltung einfacher.

Zugleich ist Material Design jedoch auch untrennbar mit Android und der “Google-Welt” verbunden. Auf mobilen Geräten eignet es sich daher nicht, um Apps für andere Betriebssysteme zu entwickeln.

Material Design für eigene Website-Projekte nutzen?

Mit 70 Prozent Marktanteil im mobilen Bereich ist zudem davon auszugehen, dass Material Design sehr großen, fast schon prägenden Einfluss auf die Erwartungshaltung von Nutzern hat. Womit wir zu der spannenden Frage kommen, wie sinnvoll es ist, eine plattformunabhängige Webseite basierend auf Googles Design-Framework zu gestalten. Dafür spricht, dass sich der Besucheranteil, der zufälligerweise Android-Mobilgeräte nutzt, sicherlich direkt zu Hause fühlt. Doch was ist mit allen anderen?

Material Design für neue Webseiten

Grundsätzlich lässt sich sagen, dass Material Design ein in sich stimmiges und interessantes Konzept verfolgt. Wer sich bei der Gestaltung einer Webseite an Material Design orientiert, macht strukturell sicherlich vieles richtig. Die empfohlene Verwendung von Schriften, Symbolen, UI-Elementen und vielem mehr wirkt sich positiv auf das Erscheinungsbild einer Webseite aus. Die Nähe zum Google/Android-Kosmos und die Frage, ob das gewollt ist, sollten Designer jedoch stets im Hinterkopf behalten.

Material Design für Android-Apps

  • Bei der Gestaltung von Apps ergibt sich eine ähnliche Problematik – handelt es sich um eine exklusive Entwicklung für Android-Systeme, ist Material Design alternativlos.
  • Wird die App für Apple-Geräte entwickelt, verbietet sich die Nutzung von Googles Designsprache jedoch geradezu.

Und was ist mit Hybrid-Apps? Nun, die Betriebssystem-Neutralität, die von einer Hybrid-App ausgeht, sollte sich prinzipiell auch in ihrem Design widerspiegeln.

Ganz oder gar nicht: Googles Designsprache sollte akzentfrei gesprochen werden

Eine Entscheidung für oder gegen Material Design sollte jedoch sehr konsequent gefällt werden. Googles Designsprache nur in Teilen umzusetzen, sorgt schnell für Missverständnisse und negative Effekte.

So ist Material Design beispielsweise für Animationen bekannt – ein Stilmittel, das bei Apple sehr viel dosierter verwendet wird. Android Benutzer sind es gewohnt, bestimmte Aktionen durch Animationen quittiert zu bekommen. Entscheidet sich ein Entwickler prinzipiell für Material Design, spart Animationen jedoch aus, könnten Nutzer die App oder Webseite als unvollständig oder fehlerhaft empfinden.

Sie wollen sich selbst ein Bild machen? Hier geht es zu Googles Material Design 3.

Titelmotiv: Bild von StartupStockPhotos auf Pixabay

Host Europe
Letzte Artikel von Host Europe (Alle anzeigen)

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten