Neumorphismus im Webdesign und Web-Frontend Development


Bastian Mucha

Präsentation
21. December 2021, 11:00 Uhr, Raum Zoom
Betreuer
Christian Noss
Kooperationspartner
TH Köln
Stichworte
Frontend-Development, Design, UX/UI, Neumorphismus, Skeuomorphismus
Bildrechte
https://dribbble.com/shots/9890709-Neumorphism-UI-Trend-2020) designed by OTAKOYI

Abstract

Die Gestaltung des User Interface Designs hat einen direkten Einfluss auf seine Bedienbarkeit. Nachdem der Designer Alexander Plyuto eines seiner Werke auf dem Design-Community-Portal Dribble hochlud, entfachte großes Interesse in der dortigen Community. Der daraus neu entstandene Designstil wurde Neumorphismus genannt und brachte aus dem Auge des Betrachters etwas Frische in die standardmäßig eingesetzten Interfaces. Da so mit dem Neumorphismus ein neuer, interessanter Trend erschienen ist, erscheint es sinnvoll zu überprüfen, wann dieser sinnreich und wirksam eingesetzt werden kann.

Daher wird im Folgenden betrachtet, wie der Neumorphismus im Webdesign einsetzbar ist und welche Aspekte im Web-Frontend Development beachtet werden sollten. Die konkret formulierte Forschungsfrage lautet dementsprechend: ”Unter welchen Aspekten ist der Neumorphismus im Webdesign einsetzbar?“.

Die Formulierung der Forschungsfrage entstand nach der ersten Beschäftigung mit diesem Designtrend. Hier fiel auf, dass dieser nicht für jedes UI-Element optimal ist. Das Problem liegt vor allem in der Zugänglichkeit für verschiedene Nutzergruppen, unter anderem aufgrund der Wahrnehmung der Schaltflächen als solche. Aus dieser Beobachtung ergab sich die Frage, welche Aspekte für einen sinnvollen Einsatz neumorphischer Elemente beachtet werden müssen.

Um die Forschungsfrage zu beantworten wurde eine Mischung aus literarischer Herangehensweise und Entwicklung, Darstellung und Vergleich selbst gebauter, neumorphischer Elemente mittels Cascading Style Sheets (CSS) genutzt. Der theoretische Hintergrund befasst sich zunächst mit einer Einordnung des Neumorphismus. Hierbei wird auf eines der bekanntesten UI-Designs, den Skeuomorphismus, eingegangen, um die Entstehung des Neumorphismus zu erklären. Nachfolgend wird dieser als Hauptthema ausführlich vorgestellt. Darauffolgend wird die Implementierung in CSS vorgenommen und auf Probleme bzw. Lösungen eingegangen. Hierzu werden Beispiele entworfen, die mögliche Umsetzungen aufzeigen. Im Anschluss werden die Einschränkungen dieses neuen Designtrends herausgearbeitet. Auf Grundlage dieses theoretischen Hintergrundes und der bildhaften Beispiele wird schließlich ein Fazit gezogen, in welchem die Beantwortung der Forschungsfrage die zentrale Rolle spielt. Hierfür wurden einzelne Bewertungskriterien ausgearbeitet und vorgestellt.

Als Gesamtergebnis lässt sich festhalten, dass es sinnvoll erscheint verschiedene Designtrends zu mischen und so die Vorteile eines jeden Einzelnen zu nutzen. Für den Neumorphismus bedeutet dies, dass er für bestimmte Elemente einer Webseite gut eingesetzt werden kann, beispielsweise bei strukturschaffenen kartenbasierten Elementen. Durch diese Vermischung lassen sich Schwächen beseitigen bzw. ausgleichen.

Vorschläge für weitere Arbeiten im Themenfeld

Empirische Forschung über die Gebrauchstauglichkeit von GUI Elemente im neumorphischen Design

Redesign einer Website auf der Basis des Neumorphismus