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.
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.
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.
Name | Material Kit |
---|---|
Hersteller | Creative Tim |
Projektwebsite | http://demos.creative-tim.com/material-kit/index.html |
GitHub | https://github.com/timcreative/material-kit |
Webperformance und Page Speed 2021
mit Sven Wolfermann (maddesigns)
UX Design: Kitsch – du willst es doch auch!
mit Lutz Schmitt (Lutz Schmitt Design & Consulting)
SEO loves PR: Wie zwei Disziplinen gemeinsam erfolgreich sein können
mit Anne Kiefer (sexeedo GmbH)
Aufmacherbild: abstract colorful background 3d illustration via Shutterstock / Urheberrecht: Profit_Image