Neumorphism – ein UX-Trend?

In Digitale Erlebnisse, Interface Design, Tools, User Experience Posted

Zusätzlich zu den unkonventionellen Dark Themes und den minimalistischen Flat Designs versetzt in diesem Jahr ein weiterer Trend die Designszene in Aufruhr: der Neumorphism. Oder um die Herkunft dieser mysteriösen Bewegung genauer zu klären, sprechen wir vielleicht eher von Skeumorphismus 2.0. Als Wiederverwertung eines von Unternehmen wie Apple längst ausgekauten Hypes verfolgt Neumorphism das Ziel, die Zweidimensionalität des klassischen User Interfaces auf eine neue Ebene zu heben.

Doch zunächst zu den Basics: Skeumorphismus findet als Gestaltungsmittel vor allem im Produktdesign Anwendung. Das Wiederaufleben von retroartigen Schallplattenspielern oder Armbanduhren in Holzoptik sind nur einige wenige Beispiele. Gängige Gestaltungspraktiken sind also die visuelle Veränderung der Materialität eines Objekts oder auch die ästhetische Revitalisierung längst vergessener Produkte. In Sachen User Interface lässt sich dieser Vorgang am besten mit Plug-Ins erklären. Beispielsweise hat nicht jeder das nötige Kleingeld für einen analoges Mischpult, dessen Kosten sich oftmals auf einen fünfstelligen Bereich belaufen können. Die Lösung ist einfach: eine entsprechende Software im Plug-In-Format; im Preis erheblich günstiger und für jeden zugänglich.

Um eine realitätsgetreue Imitation geht es auch im Neumorphism, einer abstrakten Synthese aus New und Skeumorphism. Die optische Umsetzung des Interfaces ist dabei durch den gezielten Einfall von Licht und Schatten geprägt. Die Elemente scheinen auf diese Weise aus dem Screen hervorzutreten und bilden somit den Konterpart zum minimalistischen Flat Design.

Was das Web zu bieten hat

Neumorphism wirkt futuristisch und charakterisiert sich durch seinen einzigartigen 3D-Look. Die Umsetzung mit klassischen Grafikprogrammen wie Adobe Illustrator ist dabei sehr viel einfacher als gedacht. Um zu erzielen, dass die einzelnen Elemente (zumindest optisch) aus dem Screen hervortreten, bedarf es nur einer essentiellen Komponente: Schatten. Heller Schatten sollte dabei von der oberen Hälfte des vermeintlichen Objekts abgestrahlt werden, dunkler Schatten von der unteren Objekthälfte. Abhängig vom favorisierten Programm bietet das Web mittlerweile eine Vielzahl an Kurzanleitungen und Templates für eine gelungene Umsetzung.

Bereits bei der Gestaltung wird sichtbar, inwiefern die Aufspaltung des Schattenwurfs in hell und dunkel einen Effekt verursacht, der sich klar von einer regulären Schattierung abgrenzt. Im neumorphen Design wirkt es so, als wären die Ebenen miteinander verwachsen und das Element würde aus dem Bildschirm herauswachsen. Wer sich nun zutraut, dieser gestalterischen Aufgabe gegenüberzutreten, sollte sich zuerst im Design einzelner Elemente üben und einen Sinn für den Einsatz der Schatten entwickeln. Wer allerdings direkt zum Codieren übergehen möchte, dem lässt sich mit dem Online-Generator neumorphism.io eventuell weiterhelfen.

Der fließende Übergang der einzelnen Bildebenen führt leider auch zu einigen Problematiken im Design. Fans von den zu Beginn erwähnten Dark Themes wird die Kombination mit neumorphen Elementen schwerfallen. Schatten kommen vor einem zu dunklen Hintergrund nicht zur Geltung und der futuristische Effekt wird möglicherweise nicht greifen. Ähnlich verhält es sich mit einem komplett weißen Hintergrund. Stets sollten die Designs eine leichte Farbnuance enthalten, um einzelne Bausteine bei Aktionen wie dem Mouseover sichtbar zu machen. Ein Beispiel für eine gelungene Umsetzung von Buttons könnte folgendermaßen aussehen:

Neumorphism – ein Trend mit Zukunft?

Abschließend lässt sich also festhalten: die Idee hinter Neumorphism ist zeitgemäß und modern, in Sachen User Experience Design sollten jedoch bestimmte Faktoren berücksichtigt werden. Vor allem in puncto Farbwahl zahlt es sich auf, die Palette so klein wie möglich zu halten und auf intensive Töne zu verzichten. Und auch im Content sollte minimalistisch vorgegangen werden. Neumorphism sticht durch wenig Inhalt hervor und triggert auf futuristische Art und Weise die Freude an der Nutzung. Ähnlich einem Interface, das frisch aus dem 3D-Drucker kommt, wirkt die Oberfläche beinahe haptisch und ermöglicht eine einzigartige, wenn auch spezielle User Experience. Für Anwendungen, die hingegen eine Vielzahl an Informationen übermitteln sollen, eignen sich solche Designs weniger.

• Neumorphism in user interfaces UX Collective am 17.12.2019
• Neumorphism and CSS css-tricks.com am 07.02.2020
• Neumorphism und die UX-Trends 2020 Incloud Engineering am 15.04.2020