Material Design

In Webdesign von Christian Arns0 Comments

Wenn man keine eigene Guideline für die Webentwicklung erstellen möchte, greift man oft auf das von Google entwickelte Material Design zurück. Aber was bringt die Designsprache von Google und warum wird diese so gern genutzt?

Material

(Quelle: Material.io)

Das Material Design von Google ist die Anlaufstelle im Internet, wenn es um das Entwickeln von Webseiten und Apps geht. Dabei kann der Designer auf eine Reihe von neuer Tools zurückgreifen. Diese Designsprache hat Google erstmalig 2014 vorgestellt und damit Richtlinien festgelegt, welche es Webentwicklern ermöglicht ein einheitliches Design vorzulegen. Bist du also kein Pixelschubser gibt dir das Material Design die Möglichkeit für ein einheitlichen Auftritt.

Guideline von Google

Material Design Guideline

(Quelle: material.io)

Design ist mehr als nur Pixel von A nach B zu schieben. Es hilft dem Nutzer dabei, sich durch den Dschungel von Inhalten zu navigieren. Dabei helfen unterschiedliche Elemente, die auf verschiedene Weise angeordnet werden. Das Interface, die Farben und Formen der Elemente spielen dabei eine große Rolle, welche von dem Material Design optimal ausgeführt wird.

Mit einer ausführlichen Anleitung zeigt dir das Material Design, in welchen Anwendungsgebieten du welche Formen und Farben verwenden kannst. Angefangen mit Farbe und Typografie hat Google einen ausführliche Icon Liste mit über 750 .SVG & .PNG Dateien unter einer freien Lizenz veröffentlicht. Auf diese kannst du von der Github Seite von Google herunterladen und frei verwenden.

Bei der Konzeption eines Screen Designs ist dir das Material Design eine große Hilfe. Die fertigen Komponenten sind optimal designed und mit Erklärvideos, warum diese so aussehen, wie sie aussehen, sehr gut zu verstehen.

Anwendung des Material Design

Auch wenn du viele Vorlagen für ein Design Projekt hast, brauchst du trotzdem eine Plattform, auf der du die Komponenten zusammenführst. Je nach Anwendungsfeld kannst du die Programme von Adobe nutzen. Möchtest du Interaktion in deinem Screen  Design haben, kannst du auf Programme wie Axure oder Sketch zurückgreifen. Bei diesen kannst du Animationen oder Maus Effekte hinzufügen. Axure ist ein komplexes Programm, welches eine gewisse Einarbeitungszeit benötigt. Sketch ist einfacher gehalten und ist für Material Design sehr angenehm zu benutzen. Sketch ist bisher leider nur für Mac verfügbar.

Umsetzung in der Entwicklung

Der größte Vorteil von Material Design ist die Umsetzung in der Programmierung. So bekommst du auf Seiten wie GetMDL oder Materialize, fertige HTML und CSS Vorschläge, welche dir die Umsetzung erheblich vereinfachen. Mit diesem Code kannst du Buttons Check Boxen oder andere Komponenten einfach einbinden. Eine Icon Liste hilft dir dabei auch schwere Inhalte zu visualisieren. Auch wenn die Umsetzung vorerst schwer aussieht, gibt dir das Material Design eine perfekte Anleitung für ein ScreenDesign deiner Webseite.

Leave a Comment