Umsetzung von Material Design hat ein paar Punkte, die man unbedingt beachten sollte. Wir haben sie zusammengefasst.
Material Design ist eine Erscheinung, die eine kurze Einführungsgeschichte benötigt. Warum? Weil es mit einer Einführungsgeschichte auf die Welt kam. Die meisten Design Trends im Web entwickeln sich allmählich, ähnlich wie Wasser sich langsam zu einem unterirdischen Strom sammelt. Erst wenn ein solcher Strom an einer sichtbaren Quelle hervortritt, bekommt er einen Namen und wird allseits bekannt. Dann braucht man über den Namen nicht mehr viel zu reden. Was organisch entsteht, braucht keine großen Erklärungen. Die Definition von Flat Design wird im Vergleich zu skeumorphischem Design in der Web-Entwicklung sehr deutlich. Nicht so beim Material Design, seine Einzelelemente sind optisch schwieriger vom Flat Design zu unterscheiden. Manche sagen sogar, dass es beim Material Design mehr um eine Designphilosophie geht als um optische Merkmale.
Material Design wurde 2014 von Google vorgestellt, samt Namen, Werkzeugkasten und Bedienungsanleitung, alles auf einmal. At voila! – Eine neue Designsprache lässt uns grüßen. Seit seiner Geburt schreiben hunderte Autoren darüber, wie und warum Material Design ein berechtigter Nachfolger von Flat Design ist. Oder ist er es doch nicht? Mal ehrlich, das wird sich erst nach einiger Zeit zeigen. Der von Google angebotene Vergleich mit einer universellen Sprache stimmt nachdenklich. Da war mal das Esperanto: eine großartige Idee. Eine neue Sprache, die alle Schwierigkeiten beseitigen sollte, die durch alte, unlogische und oft unnötig komplizierte Sprachen entstanden sind. Nur, die Unlogischen und Komplizierten haben sich nicht verdrängen lassen und sind heute lebendiger denn je.
Es heißt also abwarten und schauen, wie Material Design sich am besten einsetzen lässt. In der Zwischenzeit gibt es bei der Umsetzung dieser Designsprache ein paar Punkte, die man unbedingt beachten sollte, besonders in Bezug auf responsives Design und seine Hauptprinzipien. Diese Punkte hat das Designer-Team von AMgrade für Sie aufgelistet.
Prinzip “Material”
Material Design sollte die digitale Grafik mit einer betonten Stofflichkeit anreichern. Nicht umsonst hat Carl Kleiner, der Designer des Wallpapers für Android Lollipop, seine Ideen mit farbigem Papier und Skalpell erarbeitet. Die Papierelemente können mit anderen Elementen aus Bibliotheken gefüllt werden, und auf diese Weise entsteht eine Material Design Card. Nur lässt sich die materielle Stofflichkeit nicht ohne Weiteres auf jedem Display präsentieren. Die Richtlinien für responsive Layouts im Material Design beschreiben 6 verschiedene Muster, wie die Breite von Designelementen auf die Änderung der Displaygröße reagiert und noch 3 Muster, wie die Sichtbarkeit derselben die Elemente ändern könnte. Um sicherzustellen, dass die Elemente letztendlich Ihre gewünschte Design-Idee getreu wiedergeben, sollte man sie auf echten Endgeräten testen.
2. Prinzip “Bewegung”
Bewegungen und Animationen spielen für das UX im Material Design eine zentrale Rolle. Die Elemente von Material Design können unabhängig voneinander überlagert, animiert und mit Schatten versehen werden. Das bringt Bewegung. Wiederum bieten die Google Richtlinien verschiedene Möglichkeiten, wie die Elemente gezeigt oder versteckt werden können. Dabei sind alle UX Design Elemente wie Cards, Buttons, Listen und Formulare mit den vertrauten Animationen wie der Ripple Effekt versehen. Die Animationen werden durch den Klick auf einen Button ausgelöst, und die Prinzipien der Bewegungen folgen bekannten physikalischen Gesetzen. Das garantiert auf einer Seite ein gutes visuelles Feedback für den Nutzer. Auch das muss auf echten Endgeräten getestet werden, damit die Bewegungsabläufe einheitlich bleiben und dem Kontext gut angepasst sind. Wer das Prinzip “Bewegung” konsequent umsetzt, muss seine App konsequent testen.
3. Prinzip des print-basierten Designs
Material Design setzt auf klassische Gestaltungsregeln und Elemente des Grafik-Designs. Genauso wie Flat Design, benutzt das Material Design viele Icons und Schriftarten. Das sichert hohe Wiedererkennungswerte für die tragenden Design-Elemente. Zusätzlich verfügt aber jedes Design-Element über einen Tiefenparameter. Das hilft, die Interface-Elemente nach den Ebenen zu strukturieren, die Elemente bekommen eine klare Hierarchie und Definition. Auch hier kommen die Richtlinien für responsives Design Layout zu Hilfe und bestimmen, welche Ebene auf welchen Display-Größen sichtbar wird. Google Richtlinien bieten Anweisungen für über 10 Display-Größen. Dabei basieren die Anweisungen auf Google Chrome Browser. Selbstverständlich muss man das fertige Design auch auf verschiedenen anderen Browsern testen.
Beim Erschaffen des Material Designs verfolgte Google das Ziel, das Design von Websites und Apps über alle Endgeräte hinweg zu vereinheitlichen. Es gibt aber sehr viele Endgeräte. Dazu gibt es noch die 5 am meisten benutzten Browser und, was man auch nicht vergessen darf, verschiedene Betriebssysteme. Dazu noch die Tatsache, dass nicht alle Nutzer die letzte Version des Betriebssystems haben werden, was besonders auf Windows-Nutzer zutrifft.
Sie werden selbst sehen, dass das einheitliche Erlebnis nur mit vielen Tests möglich wird. Damit eine Material Design Card mitsamt ihrer Elevation und Animation auf allen Geräten korrektes Verhalten aufweist, muss man dieses Verhalten vorher korrekt testen. Es stimmt, dass alle Elemente des Material Designs auf Responsives Design ausgerichtet sind. Aber so gut die Google Design Richtlinien auch sein mögen, das Testen und Korrigieren können sie nicht ersetzen.
AMgrade GmbH ist Ihre Outsourcing-Agentur mit Sitz im Technologiezentrum Koblenz und einem weiteren Standort in Osteuropa.
Unser Schwerpunkt liegt in der Entwicklung komplexer Web-Anwendungen und Mobile-Apps. In unserem Team arbeiten viele hochqualifizierte Senior-Entwickler, Grafikdesigner und Projektmanager. Durch unsere High-End Entwicklungsprozesse garantieren wir schnelle Lieferzeiten und maximale Produkt-Qualität.
Kontakt
AMgrade GmbH
Yuriy Plastun
Universitätsstraße 3
56070 Koblenz
+49 (0) 261 88 54 27 8
hi@amgrade.de
https://www.amgrade.de
Author: pr-gateway
