Flat-, Material-, Soft-Design
– was denn nun?

Nach Jahren des Flat Designs haben sich die Designprinzipien für UIs im Web und in Apps stetig weiterentwickelt. Google hat mit dem Material Design eine Schippe auf flache Designelemente draufgelegt, indem mehr haptische Eindrücke durch Schatten und Fake-Dreidimensionalität erzeugt wurden. Beide Prinzipien sind heute noch ständig in Verwendung. Ich würde sagen, dass es größtenteils Geschmackssache ist und auch immer auf die Projektumgebung ankommt, wie Elemente eines UIs gestaltet werden sollten. Beide moderne Formen dienen dem Zweck, Interface-Elemente klar, clean und eindeutig zu gestalten und auch deren Funktion zu verdeutlichen. Natürlich entstehen gewisse „religiöse“ Ansichten über die verwendeten Gestaltungsformen, aber einen Stil strikt in jedem einzelnen Projekt durchzuziehen, macht alles wieder ein Stück langweiliger.

 

Damit keine Langeweile aufkommt, werden die Gestaltungsprinzipien immer weitergesponnen, wie auch jetzt wieder. Neumorphismus, oder Soft UI, ist gerade überall auf UX-Blogs und -Seiten zu sehen und definitiv ein neuer Trend, den man sich anschauen sollte.

 

Auslöser für den Trend ist Alexander Plyuto, der mit einem Dribbble-Post mit der Idee von Neumorphismus für den Aufstieg des Designprinzips gesorgt hat.

Neumorphismus – ist das Material Design light?

Das ist zwar etwas salopp formuliert, aber im Prinzip kann man das schon so sagen. Material Design hat auf starke, weite Schlagschatten und leichte Kontraste gesetzt, um einen dreidimensionalen Eindruck zu generieren. Man ist quasi zwei Schritte weiter gegangen, als es Flat Design getan hat, bei dem komplett auf Dreidimensionalität verzichtet wurde.

 

Das Soft-UI (Neumorphismus) geht jetzt wieder einen Schritt zurück und beschreitet einen Mittelweg.

Oberflächen im Vergleich

Das Material Design erzeugt den Eindruck, dass z.B. bei Card-Elementen eine Card-Fläche über dem Hintergrund schwebt. Dieser Eindruck entsteht durch den weichen Schatten um die Fläche.

 

Im Neumorphismus wird die Oberfläche als eine Art Relief gestaltet und tritt nicht so stark aus dem Hintergrund hervor. Der Kontrast ist hier deutlich weniger vorhanden und wird ausschließlich durch die Konturen der Form abgegrenzt.

Auffällig ist der zusätzliche weiße „Schatten“, der konträr zum dunklen Schatten eingesetzt wird.

Soft UI CSS-Generatoren

Mit dem Design Trend folgten schnell viele CSS Generatoren, um auch im Web Design mit Neumorphismus durchzustarten. Schaut mal beispielsweise bei diesem Generator rein und spielt mit den Reglern herum. Die gängigen Einstellungen sind ungefähr folgende:

Beispielhafte CSS-Einstellungen für neumorphische Cards eines Soft-UI
Die Werte sind nicht in Stein gemeißelt – einfach mal damit rumspielen!

Frische Spielerei mit Nachteilen

Neumorphismus ist eine frische Idee, mal wieder etwas Neues, kein Design im engen Korsett des Flat Designs oder des Material Designs. Insofern bringt der Soft UI Trend wieder etwas Fahrt in die Weiterentwicklung von Designprinzipien.

 

Es gibt allerdings Probleme:

Lesbarkeit & Verständlichkeit

Wie bereits erwähnt, herrscht beim Soft UI Design ein ziemlich geringer Kontrast, da die Flächen nur schwach durch helle und dunkle Schatten vom Hintergrund abgegrenzt werden. Das macht es, grade im Zuge der immer wichtiger werdenden Barrierefreiheit im Web, anstrengender, das UI zu verstehen. Die Lösung ist hierbei, den fehlenden Kontrast mit sehr eindeutigen Icons oder Füllflächen zu kompensieren.

 

Buttons sind beispielsweise kaum noch abgegrenzt. Kann ich da jetzt draufklicken? Nicht jeder wird das verstehen. Daher müssen die Buttons im Neumorphismus z.B. mit starken eindeutigen Icons oder Button-Texten ausgestattet werden. Wenn sich die mögliche Aktion für den Nutzer auch aus dem Kontext erschließt, macht der geringe Kontrast der Fläche nicht mehr viel aus.

Beispiele für Umsetzungen von Buttons im Soft-UI
Button-Zustände müssen beim Neumorphismus besonders deutlich werden.

Code

Soft UI Elemente zu coden ist per se gar nicht so schwer. Allerdings müssen jetzt statt einer Fläche zwei Flächen verwendet werden. Jede Fläche wird mit einem der beiden Schatten (hell und dunkel) ausgestattet. Wenn also eine komplette Website mit Soft UI Elementen durchgestaltet ist, hat jede Box zwei Flächen – das sind sehr viele zusätzliche Elemente, die es sonst nicht bräuchte.

Da der weiße Schatten mit einem Box-Shadow mit Minuswerten (z.B. box-shadow: -6px -6px 26px rgba(255,255,255,0.8);) bewerkstelligt wird, kann ich mir zudem vorstellen, dass einige ältere Browser hier Probleme machen. Im Internet Explorer (den verwenden leider noch sehr viele Menschen, vor allem in Büros etc.) hat es bei meinem Test zum Beispiel nicht funktioniert.

Neumorphismus kann in alten Browsern nicht geladen werden
Wie man hier sieht, sieht man leider nichts.

Und brauchen wir das jetzt?

Als Ansporn für die Weiterentwicklung von Design finde ich den Trend des Neumorphismus spannend, mehr allerdings auch nicht. In spätestens einem halben Jahr werden wir vermutlich viele Websites und Apps sehen, die alle die Ursprungsversion des Soft UI Designs verwenden und dann auf Probleme in der Lesbarkeit oder eventuell auch der Code-Qualität stoßen.

Dennoch ist das Prinzip ja noch nicht fertig entwickelt. Es ist an den einzelnen Gestaltern, für sich den Trend zu testen und gegebenenfalls so anzupassen, dass er für ein Projekt funktioniert (oder eben auch nicht). Kleine Randnotiz: Ich habe bisher noch keine einzige Website mit Soft UI gesehen, nur App-Designs.

 

Testen wir es einfach mal in nächster Zeit: Vielleicht setzt man das Soft-UI nur punktuell ein? Vielleicht verwendet man komplett andere Werte? Oder vielleicht nutzen wir es in einem halben Jahr auch gar nicht mehr. Schauen wir mal, wie sich das Ganze entwickelt.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.