Unser Blog

Immer frisch Informiert

MUI: CSS-Framework für Websites in Googles Material Design

Von admin am 27. September 2015 um 12:00

Mitte letzten Jahres stellte Google sein neues Designkonzept „Material Design“ vor. Es löst das bisher eingesetzte „Flat Design“ ab und wird in allen Produkten des Unternehmens eingesetzt – von Googles Websites über Chrome bis zum Betriebssystem Android. Mit dem Framework MUI lässt sich das „Material Design“ per HTML, CSS und JavaScript auch auf Webprojekte anwenden. Dabei wird das Designkonzept von der Farbgebung und Typografie über das Aussehen von Menüs und Buttons bis zu animierten Übergängen sehr detailliert übertragen.

Das Besondere an Googles „Material Design“

Im Gegensatz zum derzeit sehr beliebten „Flat Design“ wagt Google mit seinem „Material Design“ den Schritt Richtung Dreidimensionalität. Zwar ist das neue Design immer noch sehr flach, bekommt aber eine räumliche Tiefe. Diese zeichnet sich durch dezente Schlagschatten aus, die hinter den Flächen und Icons erscheinen. Je nach Abstand der einzelnen Objekte erscheinen die Schlagschatten mal mehr mal weniger ausgeprägt.

Das „Material Design“ wird von Google sehr ausführlich auf einer eigenen Website vorgestellt. Dort ist genau geregelt, wie es auszusehen hat und angewendet werden soll. Farben sind definiert, das Aussehen und die Schattierung von Icons sind vorgegeben und Animationen für Button-Klicks, Dropdown-Menüs und andere Übergänge sind festgelegt.

Gerade Entwickler von Apps für Androidgeräte sind angehalten, das neue „Material Design“ anzuwenden. Wer es in Webprojekten einsetzen möchte oder Hybrid-Apps für Android entwickelt und diese per HTML, CSS und JavaScript umsetzt, kann mit dem MUI-Framework Googles Designkonzept anwenden.

Was kann MUI?

MUI besteht aus einer Stylesheet- und einer JavaScript-Datei. Alle Designelemente sind in CSS umgesetzt und lassen sich per Klassen auf HTML-Elemente anwenden. Bestimmtes Verhalten von Buttons, Menüs und Formularen wird mit JavaScript abgebildet. Da MUI auf HTML5 und CSS3 setzt, ist es nur für moderne Browser geeignet. Der Internet Explorer kommt ab Version 10 mit MUI zurecht.

Quelle: DrWeb,de – danke

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar