Jedes Screendesign besteht grundsätzlich aus denselben gestalterischen Bausteinen: Das Zusammenspiel aus Farbe, Schrift und Bildern schafft eine gestalterische Einheit, die wir als Design wahrnehmen.

Für diese fundamentalen Bausteine definiert Material Design Richtlinien und Prinzipien, um ein übersichtliches und gleichzeitig ansprechendes Design zu komponieren.

Plakative Aussagen durch methodische Paletten: Farben im Material Design

Farben sind wahrscheinlich der offensichtlichste Bestandteil eines Designs. Daher legt Material Design klare Richtlinien für die Farbstimmung einer "Material App" fest und definiert eine konkrete Farbpalette mit Farbtönen, die untereinander harmonieren.

Die Farbpalette stellt mehrere Grundfarben - Rot, Pink, Lila, Indigo und so weiter - bereit und dekliniert jede dieser Grundfarben in verschiedenen Abstufungen und Schattierungen. Die komplette Farbpalette hat Google unter Anderem als Farbfelder für Photoshop bereitgestellt.

Für den Einsatz im Webdesign bietet die Farbpalette gerade für neue Produkte und Designs eine nützliche Grundlage. In der Realität geben in den meisten Fällen jedoch vorhandene Gestaltungselemente oder ein Corporate Design bereits die grundlegenden Farben für das Webdesign vor.

Individualität durch Komposition: Hauptfarbe und Akzentfarbe

Natürlich soll eine einzelne Webseite nicht sämtliche Farben der Palette einsetzen. Für die meisten Webdesigns bietet sich die Auswahl einer Hauptfarbe mit zwei bis drei Abstufungen, sowie einer sekundären Farbe für gestalterische Akzente an.

Die verschiedenen Abstufungen bzw. Schattierungen einer Farbe lassen sich durch CSS-Präprozessoren wie SASS auch programmatisch generieren. In einer _variables.scss Datei könnte eine einfache Farbpalette beispielsweise wie folgt definiert sein:

Komplexere Farbkompositionen mit zahlreichen Schattierungen einer Farbe können dabei ab SASS 3.3 (Maptastic Maple) durch Maps komfortabel abgebildet und über die Funktion map-get ausgelesen werden. Die oben abgebildeten Schattierungen für “light-green” könnte beispielsweise wie folgt implementiert werden:

Gemäß den Richtlinien von Material Design dient die Hauptfarbe zur Gestaltung von Elementen und kleinen und großen Flächen. Die Akzentfarbe hingegen soll - ihrem Namen entsprechend - ausschließlich zur Betonung einzelner Elemente genutzt werden.

Schlank und groß - aber bloß nicht fett: Typographie im Material Design

Im klaren und minimalistischen Material Design haben typographische Elemente eine besonders hohe Bedeutung. Im Zusammenspiel mit der definierten Farbpalette dienen Sie zur Gruppierung und Strukturierung von Inhalten. Verschiedene Schriftgrößen und Schriftschnitte stellen eine visuelle Hierarchie sicher - zu viele verschiedene Größen und Schnitte führen jedoch schnell zu einem überladenen und unübersichtlichen Webdesign.

Die offizielle Schriftfamilie von Material Design, Roboto (seit einiger Zeit die Systemschrift des Android-Betriebssystems) bietet mit ihren sechs Schriftstärken bereits eine zu große Vielfalt. Je nach Art eines Elements sollen daher ausschließlich die Schriftstärken "thin", "regular" und "medium" genutzt werden, um eine optimale Lesbarkeit und angenehme Textdichte sicherzustellen.

"Material Typography" im Webdesign

Die Beschränkung von Schriftgrößen, -stärken und -schnitten stellt auch im Webdesign eine übersichtliche Struktur von Inhalten und eine angenehme Lesbarkeit von Texten aller Längen sicher.

Die Roboto-Schrift eignet sich darüber hinaus besonders für den Einsatz im Webdesign, da sie neben einer guten Lesbarkeit, vielen Schriftschnitten und einer großen Auswahl an Zeichensätzen eine sehr geringe Datengröße und somit schnelle Ladezeiten bietet. Gerade responsive Webseiten profitieren zudem davon, dass die Roboto-Schrift auf aktuellen Android-Geräten bereits installiert ist und somit nicht zusätzlich beim Aufruf einer Webseite geladen werden muss.

Eine solide Basis für die Typographie einer Webseite im Material Design bieten beispielsweise die folgenden Definitionen:

Icons: Straßenschilder im Webdesign

Icons sind die Straßenschilder des Webdesigns: Sie symbolisieren eine Aktion, ein Verhalten oder einen Zustand in einer möglichst schlichten Form. Durch den konsistenten Einsatz von Icons sind die einzelnen Funktionen einer Webseite intuitiv verständlich.

Die von Google bereitgestellten "Material Design Icons" sind auf ein Minimum reduziert - und somit in nahezu jeder Größe gut lesbar und verständlich. Die Sammlung umfasst aktuell schon über 750 Icons und bietet somit eine sehr breite Auswahl für die Erstellung eines modernen Webdesigns.
Um die Icons auch im Webdesign komfortabel nutzen zu können, wird aktuell an einer Bereitstellung der Icons als Webfont gearbeitet.

Bewusste Bildgestaltung zur Kommunikation der eigenen Identität

Material Design steht in erster Linie für eine schlichte Gestaltung. Dennoch - oder gerade deswegen - haben Bilder und Grafiken eine spezielle Rolle. Sie dienen nicht nur der Dekoration, sondern schaffen eine einzigartige visuelle Identität für eine Webseite oder eine App. Durch eine bewusste Bildgestaltung können gerade im Webdesign Besucher einer Webseite gezielt angesprochen und zur weiteren Interaktion bewegt werden.

Die folgenden Richtlinen für die Auswahl von Bildern im Webdesign sind eigentlich seit langer Zeit bekannt, dennoch bringt Material Design diese Grundsätze perfekt auf den Punkt:

• Bilder müssen eine persönliche oder situative Relevanz aufweisen.
  Sowohl Illustrationen wie auch Fotos sollen auf die aktuelle Situation des Besuchers zugeschnitten sein. Auf diese Weise kann ein Besucher direkt angesprochen werden.
• Bilder müssen relevante Informationen beinhalten.
  Bilder sind mehr als reine Dekoration! Sie sollen Informationen vermitteln und so zur effektiven Erfassung von Inhalten einer Webseite beitragen.
• Bilder sollen Freude vermitteln und Lust wecken.
  Durch eine ästhetische und individuelle Bildgestaltung hebt sich eine Webseite aus der grauen Masse ab - und bleibt im Kopf der Besucher.
• Bilder müssen zum Kontext der Webseite passen.
  Ein Bild trägt nur dann zur Erhöhung der User Experience bei, wenn es sowohl zum inhaltlichen, wie auch gestalterischen Kontext passt.
• Bilder müssen eine klare Aussage und einen visuellen Fokus besitzen.
  Damit ein Besucher die Aussage eines Bildes verstehen kann, muss das Bild einen direkt erkennbaren Fokus haben und wenige bis keine ablenkenden Elemente beinhalten.

Ein häufiges Problem im Webdesign ist die Sicherstellung von lesbarem Text auf Bildern. Ein Text in heller Schrift funktioniert auf einem dunklen Bild - ist auf einem hellen Bild jedoch nur schwer zu entziffern. Im Material Design werden daher häufig sogennante "Scrims" genutzt, die den Text durch einen Schutzraum vom Hintergrund abheben. Im Webdesign könnten solche Scrims beispielsweise wie folgt umgesetzt werden:

Zusammenfassung: Schlank und schlicht

Durch Beachtung dieser Richtlinien für die Gestaltung von und mit Farben, sowie für den Einsatz von Typographie und Bildern ist bereits ein gutes Fundament für ein "Material Webdesign" gelegt. Da es sich bei Material Design noch um einen sehr jungen Gestaltungstrend handelt, gibt es jedoch noch viele Grauzonen und offene Fragen.

Grundsätzlich gilt jedoch: Ein Webdesign soll klare Aussagen machen - und sich dabei gerne an bekannten Elementen wie zeitgenössischer Architektur, Straßenschildern oder Sport- und Spielfeldern orientieren. Die gezielte Verwendung von unerwarteten, lebhaften Farben rundet dabei ein gelungenes Webdesign ab.

So geht es weiter: Layout-Prinzipien im Material Design

In einem weiteren Artikel werden wir uns mit den Layout-Bausteinen des Material Design auseinandersetzen. Dabei werden wir einerseits grundsätzliche Layout-Prinzipien vorstellen, aber auch konkrete Umsetzungen dieser Prinzipien anhand typischer Webdesign-Elemente präsentieren.