Voll im Trend: 9 Material Design Frameworks für moderne Webseiten

Kein Beitragsbild

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

Google hat mit seinem für Android entwickelten Material Design einen der größten Design-Trends der letzten Zeit angestoßen. Nach langer Zeit sieht Android endlich gut aus. Viele meinen, dass das Design mittlerweile mit iOS gut mithalten kann. Doch nicht nur mobile Apps werden heute in Material Design umgesetzt, auch immer mehr Webseiten nutzen das neue Design. Um das Design gut und ansprechend umsetzen zu können, kann man sich entweder selbst an der Umsetzung versuchen, oder man nutzt eines der angebotenen Material Design Frameworks, wovon immer mehr auf den Markt kommen. Daher stellen wir Ihnen heute eine Auswahl von Frameworks vor, damit Sie Ihre nächste Webseite im neuen, schicken Material Design verwirklichen können.

material-design-frameworks-teaser

Was ist Material Design?

Material Design ist in erster Linie eine Design-Vorgabe von Google für die Entwicklung von Smartphone- und Tablet-Apps auf Basis von Android. Material Design wurde zuerst auf der Google I/O 2014 vorgestellt, ist aber ebenfalls angedacht für Googles Chrome OS und das Web insgesamt. Googles Vorschlag konzentriert sich dabei auf eine klare und einfache Design-Sprache und die Verwendung von zum Teil kräftigen Farben und einer eigenen Typografie. Der Hintergrund der Material Design Richtlinien ist hierbei, eine einheitliche Nutzererfahrung auf allen Plattformen zu schaffen.

Sehr gut ist, dass Google detaillierte Richtlinien und Informationen zur Verfügung stellt in Bezug auf Design, Interaktionen und fundamentale Dinge wie Animationen, Farben, Typografie, Struktur und wesentliche Muster.

Ein Beispiel zeigt die perfekte Umsetzung als Android-App:

material-design-example-app

Google stellt ebenfalls ein gutes Einführungsvideo zur Verfügung:

Material Design:  Webdesign-Frameworks

Heutzutage gibt es einige wirklich gute Frameworks zur Entwicklung von Webseiten im Material Design. Acht der neun vorgestellten Frameworks sind Drittanbieter-Frameworks, wurden also nicht von Google entwickelt, was ihrer Effektivität und dem gut umgesetzten Design keinen Abbruch tut.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

1. Materialize

Materialize

Materialize ist ein modernes Front-End Design CSS-Framework basierend auf dem Material Design. Es bietet Ihnen die Option, neben CSS  auch SCSS zu nutzen. JavaScript und Material Design Icons sind ebenso vorhanden, wie der im Original Material Design verwendete Roboto Font. Grids, Formulare, Buttons, Navigationen und die neuen Cards sind ebenfalls dabei. Wer an diesem Framework mitarbeiten möchte, kann dies auf Github tun. Es wird ein Starter-Template angeboten, eine Demo des Starter-Themes finden Sie hier.

2. Material UI

Material-UI

Material UI ist ein CSS-Design-Framework für die Erstellung von Webseiten im Material Design. Unterstützt werden Komponenten wie Buttons, Dialoge, Dropdown-Menüs, Icons, Formular-Elemente und vieles mehr. Auch Material UI ist auf Github zu finden.

3. Paper Bootswatch for Bootstrap

Paper Material Theme for Bootswatch

Das Paper-Theme ist eines der Themes für das Boostrap-Framework. Es bringt alle Komponenten mit, die auch Bootstrap bietet, allerdings im Material Design. Bootswatch bietet zusätzlich zu dem Paper Theme auch noch einige andere, wirklich schicke Themes an.

4. Bootstrap Material

Material-Design-for-Bootstrap

Genau wie Paper ist auch das Bootstrap Material ein Theme für das Bootstrap-Framework. Bootstrap Material bringt daher alle Komponenten mit, die das Bootstrap-Framework bietet. Zusätzlich jedoch kommt noch die Unterstützung für die 740 Original Material Design Icons aus der Google Material Design Icons Bibliothek dazu.

5. Leaf BETA

leaf-beta-material-design-framework

Das Leaf CSS-Framework ist von Kim Korte entwickelt worden. Es befindet sich zur Zeit noch in der Beta-Phase, daher ist noch nicht jedes Element enthalten oder optimal gestaltet. Doch es bringt bereits eine umfassende Liste von Komponenten mit sich. Buttons, Slider, Cards, Menüs, Tabs und vieles mehr kommt mit diesem liebevoll gestalteten Framework auf die heimische Entwicklungsplattform. Die verwendeten Icons stammen nicht aus der Google Bibliothek, sondern von Icomoon, was der Funktionalität allerdings keinen Abbruch tut. Als CSS Pre-Processor wird übrigens Stylus verwendet. Auch das Leaf Material Design Framework ist auf GitHub vertreten.

6. MUI CSS Framework

MUI Material Design CSS Framework

Das MUI-Framework ist ein leichtgewichtiges HTML und CSS Framework zum Erstellen von Websites nach den Google Material Design Richtlinien. MUI wurde entwickelt, um schnell, handlich und klein, sowie wirklich entwicklerfreundlich zu sein. Es enthält nur die grundlegenden Komponenten, die Sie zur Entwicklung einer Website nach Googles Design-Richtlinien benötigen. Es gibt keinerlei externe Abhängigkeiten, so dass ein mit diesem Framework entwickeltes Projekt nicht unnötig aufgebläht wird. MUI ist ebenfalls auf GitHub vertreten und offen für weitere Entwickler, die an dem Projekt mitarbeiten möchten.

7. Polymer Project

Polymer Material Design Framework

Googles Polymer Projekt hat es sich zur Aufgabe gemacht, koponentenbasierte Entwicklungsprozesse in das Internet zu bringen. Es ist kein reines HTML/CSS Framework für die Webentwicklung, sondern kann ebenso zur Entwicklung von mobilen Apps genutzt werden. Polymer befindet sich noch im Status eines sogenannten “Developer Preview”, also im einem frühen Stadium der Entwicklung, doch die meisten Komponenten sind bereits jetzt sehr ausgereift. Alle modernen Browser (IE 10+, Chrome, Safari, Firefox) zeigen die Designs und Komponenten von Polymer korrekt an. Polymer stellt umfangreiche Dokumentationen, Kurzanleitungen und Videos zum Einstieg zur Verfügung.

8. LumX

LumX Material Design Framework

nt1m Material Framework

Das nt1m/Material Design Framework ist ein einfaches, responsives CSS-Framework, das es Ihnen erlaubt, Material Design in Ihrem nächsten Web-Projekt einzusetzen. Es lässt sich via Github herunterladen. Mitwirkung am Projekt ist gewünscht.

Fazit

Neun Material Design Frameworks habe ich bei der Recherche für diesen Artikel für Sie gefunden. Nun liegt die Qual der Wahl bei Ihnen, welchem der vorgestellten Frameworks Sie Ihr Vertrauen schenken möchten. Die Auswahl ist groß genug. Ich werde auf jeden Fall Materialize und die beiden Bootstrap-Erweiterungen ausprobieren und wünsche Ihnen auf jeden Fall viel Spaß beim Experimentieren mit dem Material Design.

Links zum Beitrag

(dpe)

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Hans
Gast
Danke für die schöne Übersicht. Es sind sehr nützliche Links dabei, die gleich in meinen Lesezeichen Platz gefunden haben. Design ist bekanntlich Geschmacksache. Daher kann ich dem Satz “Viele meinen, dass das Design mittlerweile mit iOS gut mithalten kann.” nicht zustimmen. In meinen Augen ist (das vanilla) Android schon seit der Version 4 das bessere/schönere. iOS7 hat sehr viel Kritik von Designern erfahren – meiner Meinung nach berechtigt. Ich persönlich weiß auch nicht warum hierbei immer der Vergleich zum anscheinenden Maßstab iOS gezogen werden muss (Im Gegensatz zu der immer schönen Apple Harware). Darüber hinaus gibt es noch andere Designperlen… Read more »
Anna Blume
Gast

Vielen Dank für die lehrreichen “Material Design”-Beispiele.
Ein “Material Design”-Wordpress-Theme wäre auch interessant.

Reto
Gast

Wenn wor doch ehrlich sind, ist Googles Material Design nur eine bunte Version von Microsofts Metro (Modern UI). In dem sinn: Mehr geklaut als selbst erfunden. :)

Phillip
Gast

Sieht alles so ähnlich und austauschbar aus…. Ohne großen individuellen Wiedererkennungswert.

Peter
Gast

Hier noch ein paar:
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien
Google Material Design Richtlinien

wpDiscuz