Wie sich Projekte materiell gestalten lassen

Material Design: 14 Frameworks & Themes für Googles Designsprache
Kommentare

Material Design ist im Mainstream des Webdesigns angekommen. Immer mehr Projekte erhalten den populären Look aus dem Hause Google. Um die Arbeit am neuen Design zu vereinfachen, stehen viele Frameworks und Themes für Plattformen wie Angular, Bootstrap, Wordpress und React zur Verfügung. Wir stellen einige davon vor.

Klare Linien, Responsiveness im Zentrum des Designs, die typischen Karten und der schwebende Call-to-Action-Button sind nur einige der bekannten Elemente des Material Designs. Diese Bestandteile erlauben es, mit geringem Aufwand ein gutes User Interface zu entwerfen, das über viele Plattformen hinweg problemlos funktionieren wird. Auch wer von den Standards abweichen möchte, findet in der große Dokumentation der Designsprache genug Hinweise darauf, wie die Grundideen dennoch beibehalten werden können.

Eine sehr einfache Lösung für die Adaption des Material Designs ist Googles eigene Library Material Design Lite (MDL). Damit hat Google eine für statische Websites optimierte Version des Material Designs vorgelegt, das ursprünglich auf mobile Apps ausgelegt war. Die Library ist framework-agnostisch und lässt sich dadurch auch in viele bestehende Projekte einfügen. Auch Bootstrap- und WordPress-Projekte lassen sich so im Stil des Material Designs gestalten.

Material Design for Bootstrap

Spezifisch für Bootstrap steht außerdem das Material Design for Bootstrap-Framework (MDB) zur Verfügung. Diese Lösung ist interessant für alle, die großen Wert auf vielfältige Gestaltungsoptionen legen. MDB ist wohl das bislang umfangreichste Framework, das Webdesignern zur Verfügung steht. Damit lassen sich Animationen, Hover-Effekte, Schatten, Icons, Buttons, Badges, Social Buttons, Tables, diverse Panel-Varianten, Popup-Effekte, Karussells und vieles mehr umsetzen; nicht alle Elemente sind jedoch über die kostenfreie Basisversion zugänglich.

Angular Material

Angular Material, eine Material Design Implementierung für Angular.js, wird intern von Google unterstützt. Das macht das Framework zu einer guten Wahl für alle, die einen besonders großen Wert darauf legen, die MD-Philosophie eng zu verfolgen. Die ausführliche Dokumentation mit einem spezifischen „Getting Started“-Abschnitt ist außerdem interessant für alle Neueinsteiger.

LumX

Ebenfalls auf Angular beruht LumX. Dieses vollständige responsive Framework wurde mit Sass, Bourbon und Neat entwickelt. Dank jQuery soll außerdem die Performance hier besonders gut sein. Das Design hält sich ebenfalls eng an die Google Standards.

Formulare & Datepicker mit Daemonite

Daemonite Material sticht durch seine vielfältigen Optionen zur Gestaltung von Formularen und Eingabeaufforderungen sowie einen spannenden Datepicker hervor. Auch Ladebalken können hier auf verschiedene Weisen realisiert werden. Das Framework ist cross-plattform-kompatibel und wurde in HTML5 geschrieben, beruht aber auf Bootstrap.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Materialize

Materialize gehört zu den bekanntesten Frameworks für Material Design. Es ist eine eigenständige Lösung, die in der Verwendung Ähnlichkeit mit Bootstrap hat. Designern stehen hier neben den üblichen CSS-Files auch SCSS-Quelldateien zur Verfügung, die ihnen mehr Kontrolle über die verwendeten Komponenten erlauben.

Und React?

Wer React bevorzugt, sollte einen Blick auf Material UI werfen. Mit diesem Framework lässt sich Googles Designsprache in Facebooks Open Source Projekt implementieren. React ist sicherlich nicht für jedes Projekt interessant; wer aber eh damit arbeitet, könnte Spaß an Material UI haben. Die Installation der Komponenten erfolgt über den Node Package Manager. Neben Material UI steht mit Essence ein weiteres Framework für React zur Verfügung.

MUI

MUI orientiert sich im Gegensatz zu anderen Lösungen stellenweise nur locker an den Designstandards des Material Designs. Wie Daemonite ist MUI allerdings auch eine Cross-Plattform-Lösung und besticht durch die kleine Datenmenge, wodurch die Ladezeit erhöht wird. Das CSS kann über SASS-Dateien angepasst werden. Auf externe Dependency verzichtet MUI vollständig.

Für Apps

Das Phonom Framework stellt eine Option zur Entwicklung hybrider HTML5 Apps dar, die sowohl im Web als auch auf Mobilgeräten laufen. Hierbei handelt es sich nicht um eine Adaption des Material Design Standards für vorhandene Anwendungen, sondern um eine Plattform zur Entwicklung neuer Projekte im Material Design Stil.

MaterialWP ist ein Theme, kein vollständiges Framework. Wie der Name schon vermuten lässt, können WordPress-Seiten damit im Material Design gestaltet werden. Das Theme basiert auf Bootstrap und dem Underscores-Theme. Wer optisch nicht ganz zufrieden mit MaterialWP ist, findet im Web außerdem eine Vielzahl ähnlicher Projekte.

Themes für Bootstrap

Auch für Bootstrap existieren natürlich eine Menge Themes, die eine Alternative zu den vollständigen Frameworks darstellen. Dazu gehört auch das Paper-Theme von Bootswatch, das sich am Materia Design orientiert. Die Menge der verfügbaren Designelemente ist hier natürlich geringer als in anderen Frameworks; dafür ist es besonders leicht verwendbar. Außerdem kommt Paper ohne JavaScript-Element aus und beruht nur auf CSS.

Viele Projekte sind außerdem noch in der Entwicklung, immerhin ist Googles Designsprache erst im vergangenen Jahr erschienen. So befindet sich ein Framework für Meteor gerade in der Alphaphase. Material Design Komponenten werden allerdings auch von Meteor selbst zur Verfügung gestellt. Ds Bootstrap Material Design Theme ist noch nicht fertig. Letzteres erfreut sich allerdings bereits großer Beliebtheit auf GitHub.

Material Design nicht unumstritten

Die Möglichkeiten zur Gestaltung von Webangeboten und Apps im Material Design sind also vielfältig. Unumstritten ist dieser Designtrend jedoch nicht. Wie schon Bootstrap zuvor, muss sich auch Googles Designsprache den Vorwurf gefallen lassen, das Internet zu vereinheitlichen. Immerhin sind die typischen Designelemente zwar sehr nützlich, besitzen aber auch einen hohen Wiedererkennungswert.

Hier ist es wichtig, kein Framework oder Theme unreflektiert zu verwenden. Zwar mag es einladend sein, das Design nah am Standard zu halten, weil so sichergestellt ist, dass das Projekt tatsächlich gut benutzbar ist – dann entsteht aber doch schnell ein Google-Design ohne eigenen Charakter. Wer das vermeiden möchte, sollte mit Bedacht vorgehen und sich trauen, einige Designelemente selbst in die Hand zu nehmen. Wichtig ist beispielsweise das Farbschema. Wer hier das typische blau wählt, wird sich nicht groß von der Konkurrenz abheben. Wer aber mit Farbverläufen arbeitet oder selbst Animationen entwickelt, kann auch im Material Design sehr individuell arbeiten.

Individualisierung gewinnt

Der Call-to-Action-Button stellt ebenfalls eine gute Möglichkeit zur Individualisierung eines Projekts dar. Das Konzept eines ständig sichtbaren, auffälligen Buttons zur Interaktion ist grundlegend nicht aus dem Material Design wegzudenken; ob dieser allerdings eher allgemeine Menüelemente ausklappt oder zum Mailformular führt, ist vom Projekt abhängig.

Am Ende geht es im Webdesign immer um Kreativität. Egal, welches Framework gewählt wird, muss immer noch eine eigene Bearbeitung erfolgen, sodass am Ende das eigene Projekt durch einen hohen Wiedererkennungswert besticht. Das kann aber auch im Material Design gelingen, wenn das richtige Framework gewählt wird.

 

Aufmacherbild: Illustration of unusual modern material design vector background via Shutterstock / Urheberrecht: Decorwith.me

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -