Der neue Trend im UI-Design: Ein Überblick über Neumorphismus

Neumorphes Design ist ein visueller Trend, der bei UI-Designern an Bedeutung gewonnen hat und zu einer beliebten ästhetischen Wahl für zeitgenössische Software, Websites und mobile Apps geworden ist. Der Neumorphismus stützt sich auf Aspekte des Fotorealismus und des 3D-Designs und bringt simulierte physikalische Attribute – wie Schatten und Texturen – auf digitale Schnittstellen. Um die Auswirkungen des neumorphen Designs vollständig zu verstehen, werfen wir einen Blick auf seine Ursprünge.

Die Ursprünge des neumorphen Designs

Als Apple 1984 den Macintosh auf den Markt brachte, war er der erste Personal Computer mit einer grafischen Benutzeroberfläche. Damals glaubte Apple-Mitbegründer Steve Jobs, dass vertraute Icons und Symbole, wie ein Papierkorb oder ein Ordner, Computeranwendern helfen würden, die zum ersten Mal auf der Macintosh-Oberfläche zu navigieren. Jobs verließ Apple 1985, aber nach seiner Rückkehr 1997 lenkte er die UI-Ästhetik des Unternehmens in Richtung Skeuomorphismus, einem Stil, bei dem Schnittstellenkomponenten ihre realen Gegenstücke bis ins letzte Detail widerspiegeln. Als Mac OS X im Jahr 2001 auf den Markt kam, hatte Apple ein vollwertiges skeuomorphes System namens Aqua entwickelt – eine Designsprache zum Thema Wasser mit glitzernden Symbolen, Schaltflächen und Dropdown-Menüs.

Mit der Einführung des iPhone im Jahr 2007 wurde Apples Marke des Skeuomorphismus noch lebensechter. In den frühen 2010er Jahren war skeuomorphes Design de facto die Wahl für digitale Schnittstellen. Aber als die Welt immer abhängiger von mobilen Geräten wurde, wurden die Grenzen des Skeuomorphismus deutlich: Das Erstellen skeuomorpher Designkomponenten ist zeitintensiv und erfordert ein hohes Maß an technischem Können. Und während skeuomorphe Komponenten auf Desktops und Startbildschirmen großartig aussehen, verschwinden ihre feineren Details, wenn sie auf kleine Größen skaliert werden.

Im krassen Gegensatz zu den realistischen Farbverläufen und Texturen des Skeuomorphismus wurde Mitte der 2010er Jahre das Flat Design weit verbreitet, ein Neustart des Minimalismus der 1960er Jahre in der digitalen Ära. Flaches Design beraubte Schnittstellenkomponenten von allem außer ihren wichtigsten Elementen – Linie, Form und Farbe – und machte es zu einem schnellen und hochflexiblen Stil, der sich gut für große Unternehmen eignete, die ihre Designsprachen systematisieren wollten.

Einige Jahre lang war Skeuomorphismus für Designer ein Gräuel, aber aus seiner Asche erhob sich ein neuer Trend. Ende 2019 kam der Neumorphismus (kurz für „neuer Skeuomorphismus“) auf und schien das Beste seiner Vorgänger zu bieten. Der Neumorphismus schafft ein Gleichgewicht zwischen Hyperrealismus und Minimalismus und verwendet Farben, Texturen und Schatten auf eine Weise, die sich lebensecht anfühlt, ohne übermäßig detailliert zu sein.

Neumorphismus 101

Neumorphes Design hat drei gemeinsame Merkmale: monochromatische Farbschemata, geringer Kontrast und subtile Schatten. UI-Designer sind in der Lage, diese Merkmale auf eine Vielzahl von Designkomponenten anzuwenden, die die weiche Ästhetik des Neumorphismus aufweisen. Schauen wir uns eine Taschenrechner-App an, um zu sehen, wie neumorphes Design funktioniert:

Beim skeuomorphen Design wird der Taschenrechner mit Farbverläufen und Hervorhebungen gerendert, und seine Farbpalette hilft dabei, Vorder- und Hintergrund zu trennen. Es soll aussehen und funktionieren wie ein Taschenrechner, den Sie vielleicht in Ihrem Büro herumliegen finden. Eine Flat-Design-Version desselben Taschenrechners gibt die gegenständlichen Rendering-Techniken des Skeumorphismus auf und verlässt sich auf Formen und Farbblöcke, um die verschiedenen Abschnitte zu unterscheiden.

Das neumorphe Design basiert sowohl auf Skeumorphismus als auch auf flachem Design, indem es eine monochrome Farbpalette mit subtilen Schatten kombiniert, die die Tasten des Taschenrechners taktil erscheinen lassen. Der verringerte Kontrast zwischen Vorder- und Hintergrund verleiht dem Rechner ein weiches Finish, und der Gesamteffekt ist ein vereinfachter Realismus.

Beispiele für neumorphes Design

Jetzt, da Sie sich seiner einzigartigen Eigenschaften bewusst sind, werden Sie überall Neumorphismus bemerken. Tatsächlich haben UI-Designer in verschiedenen Branchen wie der Automobil-, Unterhaltungs-, Gesundheits- und Finanzbranche Schnittstellenkomponenten mit dem charakteristischen Aussehen des Neumorphismus neu gestaltet:

Die Vor- und Nachteile des neumorphen Designs

Alle Designtrends haben Vor- und Nachteile. Wenn sie durchdacht eingesetzt werden, haben Trends die Fähigkeit, vorhersagbaren Designmustern neues Leben einzuhauchen, aber es treten Schwierigkeiten auf, wenn Trends in Anwendungen gezwungen werden, wo sie den Benutzern nicht dienen. Lassen Sie uns die Vor- und Nachteile des neumorphen Designs untersuchen, um seinen Nutzen besser zu verstehen.

Vorteile

Da Neumorphismus visuell einfach ist, eignet es sich ideal für digitale Produkte, die oft aus Dutzenden, wenn nicht Hunderten von Bildschirmen und Designkomponenten bestehen. Im digitalen Produktdesign hat Einfachheit mehrere Vorteile: Sie erleichtert es Designern, ästhetisch zusammenhängende Erlebnisse zu schaffen – unabhängig davon, wie viele Bildschirme ein Produkt hat. Es beschleunigt den Prozess des Konzipierens, Erstellens, Testens und Iterierens neuer Bildschirme. Und es hilft Designern, Produkte während ihrer Entwicklung visuell konsistent zu halten.

Zusätzlich zu seiner Einfachheit können die realistischen Qualitäten des Neumorphismus UI-Komponenten taktiler erscheinen lassen und dazu beitragen, Benutzern Interaktivität zu signalisieren.

Nachteile

Obwohl Neumorphismus ein beliebter und weit verbreiteter Trend ist, gibt es Bedenken hinsichtlich der Barrierefreiheit. Wenn Designer neumorphe Elemente verwenden, die streng monochromatisch sind, könnten sie Menschen mit Sehbehinderungen wie Farbenblindheit Probleme bereiten. Darüber hinaus kann die Abhängigkeit des Neumorphismus von niedrigem Kontrast, um sein weiches Aussehen zu erzielen, die Lesbarkeit beeinträchtigen und es für Benutzer schwierig machen, Schaltflächen, Symbole, Formulare und andere wichtige Schnittstellenmerkmale zu identifizieren.

Neumorphes Design ist zeitlos

Bei der Implementierung unter Berücksichtigung der Benutzeranforderungen (und der Zugänglichkeit) ist Neumorphismus eine visuell überzeugende UI-Designoption für Apps und Websites. Seine dezenten Schatten und weichen Texturen verleihen UI-Komponenten eine Wärme, die zur Interaktion einlädt. In der Designwelt kommen und gehen Stile, aber die Einfachheit und die taktilen Qualitäten des Neumorphismus machen ihn gut geeignet, um den Test der Zeit zu bestehen.