let’s dev GmbH & Co. KG - Die Marke für wegweisende Individualsoftware

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Neumorphism - Eine neue Ära des User Interface Design?
by Julian
13. August 2020

Neumorphism - Eine neue Ära des User Interface Design?

Für gewöhnlich erstellen auch wir bei let’s dev benötigte Grafiken wie Icons und Symbole strikt ohne dreidimensionale Effekte wie Schlagschatten oder Kontur. So auch unser Headerbild für diesen Blogbeitrag. Doch dieser Beitrag soll eine Ausnahme darstellen – oder doch nicht? Spätestens seit der Keynote von Apples WWDC im vergangenen Juni und der Einführung des neuen Betriebssystems von Big Sur für macOS wird klar – auf UX Designer kommt etwas Neues zu, etwas das auf den ersten Blick ungewohnt scheint.

Trendsetter Apple

Zugegeben: Es war etwas absehbar und doch trauen sich nur wenige Designer an eine Umsetzung von 3D-Elementen, die am Ende in einer App tatsächlich eingebunden werden. Durchsucht man heute Plattformen wie Dribbble, Pinterest und Behance wird man schnell fündig: Zahlreiche Website- und App-Konzepte mit herausstehenden Buttons, glasartigen Icons und schwebenden Kacheln machen die Runde. Und dabei gibt es solche Konzepte schon seit einigen Jahren. Doch warum kommt gerade jetzt dieser Trend so richtig in Fahrt?

Man muss hierbei ganz klar sagen, dass in Sachen Design Apple ein absoluter Trendgeber ist. Nicht zuletzt wurde mit der Einführung des Flat Designs von iOS 6 auf iOS 7 im Jahre 2013 quasi über Nacht eine neue Designsprache und die Verständnis für App-Icons, die fast nur aus Rechtecken und Kreisen bestehen, eingeführt. Zahlreiche Betriebssysteme wie Android oder das Windows Phone haben hier schnell nachgezogen. Es bleibt also abzuwarten und zu beobachten, ob mit dem kommenden Update auf macOS Big Sur ein weiteres Kapitel in der Designwelt aufgeschlagen wird. Spannend wird es auch bei den Designinhalten von Smartphones, denn im Gegensatz zu dem Update auf Mac und Co. bleibt die Designsprache dort vorerst unberührt.

Neumorphism unter Apple Mac OS

Abbildung 1: Neues User Interface unter macOS Big Sur; Überarbeitetes Dock mit Neumorphism-Elementen; Kontrollzentrum mit Transparenzebenen; Foto und Mail-Fenster mit Primär- und Sekundär-Designelementen

Skeumorphism + Flat Design = Neumorphism?

Werfen wir zunächst einen Blick auf die Geschichte des Neumorphism und wie es mit Skeumorphism eine erste Richtung in diese Designsprache gab. In den ersten Versionen von Smartphone- und Desktop-Betriebssystemen sollte dem Nutzer der Einstieg in die digitale Welt so einfach, zugleich aber vertraut wie möglich gemacht werden. D. h. wenn sich z. B. eine Notiz, die bisher mit einem echten Stift auf echtes Papier aufgeschrieben wurde, nun möglichst gleich auf der digitalen Version „anfühlen“ soll. Somit wurde auch das Aussehen des Interface der Applikation oder des Programms demnach gestaltet. Die Notizen App bekommt also gelbes texturiertes Papier mit Linien in einem schicken Ledereinband. Die Kamera App eine echt aussehende Linse mit viel Schein und die Einstellungen App mehrere herausstechende metallische Zahnräder.

Das Prinzip hinter der Gestaltung und die Ideenfindung zu dem Aussehen einer App waren recht einfach. Keineswegs gilt das jedoch für die grafische Umsetzung der Designs der Grafiker. Vor zehn Jahren gab es noch keine klar definierten Guidelines, wie so ein Design umzusetzen ist. Auch Programme wie Sketch, Adobe XD oder InVision waren zu dieser Zeit noch nicht entwickelt. Eigentlich gab es zu dieser Zeit nur ein Programm, das Schatten und Tiefe bis heute sehr gut beherrscht: Photoshop. Was heute kaum mehr als reine Design Software verwendet wird, war damals das Programm zur Erstellung von räumlichen Icons.

Neumorphism Iconentwicklung Designprozess

Abbildung 2: Entwicklung eines App Icons vom realen Objekt bis Neumorphism Design

Die Umstellung auf das Flat Design im Jahr 2013 war dabei ein wesentlicher Wendepunkt. Plötzlich entfallen plastische 3D-Effekte wie Schatten und Texturen. Die neue Designoberfläche zog natürlich viel Kritik mit sich. Viele Nutzer erkannten keinen Unterschied zwischen klickbaren Buttons und nicht klickbaren Designelementen. Es dauerte also eine gewisse Zeit, bis die Anwender die neu eingeführte Optik lieben und schätzen gelernt haben. Und da fortan z. B. die Notizen App nur noch aus zwei Farbflächen und drei Linien besteht, wurde eine Umsetzung von App Icons immer einfacher und ging wesentlich schneller – auch wenn es dabei immer noch viele Faktoren für gutes und klares Design zu beachten gibt. Nach wenigen Wochen hat sich das Flat Design auf den oben genannten Plattformen etabliert und wurde durchaus beliebt. Nach einigen Monaten zogen auch viele Websites und große Marken dem Designtrend nach. Grafik-Programme wurden entwickelt und es war einfacher denn je, ein Screendesign ganz ohne Schlagschatten und störenden Effekten zu entwerfen.

Bei Neumorphism verschmelzen in gewisser Weise die Elemente von Skeumorphism und Flat Design. Dabei haben wir uns doch gerade erst mit dem Flat Design vertraut gemacht. Zahlreiche Firmen stellen noch heute ihr Logo auf die 2D-Optik um und entfernen Verläufe, Glanz und Spiegelungen und jetzt soll das alles schon wieder über Bord geworfen werden? Nein, nicht ganz. Aus neutraler Sicht gesehen konzentriert sich Neumorphism auf Objekte, die mit dem Licht in einem dreidimensionalen Raum interagieren. Die richtige Beleuchtung rückt nun viel mehr als jemals zuvor in den Vordergrund. Lichter beeinflussen die Transparenz eines Objekts, selbst die Funktion. Doch was bedeutet das für das Design? Objekte bekommen wieder mehr Ebenen und Tiefe, einzelne Elemente rücken dank leichtem Schatten wieder in den Vordergrund. Darauf liegende Objekte werden ebenfalls mit Schatten und Verläufen aus verschiedenen Winkeln versehen und Transparenzen heben einzelne Merkmale vom Hintergrund ab. Dank dieser Ebenen wird ersichtlich, welche Funktion im Vordergrund steht.

Nichtsdestotrotz werden primäre Elemente, die dem Nutzer ein schnelles Arbeiten ermöglichen, recht einfach im Flat Design gestaltet. Weniger wichtige Objekte treten in den Hintergrund und beinhalten mehr Effekte wie Transparenzen. Wichtig zu erwähnen ist, dass der Umstieg zu Neumorphism weniger signifikant ausfällt, als es damals von Skeumorphism zu Flat Design der Fall war. Denn eine Verwirrung der Nutzer durch ein neues Design-Layout könnte Abschreckend wirken, sodass Kunden auf andere vertraute Software und Produkte zurückgreifen, und das möchte man sicher um jeden Preis verhindern.

Neumorphism Finder Icon Weiterentwicklung Vergleich

Abbildung 3: Weiterentwicklung des „Finder“-Icons unter macOS; Das Update von Flat Design auf Neumorphism erfolgt weniger Auffällig

Man kann es lieben oder hassen

Ganz ähnlich wie bei der Einführung des Flat Design sind die ersten Eindrücke und Reaktionen im sozialen Netz eher ernüchternd und größtenteils negativ. Neumorphism Design wird als „frühes Design Experiment“ betitelt, manch anderer brachte den Punkt hervor, dass hierbei Designer am Werk waren, die sich mehr auf Formalismus festlegen, als auf Benutzerfreundlichkeit. Ich selbst habe in der Zeit des Flat Designs gelernt und habe bisher keine Projekte begleitet, die den Skeumorphism verlangt hätten. Daher finde ich persönlich Neumorphism als Grundkonzept ziemlich gut, es wirkt aufregend und erfrischend – allerdings muss es aus Benutzersicht zunächst noch vollständig bestätigt werden. Zudem wird es spannend zu beobachten, wie sich das Design im Alltag und im täglichen gebrauch schlägt. Zumal viele große Technikfirmen auf Virtual- und Augmented Reality setzen, also Objekte, die sich in einem Raum dreidimensional abbilden und anzeigen lassen. Wenn dadurch unser Alltag mit diversen VR bzw. AR-Brillen wesentlich vereinfacht wird, und uns hilft, unsere täglichen Aufgaben zu erledigen, dann ist Neumorphism gerade erst der Anfang von etwas ganz Großem und kommt gerade zur passenden Zeit.

Weitere Artikel aus unserem Blog

let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Weiterlesen
let’s dev Blog | Adobe Max - Zum ersten Mal online

Corporate

Adobe Max - Zum ersten Mal online

by Julia

2020-10-29

Weiterlesen
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Weiterlesen
let’s dev Blog | Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

Corporate

Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

by UX Team

2020-09-18

Weiterlesen
let’s dev Blog | UX Research Teil 3 – UX Methoden

Technical

UX Research Teil 3 – UX Methoden

by Elena

2020-05-28

Weiterlesen
let’s dev Blog | UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

Technical

UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

by Elena

2020-04-23

Weiterlesen
let’s dev Blog | go-digital fördert Einrichtung von Home Office Arbeitsplätzen

Corporate

go-digital fördert Einrichtung von Home Office Arbeitsplätzen

by Karl

2020-03-19

Weiterlesen
let’s dev Blog | Google Passes - Karten­verwaltung auf  Android-Geräten

Technical

Google Passes - Karten­verwaltung auf Android-Geräten

by Michelle

2020-03-12

Weiterlesen
let’s dev Blog | 100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

Technical

100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

by Raphael

2020-03-06

Weiterlesen
let’s dev Blog | Swift UI - Einfache und schnelle Umsetzung von User Interfaces

Technical

Swift UI - Einfache und schnelle Umsetzung von User Interfaces

by Tobias

2020-03-02

Weiterlesen
let’s dev Blog | Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

Corporate

Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

by Julian

2020-02-27

Weiterlesen
let’s dev Blog | Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

Technical

Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

by Manuel

2020-02-26

Weiterlesen
let’s dev Blog | Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

Corporate

Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

by Karl

2020-01-27

Weiterlesen
let’s dev Blog | UX Research Teil 1 – Warum User Research so wichtig ist

Technical

UX Research Teil 1 – Warum User Research so wichtig ist

by Elena

2020-01-23

Weiterlesen
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Weiterlesen
let’s dev Blog | Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

Corporate

Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

by Julian

2019-12-20

Weiterlesen
let’s dev Blog | Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

Corporate

Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

by Karl

2019-12-17

Weiterlesen
let’s dev Blog | DaSoMan auf der Internet+ Expo in Foshan (China)

Corporate

DaSoMan auf der Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Weiterlesen
let’s dev Blog | Google Play Console: Pre-Launch Berichte

Technical

Google Play Console: Pre-Launch Berichte

by Fabian

2019-12-11

Weiterlesen
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Weiterlesen
let’s dev Blog | Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

Corporate

Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

by Karl

2019-11-21

Weiterlesen
let’s dev Blog | World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

Corporate

World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

by Aileen

2019-11-11

Weiterlesen
let’s dev Blog | Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

Corporate

Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Weiterlesen
let’s dev Blog | Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

Corporate

Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

by Elena

2019-09-17

Weiterlesen
let’s dev Blog | Business und Enterprise App Verteilung unter iOS

Technical

Business und Enterprise App Verteilung unter iOS

by Aileen

2019-08-05

Weiterlesen
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

Corporate

let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

by Karl

2019-07-05

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

Technical

Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

by Arne

2019-06-13

Weiterlesen
let’s dev Blog | Apple WWDC 2019: Das sind die Highlights der Keynote

Technical

Apple WWDC 2019: Das sind die Highlights der Keynote

by Nicolas

2019-06-05

Weiterlesen
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Weiterlesen
let’s dev Blog | Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

Corporate

Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

by Helena

2019-04-15

Weiterlesen
let’s dev Blog | Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

Corporate

Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

by Helena

2019-04-14

Weiterlesen
let’s dev Blog | Es ist soweit: Wir ziehen um!

Corporate

Es ist soweit: Wir ziehen um!

by Helena

2019-03-26

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

Technical

Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

by Arne

2019-02-20

Weiterlesen
let’s dev Blog | Die App im Google Play Store

Technical

Die App im Google Play Store

by Elisa

2019-01-24

Weiterlesen
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

Corporate

let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

by Helena

2018-12-04

Weiterlesen
let’s dev Blog | KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

Corporate

KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

by Helena

2018-11-12

Weiterlesen
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Weiterlesen
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Weiterlesen
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Weiterlesen
let’s dev Blog | let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

Corporate

let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

by Helena

2018-09-01

Weiterlesen
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Weiterlesen
let’s dev Blog | iOS 12: Die Top-Neuerungen im Überblick

Technical

iOS 12: Die Top-Neuerungen im Überblick

by Nicolas

2018-07-17

Weiterlesen
let’s dev Blog | let’s dev auf der CEBIT

Corporate

let’s dev auf der CEBIT

by Karl

2018-06-11

Weiterlesen
let’s dev Blog | Einführung in User Interface (UI) Tests mit Espresso

Technical

Einführung in User Interface (UI) Tests mit Espresso

by Raphael

2018-06-07

Weiterlesen
let’s dev Blog | Die App im Apple App Store: welche Informationen werden benötigt?

Technical

Die App im Apple App Store: welche Informationen werden benötigt?

by Aileen

2018-04-27

Weiterlesen
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Weiterlesen
let’s dev Blog | User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

Technical

User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

by Helena

2018-02-07

Weiterlesen
let’s dev Blog | WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

Technical

WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

by Judith

2018-01-10

Weiterlesen
let’s dev Blog | Open Data Hackathon der Deutschen Bahn

Corporate

Open Data Hackathon der Deutschen Bahn

by Karl

2015-03-31

Weiterlesen
let’s dev Blog | Blur-Effekte unter iOS 7

Technical

Blur-Effekte unter iOS 7

by Katja

2014-04-24

Weiterlesen
let’s dev Blog | Beyond App Store – Distribution von iOS-Anwendungen

Technical

Beyond App Store – Distribution von iOS-Anwendungen

by Karl

2012-08-27

Weiterlesen
let’s dev Blog | Frontend-Architektur – Model View Presenter und Message Bus

Technical

Frontend-Architektur – Model View Presenter und Message Bus

by Karl

2011-03-08

Weiterlesen