Der typische Look-and-Feel des Material Designs lässt sich bereits auf vielen Wegen in Projekte einbinden. Angefangen hat es im vorletzten Jahr mit Designoptionen für mobile Apps, doch dabei blieb es nicht. Schnell griffen Webentwickler und -designer die Idee der klaren Linien und haptischen Anordnungsprinzipien auch für andere Plattformen auf.

Themes und Frameworks

Angular Material bietet Optionen zur Implementierung des Designs in AngularJS-Anwendungen; mit Material Design Lite stellt Google selbst eine Library zur Verfügung, die für Projekte auf fast allen Plattformen verwendet werden kann. Auch für Bootstrap gibt es bereits Lösungen: Material Design for Bootstrap (MDB) stellt eine Vielzahl an Designelementen zur Verfügung, in der Grundversion ist sie kostenlos. Auch Paper Elements stellt eine solche Implementierung der Designstandards für Bootstrap dar – allerdings ist sie wesentlich schlanker und weniger umfangreich als MDB.

The Vue of Search Engine Optimization – How to make your Single-Page App rank well

mit Dennis Schaaf (futurice) & André Scharf (DigitasLBi)

Von 0 auf 100 – Performance im Web

mit Sebastian Springer (MaibornWolff GmbH)

I didn’t know the Browser could do that

mit Sam Bellen (madewithlove)

Material Kit, das neuste Mitglied der Material-Design-Familie, entstand auf der Codebasis von Paper Elements und ist somit ebenfalls auf Bootstrap-Anwendungen ausgerichtet, bringt allerdings noch einmal einen eigenen Look mit. Anders als viele andere Implementierungen bietet Material Kit ein Design an, das farblich eng an den von Google vorgeschlagenen Standards bleibt. Neuerungen gibt es hier viel mehr auf Ebene der Nutzerinteraktionen zu sehen, nicht rein in der Optik. Auch bietet das neue UI-Kit die Möglichkeit zur Verwendung von JavaScript-Komponenten, die nicht von allen Konkurrenten unterstützt werden.

Material Kit: Karussells und Co.

Die Karussell-Lösung sticht dabei besonders hervor. Zusätzlich zu den Auswahl-Buttons am unteren Ende der Diashow ermöglicht das neue UI-Kit eine Navigation durch die Bilderauswahl, bei der sich der Mauszeiger je nach Position im Bild in einen Pfeil verwandelt. Für Formulare bringt das UI-Kit gleich Effekte zur Inline-Validation mit.

Notifications in Material Kit; Quele: http://demos.creative-tim.com/material-kit/index.html

Außerdem umfasst das Material Kit drei Beispiel-Seiten, die den Einstieg in die Arbeit damit vereinfachen sollen. Diese umfassen eine Login-Seite, eine Lading-Page und eine Profil-Seite, zu deren Verwendung jeweils nur die eingefügten Bilder ausgetauscht werden müssen.

Märchenhaft detailliert

Das UI-Kit steht grundsätzlich kostenlos zum Download zur Verfügung. Wer kommerziell damit arbeiten und mehr als eine Website erstellen möchte, zahlt jedoch 19$. Um nun einen Eindruck vom Material Kit zu bekommen, lohnt sich ein Blick auf die Demo – oder auch zwei, denn dann lassen sich dort viele coole Details entdecken. Zum Beispiel eine Aufforderung dazu, schon mal zu überlegen, welche Ausrede man dem Chef für den nächsten Serverfehler präsentieren könnte oder ein kleines Märchen aus dem Land des Blindtexts …

Modale Komponenten in Material Kit – märchenhaft! Quelle: http://demos.creative-tim.com/material-kit/index.html

Mehr Informationen zum Material Kit finden sich auf der Website der Entwickler. Dort kann das Projekt auch heruntergeladen werden.

Aufmacherbild: abstract colorful background 3d illustration via Shutterstock / Urheberrecht: Profit_Image