Neumorphismus – Der neuste UI-Trend đ„
Neben Skeuomorphismus und Material Design gibt es einen neuen Trend im UI-Design: Neumorphismus (auch Soft-UI genannt). Es handelt sich dabei um einen Wechsel zu einer weitaus realistischeren NutzeroberflĂ€che, mit einem reliefartigen 3D-GefĂŒhl. Der Name ist eine Wortneuschöpfung und kommt von den Worten “Neu” und “Skeuomorphismus”.
Vor einiger Zeit haben wir bereits bemerkt, dass dieser Wandel ĂŒberall um uns herum begann – Apple ist dafĂŒr ein gutes Beispiel. Der Trend in Richtung “superflach und minimal” bekam einen kleinen RĂŒckschlag und nun sind wir schlieĂlich beim Neumorphismus angelangt
Egal, welche Liste mit “UI-Trends 2020” man durchstöbert: In jeder wird Neumorphism erwĂ€hnt.
Einen Schritt zurĂŒck, nur besser?!
Der ganze Hype begann mit diesem kreativen Dribble-Upload von Alexander Plyuto am 05.11.2019, welcher fĂŒr ordentlich Aufmerksamkeit sorgte:
Die Grafik erhielt innerhalb kĂŒrzester Zeit mehr als 4000 Likes, sowie 300.000 Ansichten und brachte den Stein ins Rollen. AnschlieĂend wurden auch von anderen Nutzern Ă€hnliche Konzepte auf der Plattform hochgeladen.
Und obwohl dieses User-Interface Konzept keineswegs perfekt ist (zB. ist das Label “25%” auf der rechten Grafik verkehrt herum), war es dennoch ausschlaggebend fĂŒr diesen neuen Trend und sorgte fĂŒr zahlreiche neue innovative Ideen unter Designern.
Ganz nach dem Motto: “Make UI-Design Great Again” đ
Was ist der Unterschied?
Da sich die Buttons nicht stark verĂ€ndert haben, werfen wir einen Blick auf die OberflĂ€chen bzw. Formen, die fĂŒr diesen Style essentiell sind:
Material Design OberflÀche
Eine “Material Design” OberflĂ€che ist in der Regel eine Form, die ĂŒber dem wahrgenommenen Hintergrund schwebt und einen Schatten auf diesen zurĂŒckwirft. Der Schatten verleiht der FlĂ€che eine Tiefe und definiert in vielen FĂ€llen auch die Form selbst – da sie prinzipiell randlos ist.
Neumorphic OberflÀche
Die neumorphe Karte gibt jedoch vor, aus dem Hintergrund herauszutreten. Es handelt sich um eine reliefartige Form, die aus genau dem gleichen Material wie der Hintergrund besteht. Wenn wir sie von der Seite betrachten könnten, sehen wir, dass sie nicht “schwebt”, wie es beim Material-Design der Fall wĂ€re.
Dieser Effekt lĂ€sst sich ziemlich einfach erreichen, indem man mit zwei Schatten spielt, einer mit negativen Werten, der andere mit positiven. Aber damit es funktioniert, kann unser Hintergrund nicht vollstĂ€ndig schwarz oder vollstĂ€ndig weiĂ sein. Er muss zumindest ein wenig getönt werden, damit sowohl dunkle als auch “helle” Schatten sichtbar sind. Sie können jeden beliebigen Farbton fĂŒr den Hintergrund verwenden, so dass er je nach Ihrer Wahl wĂ€rmer oder kĂ€lter sein kann. Aber weiĂe und dunkle Schatten mĂŒssen, wenn auch nur leicht, auf dem Hintergrund sichtbar sein.
In den folgenden Grafiken sehen Sie den Code hinter dem Design:
Auch dieses nette “neumorphistische” Redesign-Konzept zur Google Startseite wollten wir Ihnen nicht vorenthalten:
Die Vor- und Nachteile
Der Hauptvorteil dieses Stils ist die “Innovation” (zumindest derzeit). Es kann auĂerdem mit anderen Stilen gemischt werden, damit es nicht so einseitig aussieht.
Es gibt jedoch einige Probleme die mit diesem Style einhergehen. Zwei Hauptprobleme, die wir bisher gefunden haben sind:
- Nutzerfreundlichkeit bzw. Barrierefreiheit
- Methoden, um es effizient zu programmieren
Nutzerfreundlichkeit
Das Hauptproblem beim KontrastverhĂ€ltnis zwischen der Form und dem Hintergrund ist, dass kein messbarer Kontrast existiert, wenn beide die gleiche Farbe haben đ. Wir können allerdings die Farbe des ersten Pixels beim Schatten messen. Daraus ergeben sich folgende Werte:
Wie Sie sehen können, sind sowohl die Material-Design, als auch die Soft-UI-OberflĂ€che ziemlich kontrastarm. Das ist natĂŒrlich zum Teil ihr Reiz, und die Karten selbst werden auch nicht fĂŒr aktive Elemente verwendet. Solange wir also die Buttons mit ausreichend Kontrast halten, sollte es kein Problem geben.
Der Unterschied zwischen diesen ist sehr gering, und wenn wir einen besseren Kontrast fĂŒr die OberflĂ€chen verwenden wollen, mĂŒssten wir sie auf diese Weise machen:
Und da fast niemand die Schatten so stark macht, bedeutet dies, dass der Rest der UI-Elemente zugĂ€nglich sein muss. Diese Annahme fĂŒhrt zu der Schlussfolgerung, dass die OberflĂ€chen nicht wirklich so wichtig sind, wenn wir die richtige Hierarchie durch Typographie, AbstĂ€nde und Kontrast zu den wichtigen Elementen schaffen.
Auch bei Buttons gut?
Das Hauptproblem der Accessibility erscheint jedoch, wenn wir uns entscheiden, unsere Komponenten als Buttons und nicht als Karten zu verwenden.
Man kann zwar einen gedrĂŒckten Zustand mit umgedrehten inneren Schatten erzeugen:
Das Problem ist hier aber gravierend.
Dieser gedrĂŒckte Zustand hat zu wenig Kontrast, um einen Unterschied zu bedeuten. WĂ€hrend es bei OberflĂ€chen bzw. Karten kein groĂes Problem darstellt, muss bei aktiven Buttons oder SchaltflĂ€chen der Zustand jederzeit ersichtlich sein.
Hier gibt es einige Ideen, wie z.B. die Verwendung eines Gliederungs- und FĂŒllsymbols, einer Unterstreichung oder sogar das FĂŒllen des gedrĂŒckten Zustands mit einer Farbe. Siehe folgendes Bild:
Sie können natĂŒrlich mit verschiedenen Ideen experimentieren, das Wichtigste ist allerdings, dass es fĂŒr den Nutzer klar ersichltlich sein muss, ob ein Button aktiv ist oder nicht.
Schönes und innovatives Design ist zwar eine coole Sache, Nutzerfreundlichkeit sollte aber immer im Vordergrund stehen.
CSS Code (Generator)
Hier können Sie den passenden CSS-Code fĂŒr Neumorphismus generieren (man muss sich aber ein bisschen damit spielen, um den richtigen Effekt zu erhalten).
Die optimalen Einstellungen:
- Size: beliebig
- Radius: beliebig
- Distance: 8px
- IntensitÀt: 0.06
- Blur: 17px
Probieren Sie es aus:
Andere Effekte
Dieser neue Stil kommt neben den oben erwĂ€hnten OberflĂ€chen auch mit “grafisch intensiveren” SchaltflĂ€chen und Schaltern. In vielen FĂ€llen mĂŒssen wir einfach zu den “guten alten Zeiten” zurĂŒckgreifen und Bitmaps verwenden. Das scheint ein RĂŒckschritt zu sein, aber keine Sorge – es ist nicht essentiell. Man kann auch moderne SchaltflĂ€chen mit neumorphistischen FlĂ€chen kombinieren, und geniale Designs erhalten.
Nun liegt es an Ihnen: Spielen Sie mit diesem Trend herum und entwickeln Sie ihn weiter. Die Aufgabe des UI-Designers ist es nĂ€mlich einfach ausgedrĂŒckt, Rechtecke zu bewegen, so dass jedes Mal, wenn die Rechtecke etwas “anders” werden, etwas neues entsteht. Ohne diese stĂ€ndigen Entwicklungen wĂŒrden alle Produkte wieder gleich aussehen.
Der SpaĂ kann beginnen!
WeiterfĂŒhrendes Youtube-Video von Caler Edwards:
Vielen Dank auĂerdem an uxdesign.cc, die diesen Artikel möglich gemacht haben.
