Ressourcen und Tools: So gelingt der Einstieg in Material Design

Vor rund einem Jahr begann mit der Vorstellung des Material Designs eine neue Entwicklungsstufe des Webdesigns: Die Elemente einer Webseite sollten - anders als beim Flat Design - nicht nur flach und minimalistisch gestaltet sein, sondern sowohl in ihrer Form, wie auch in Funktion und Verhalten an echte Materialien angelehnt sein.

Nachdem wir bereits einige Einblicke in die Nutzung der Gestaltungsprinzipien des “Material Webdesigns” auf Basis von HTML, CSS und JavaScript gegeben haben, stellen wir zum Abschluss der Blogserie verschiedene Werkzeuge und Frameworks vor, die eine ausgezeichnete Basis für die Integration des Gestaltungsstils in das Design einer Webseite darstellen.

Übersicht: Frameworks, Tools und weitere Ressourcen

Die im folgenden vorgestellten Werkzeuge lassen sich anhand ihrer Inhalte und Einsatzgebiete aufteilen:

Das umfangreichste Arsenal stellen Frameworks / Libraries wie Material Design with Polymer dar. Sie stellen nicht nur zahlreiche fertige Elemente wie Buttons und Papers bereit, sondern bieten meist auch einen ausführlichen Bauplan für umfangreichere Projekte und Anwendungen bereit.

Weiterhin gibt es viele kleine Tools und Sammlungen, die die Prinzipien des Material Designs auf einzelne Elemente des Webdesigns übertragen. Darunter fallen beispielsweise Sammlungen von Icons oder einzelne CSS-Stile.

Abschließend geben zahlreiche Webseiten, Blogs und Podcasts weitere Einblicke in die bisherige und zukünftige Entwicklung des Gestatungstrends.

Frameworks: Die schweizer Taschenmesser im Webdesign

Die Auswahl eines passenden Frameworks hängt selten ausschließlich von persönlichen Vorlieben ab. Meistens bestimmen die technischen Rahmenbedingungen und bereits vorhandene Bausteine eines Projekts, welche Lösungen in Frage kommen.

Gestaltungstrends hingegen sind selten an technische Komponenten geknüpft. Daher ist es kaum verwunderlich, dass sich mittlerweile für alle großen Frontend-Frameworks besondere Ausprägungen rund um Material Design finden lassen:

Alle Frameworks besitzen einen ähnlichen Umfang und stellen zahlreiche Stile für Elemente wie Buttons, Papers und Formularelemente bereit. Somit haben wir als Webdesigner die volle Auswahl und können frei entscheiden, welches Frontend-Framework für ein Projekt genutzt werden soll.

Tools und Sammlungen: Kleine Helfer für jeden Tag

Möchte man sich in einem Webdesign-Projekt nicht zu sehr an ein Framework und dessen Vorgaben binden, sind kleinere Tools die bessere Wahl. Für die Einbindung einiger ausgewählter Elemente wie Ladeanimationen oder Icons stehen je nach Bedarf spezielle Sammlungen bereit.

Material Design Icons
Google selbst hat eine umfangreiche Sammlung an Icons unter der Creative Common Attribution 4.0 International License (CC-BY 4.0) veröffentlicht. Diese Icons sind ganz im Sinne des Material Designs schlicht gehalten und in jeder Größe und Farbe gut und klar erkennbar. Eine aktuelle Sammlung aller Icons steht unter Anderem direkt auf der Google-Webseite zum Download bereit.

CSS-Beispiele
Wenn man nur ein einzelnes Element oder Widget im eigenen Webdesign nutzen möchte, stellen die zahlreichen Material Design Code-Beispiele auf Codepen  eine optimale Anlaufstelle dar. Dort lassen sich reduzierte Beispiele unter Anderem für Layout, Ladeanimationen und Formularelemente wie Checkboxen finden.

Beispiele & Hintergründe
Im Rahmen dieser Serie haben wir bereits zahlreiche praktische Webdesign-Beispiele für den Einsatz verschiedener Komponenten und Ideen des Material Designs gezeigt. Dies umfasst neben konkreten Komponenten auch den Einsatz von Farben, Typographie und Bildern, den Aufbau eines Layouts mit Papier und die korrekte Verwendung von Animationen.

Weitere Ressourcen: Hintergründe und Wissenswertes

Um die vorgestellten Tools wirklich optimal zu nutzen, sollten wir als Webdesigner natürlich auch ein Verständnis für die grundlegenden Ideen des Material Designs haben. Wem unsere Blogserie dafür nicht ausgereicht hat, dem möchten wir noch die folgenden Ressourcen ans Herz legen:

• MaterialPodcast (@materialpodcast):
  Ein Podcast in englischer Sprache, der wöchentlich erscheint und intensive Einblicke in die gestalterische Arbeit für digitale Medien gibt.
• Offizielle Dokumentation (@GoogleDesign):
  Die offiziellen Dokumente von Google beleuchten das Material Design insbesondere aus Sicht des Android Betriebssystems. Nichtsdestoweniger ist die Webseite ein erstklassiger Anlaufpunkt für Informationen aus erster Hand (in englischer Sprache).
• Material Design Blog (@materialdesignB):
  Im englischen Material Design Blog dreht sich - wie könnte es auch ander sein - alles um Ressourcen, Apps, Templates und Webseiten zum Thema Material Design. Beinahe täglich werden neue Inspirationen und Informationen veröffentlicht.

Material Webdesign - und was kommt als nächstes?

In insgesamt acht Artikeln haben wir uns im Laufe eines Jahres ausführlich mit dem neuen Gestaltungstrend beschäftigt und Material Design von der ersten Veröffentlichung bis heute begleitet. Wir sind gespannt, wie es weiter geht - und wann ein neuer Trend das Webdesign wieder so verändern wird.