var _paq = _paq || [] _paq.push(['disableCookies']); _paq.push(['enableHeartBeatTimer', 5]); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); function embedTrackingCode() { var u="//matomo.ole-beekmann.de/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', 'X']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0] g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); } setTimeout(function () { embedTrackingCode(); }, 5)

Neumorphism – ein UX-Trend?

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.

Selbst ein komplettes Mischpult kann mittlerweile über Plug-Ins digital abgebildet werden

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.

Die haptisch wirkenden Interfaces sind charakterisierend für Neumorphism

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:

Bei der Farbwahl sollte im Neumorphism as simple as possible vorgegangen werden

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.

Datenschutz
Ole Beekmann e.U., Besitzer: Ole Beekmann (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
Ole Beekmann e.U., Besitzer: Ole Beekmann (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.