Was ist Soft-UI (Neumorphismus)?
Soft UI / Neumorphism / Neumorphismus

Was ist Soft-UI (Neumorphismus)?

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”.

Das ist neumorphism bzw. Neumorphismus (Soft UI)

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:

Neumorphismus Dribble
Der originale Upload des Dribble-Users Alexander Plyuto

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 vs Nemorphismus Soft UI
Material Design vs Nemorphismus (Soft UI)

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:

Tutorial

Auch dieses nette “neumorphistische” Redesign-Konzept zur Google Startseite wollten wir Ihnen nicht vorenthalten:

Die Google Startseite in der "Neumorphism-Version" (Quelle: uxplanet.org)
đŸ”„ Die Google Startseite in der “Neumorphism-Version” (Quelle: uxplanet.org)

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:

Nein, Nein, lass das sein!

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:

Das ist schon viel besser

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.

Welchen Button wĂŒrden Sie drĂŒcken?
Welchen Button wĂŒrden Sie drĂŒcken?

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.

Alexander Plyuto veröffentlichte außerdem diesen “Basic Guide” zu seinem Konzept auf Figma

Neumorphismus Konzept - Temperatur-App UI-Design

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.

4/5 - (8 Bewertungen)
Verfasst von
Alexander Jakob

whirlpool-king.de

www.gpswelt.com

Wie ist Ihre Meinung dazu?