Entwicklung & Design

Google enthüllt Material Design Lite

Screenshot: Google

Google hat Material Design Lite vorgestellt. Damit bringt der Konzern die Designsprache mit CSS, JavaScript und HTML ins Web.

Vor ziemlich genau einem Jahr hat Google die hauseigene Entwicklerkonferenz genutzt, um mit Material Design eine produktübergreifende Designsprache zu enthüllen, die primär in allen Produkten des Unternehmens wie Chrome, Android und Google-Webseiten zum Einsatz kommen sollte.

Google Material Design Lite

1 von 6

Damals wie heute ist die Ähnlichkeit von Material Design zu Flat Design unverkennbar. Beide Designsprachen legen den Fokus auf Icons und Schriftarten als tragende Elemente. Material Design setzt zudem auf einfarbige, großflächige Design-Elemente sowie kontrastreiche Farben.

Google bringt Material Design ins Web

Google hat die Designsprache jetzt für die Nutzung auf Webseiten optimiert und nennt das Ganze Material Design Lite (MDL). Das „Lite“ im Namen resultiert laut Google aus unterschiedlichen Faktoren: So hat MDL nur wenige Abhängigkeiten, was sowohl die Installation als auch die Nutzung vereinfachen soll.

xxx
Material Design Lite bietet unter anderem ein responsives Blog-Template. (Screenshot: Google)

Darüber hinaus ist Material Design Lite in der Tat sehr leicht – der Code ist gezippt nur 27 Kilobyte groß. Bei getmdl.io handelt es sich um eine Library, die unterschiedliche Komponenten und Templates in CSS, HTML und JS enthällt. MDL lässt sich laut Google mit so gut wie jeder Frontend-Lösung nutzen, sodass Webdesigner und Entwickler nicht auf ihre Lieblingswerkzeuge verzichten müssen.

Auch partielles Material Design möglich

Da MDL auf Paper Elements setzt, lassen sich auch einzelne Elemente einer Website entsprechend gestalten, ohne gleich komplett auf die Designsprache setzen zu müssen. So kann ein Entwickler beispielsweise einfach einen Slider im Material Design Lite auf einer Webseite integrieren, ohne gleich alle anderen MDL-Komponenten nutzen zu müssen.

Material Design Lite ist sowohl direkt bei Google als auch auf GitHub verfügbar.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung