Material Design für das perfekte UI

Material Design für das perfekte UI

Lesedauer ca: 3 Minuten

Ursprung des Material Design:

Material Design ist eines der bekanntesten Open Source Design Systeme der Welt. In diesem Design sind Richtlinien, Komponenten und Werkzeugen vorgegeben. Diese dienen zur Erstellung von Benutzeroberflächen um Unternehmen, Designern und Nutzern das Leben zu erleichtern.

Group 308 (1)

Material Design wurde 2014 von Google unter dem Codenamen Quantum Paper entwickelt. Ziel war es, ein Design System zu erschaffen, welches dem Nutzer übersichtliche und klar strukturierte Oberflächen bietet. Nicht nur in der Android App-Entwicklung wird das Material Design verwendet. Breite Anwendung findet es auch bei Desktop-Programmen und Webseiten. In der Symbiose zwischen Android App, Desktop-Programme und Webseiten bietet es den Nutzern eine einheitliche plattform- und geräteübergreifendes Nutzerlebnis.

Zusammenspiel von Licht und Schatten

In der Experimentierphase wurde das Verhalten von Papierkärtchen untersucht. Diese eigentlich flachen Objekte, werfen bei schrägem Lichteinfall einen sichtbaren schatten. Dieses Phänomen nahmen die Erschaffer von Material Design als Grundlage der Designsprache. So basiert der entstandene Stil auf kartenartige Flächen, dem Gestaltungsstil des Flat Designs. Die Elemente verhalten sich wie Papier, das in unterschiedlicher Höhe zueinander steht und von einer Lichtquelle beleuchtet wird. Der Effekt der Hebung innerhalb der zweidimensionalen Umgebung wie einem Display wird durch den Schatten erzeugt. Kombiniert mit passenden Animationen, sollen die Objekte der Benutzeroberfläche als “Materialien” wahrgenommen werden. Sie verhalten sich auch unseren physikalischen Gesetzen entsprechend.

Auswirkungen auf die App-Entwicklung

Alle Geräte höher oder gleich Android Version 5.0 unterstützen das Material Design. Dies trifft in etwa für alle nach 2009 hergestellten Geräte zu. Fast alle hauseigenen Google Apps haben bis Ende 2015 einen frischen Anstrich erhalten. Selbstverständlich mit Material Design als Grundlage. Beispiele sind Gmail, Google Maps oder YouTube. Selbst Desktop-Programme wie der Google Chrome Browser greift auf das Material Design zurück. Letztmals fand 2018 zuletzt eine Umgestaltung der Material Design Sprache statt. Seitdem haben Designer nun noch mehr Möglichkeiten im Umgang mit Formen, Farben und Typografie. Mittlerweile werden viele andere Apps ausschließlich auf Grundlage der Google Design Sprache programmiert. Nutzer befinden sich in einer gewohnten Umgebungen, die Zufriedenheit steigt und die App wird häufiger benutzt.

UI-Entwicklung mit Sketch

Für das bekannte Design Programm Sketch (welches ein Standardwerkzeug im Prozess der UI-Entwicklung ist und unter anderem auch bei uns Anwendung findet) erschien das Add-on “Material Theme Editor”. Mit ihm lassen sich nutzerfreundliche und gleichzeitig ansprechende Benutzeroberflächen erstellen, die sich am Google Standard halten und gleichzeitig individuell gestaltet werden können. Der Material Theme Editor kommt mit mehreren vorgefertigten Bibliotheken. Diese lassen sich beliebig anpassen oder neu gestalten.

Fazit: Material Design als Projekt ist noch nicht abgeschlossen. Vielmehr handelt ist es als ein Prozess zu sehen, der stetig weiterentwickelt wird. Oberstes Ziel dabei ist es eine plattformübergreifende Design Sprache zu schaffen. Nutzer von Programmen oder Apps, welche auf Basis von Material geplant und entwickelt wurden, erhalten als Mehrwert eine übersichtliche und strukturierte Benutzeroberfläche. Der Entwickler hingegen erhält klare Richtlinien, eine gute Dokumentation und kann auf eine Vielzahl von Beispielen zurückgreifen.

Sie haben eine Projektidee?​​​

Vereinbaren Sie jetzt ein unverbindliches Strategiegespräch mit einem unserer Experten.