let’s dev GmbH & Co. KG - The brand for groundbreaking custom software

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 – A new era of user interface design?
by Julian
13. August 2020

Neumorphism – A new era of user interface design?

Usually, we at let's dev also create required graphics such as icons and symbols strictly without three-dimensional effects like drop shadow or outline. This is also the case with our header image for this blog post. But this post is supposed to be an exception - or is it? At the latest since the keynote of Apple's WWDC last June and the introduction of Big Sur's new operating system for macOS, it's clear that UX designers are facing something new, something that seems unfamiliar at first glance.

Trendsetter Apple

Admittedly: It was somewhat foreseeable and yet few designers dare to implement 3D elements, that actually end up being incorporated into an app. Today, if you search platforms like Dribbble, Pinterest and Behance, you will quickly find what you are looking for: Numerous website and app concepts with protruding buttons, glass-like icons and floating tiles are doing the rounds. And yet such concepts have been around for several years. But why is this trend really taking off right now?

It has to be said quite clearly that Apple is an absolute trendsetter when it comes to design. Last but not least, the introduction of the flat design from iOS 6 to iOS 7 in 2013 introduced a new design language and the understanding of app icons, which almost only consist of rectangles and circles, almost overnight. Numerous operating systems like Android or the Windows Phone quickly followed suit here. It remains to be seen whether the upcoming update to macOS Big Sur will open another chapter in the design world. It will also be exciting for the design content of smartphones, because in contrast to the update on Mac and the like, the design language remains untouched there for the time being.

Neumorphism unter Apple Mac OS

Figure 1: New user interface under macOS Big Sur; Revised Dock with Neumorphism elements; Control Center with transparency layers; Photo and Mail windows with primary and secondary design elements.

Skeumorphism + Flat Design = Neumorphism?

Let's first take a look at the history of Neumorphism and how there was a first direction into this design language with Skeumorphism. In the first versions of smartphone and desktop operating systems, the aim was to make it as easy as possible for users to enter the digital world, but at the same time as familiar as possible. That is, if, for example, a note that was previously written down with a real pen on real paper should now "feel" as much the same as possible on the digital version. Thus, the appearance of the interface of the application or program was also designed accordingly. The notes app gets yellow textured paper with lines in a fancy leather cover. The camera app has a real-looking lens with a lot of shine, and the settings app has several protruding metallic gears.

The principle behind the design and the brainstorming about the look of an app were quite simple. However, this is by no means true for the graphic implementation of the graphic designers' designs. Ten years ago, there were no clearly defined guidelines on how to implement such a design. Even programs like Sketch, Adobe XD or InVision had not yet been developed at that time. In fact, there was only one program at that time, that still masters shadows and depth very well today: Photoshop. What is hardly used today as pure design software, was then the program for creating spatial icons.

Neumorphism Icon development Design process

Figure 2: Development of an App Icon from Real Object to Neumorphism Design

The switch to flat design in 2013 was a major turning point. Suddenly, plastic 3D effects such as shadows and textures were eliminated. The new design interface naturally drew a lot of criticism. Many users couldn't tell the difference between clickable buttons and non-clickable design elements. So it took some time for users to love and appreciate the newly introduced look. And since from now on, for example, the Notes app will only consist of two colored areas and three lines app icons became easier and faster - even if there are still many factors to consider for good and clear design. After a few weeks the flat design was established on the above mentioned platforms and became quite popular. After a few months, many websites and big brands also followed the design trend. Graphic programs were developed and it was easier than ever to create a screen design without drop shadows and disturbing effects.

With Neumorphism, in a way, the elements of Skeumorphism and Flat Design merge. And yet we have only just become familiar with flat design. Numerous companies are still converting their logos to the 2D look and removing gradients, gloss and reflections, and now all that is to be thrown overboard again? No, not quite. From a neutral point of view Neumorphism concentrates on objects interacting with light in a three-dimensional space. The right lighting now comes to the fore much more to the fore than ever before. Lights affect the transparency of an object, even its the function. But what does this mean for design? Objects are given more layers and depth again, and individual elements move back into the foreground thanks to light shadows. Objects lying on top of them are also with shadows and gradients from different angles, and transparencies make individual features stand out from the background. Thanks to these layers, it becomes apparent which feature is in the foreground.

Nevertheless, primary elements that allow the user to work quickly are designed quite simply in the flat design. Less important objects recede into the background and contain more effects such as transparencies. It is important to mention that the move to Neumorphism is less significant than than it was the case from Skeumorphism to Flat Design. This is because user confusion caused by a new design layout could have a deterrent effect, so that customers go back to other familiar software and products, and that is and that is something you want to avoid at all costs.

Neumorphism Finder Icon Further development Comparison

Figure 3: Further development of the "Finder" icon under macOS; the update from Flat Design to Neumorphism is less noticeable

You can love it or hate it

Much like the introduction of Flat Design, the first impressions and reactions on the social web are rather sobering and mostly negative. Neumorphism Design has been dubbed an "early design experiment", while some others have made the point that this was the work of designers more committed to formalism than usability. I myself have learned during the flat design era and have not and have not been involved in any projects that required skeumorphism. Therefore, I personally find Neumorphism as a basic concept quite good, it seems exciting and refreshing - however, it still has to be fully confirmed from the user's point of view. It will also be exciting to see how the design performs in everyday life and in daily use. Especially since many large technology companies are focusing on virtual and augmented reality, i.e. objects that can be depicted and displayed three-dimensionally in a room. If this makes our everyday life much easier with various VR or AR glasses, and helps us to do our daily tasks, then Neumorphism is just the beginning of something really big and comes just at the right time.

More articles from our blog

let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Read more
let’s dev Blog | Dasoman - Data-Sovereignty-Manager

Corporate

Dasoman - Data-Sovereignty-Manager

by Karl

2021-01-11

Read more
let’s dev Blog | We look back on the past months - And wish all the best for the coming year 2021!

Corporate

We look back on the past months - And wish all the best for the coming year 2021!

by Julian

2020-12-17

Read more
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Read more
let’s dev Blog | Adobe Max - Online for the first time

Corporate

Adobe Max - Online for the first time

by Julia

2020-10-29

Read more
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Read more
let’s dev Blog | Mensch und Computer 2020 - Digital Change in the Flow of Time

Corporate

Mensch und Computer 2020 - Digital Change in the Flow of Time

by UX Team

2020-09-18

Read more
let’s dev Blog | UX Research Part 3 - UX Methods

Technical

UX Research Part 3 - UX Methods

by Elena

2020-05-28

Read more
let’s dev Blog | UX Research Part 2 - What is UCD and what does User Research have to do with it?

Technical

UX Research Part 2 - What is UCD and what does User Research have to do with it?

by Elena

2020-04-23

Read more
let’s dev Blog | go-digital promotes establishment of home office workstations

Corporate

go-digital promotes establishment of home office workstations

by Karl

2020-03-19

Read more
let’s dev Blog | Google Passes - Card Management on Android Devices

Technical

Google Passes - Card Management on Android Devices

by Michelle

2020-03-12

Read more
let’s dev Blog | 100% code coverage in software testing - a reasonable goal?

Technical

100% code coverage in software testing - a reasonable goal?

by Raphael

2020-03-06

Read more
let’s dev Blog | Swift UI - Simple and fast implementation of user interfaces

Technical

Swift UI - Simple and fast implementation of user interfaces

by Tobias

2020-03-02

Read more
let’s dev Blog | In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

Corporate

In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

by Julian

2020-02-27

Read more
let’s dev Blog | Simplified testing of iOS push notifications in the simulator with Xcode 11.4

Technical

Simplified testing of iOS push notifications in the simulator with Xcode 11.4

by Manuel

2020-02-26

Read more
let’s dev Blog | National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

Corporate

National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

by Karl

2020-01-27

Read more
let’s dev Blog | UX Research Part 1 - Why User Research is so important

Technical

UX Research Part 1 - Why User Research is so important

by Elena

2020-01-23

Read more
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Read more
let’s dev Blog | We wish you a Merry Christmas - And a Happy New Year!

Corporate

We wish you a Merry Christmas - And a Happy New Year!

by Julian

2019-12-20

Read more
let’s dev Blog | Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

Corporate

Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

by Karl

2019-12-17

Read more
let’s dev Blog | DaSoMan at the Internet+ Expo in Foshan (China)

Corporate

DaSoMan at the Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Read more
let’s dev Blog | Google Play Console: Pre-Launch Reports

Technical

Google Play Console: Pre-Launch Reports

by Fabian

2019-12-11

Read more
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Read more
let’s dev Blog | Vernissage digital art in the media theater of the Humboldt University Berlin

Corporate

Vernissage digital art in the media theater of the Humboldt University Berlin

by Karl

2019-11-21

Read more
let’s dev Blog | World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

Corporate

World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

by Aileen

2019-11-11

Read more
let’s dev Blog | Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

Corporate

Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Read more
let’s dev Blog | Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

Corporate

Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

by Elena

2019-09-17

Read more
let’s dev Blog | Business and Enterprise App Distribution on iOS

Technical

Business and Enterprise App Distribution on iOS

by Aileen

2019-08-05

Read more
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

Read more
let’s dev Blog | let's dev supports runners at the 7th KIT Championship

Corporate

let's dev supports runners at the 7th KIT Championship

by Karl

2019-07-05

Read more
let’s dev Blog | Automated testing of C++ code with Google Test and Google Mock - Part 2

Technical

Automated testing of C++ code with Google Test and Google Mock - Part 2

by Arne

2019-06-13

Read more
let’s dev Blog | Apple WWDC 2019: These are the highlights of the keynote

Technical

Apple WWDC 2019: These are the highlights of the keynote

by Nicolas

2019-06-05

Read more
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Read more
let’s dev Blog | Official opening of the Consolidation and Expansion Center (FUX)

Corporate

Official opening of the Consolidation and Expansion Center (FUX)

by Helena

2019-04-15

Read more
let’s dev Blog | Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

Corporate

Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

by Helena

2019-04-14

Read more
let’s dev Blog | The time has come: We are moving!

Corporate

The time has come: We are moving!

by Helena

2019-03-26

Read more
let’s dev Blog | Automated testing of C++ code with frameworks - part 1

Technical

Automated testing of C++ code with frameworks - part 1

by Arne

2019-02-20

Read more
let’s dev Blog | The app in the Google Play Store

Technical

The app in the Google Play Store

by Elisa

2019-01-24

Read more
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Read more
let’s dev Blog | let's dev supports SG Siemens volleyball players from Karlsruhe

Corporate

let's dev supports SG Siemens volleyball players from Karlsruhe

by Helena

2018-12-04

Read more
let’s dev Blog | SMEs shape digitalization - SME Conference 2018

Corporate

SMEs shape digitalization - SME Conference 2018

by Helena

2018-11-12

Read more
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

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

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Read more
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Read more
let’s dev Blog | let's dev is an authorized consulting company in the „go-digital“ funding program

Corporate

let's dev is an authorized consulting company in the „go-digital“ funding program

by Helena

2018-09-01

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

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Read more
let’s dev Blog | iOS 12: The top new features at a glance

Technical

iOS 12: The top new features at a glance

by Nicolas

2018-07-17

Read more
let’s dev Blog | let's dev at CEBIT

Corporate

let's dev at CEBIT

by Karl

2018-06-11

Read more
let’s dev Blog | Introduction to User Interface (UI) Testing with Espresso

Technical

Introduction to User Interface (UI) Testing with Espresso

by Raphael

2018-06-07

Read more
let’s dev Blog | The app in the Apple App Store: what information is needed?

Technical

The app in the Apple App Store: what information is needed?

by Aileen

2018-04-27

Read more
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Read more
let’s dev Blog | User interface design for iPhone X: all innovations at a glance

Technical

User interface design for iPhone X: all innovations at a glance

by Helena

2018-02-07

Read more
let’s dev Blog | WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

Technical

WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

by Judith

2018-01-10

Read more
let’s dev Blog | Deutsche Bahn Open Data Hackathon

Corporate

Deutsche Bahn Open Data Hackathon

by Karl

2015-03-31

Read more
let’s dev Blog | Blur effects under iOS 7

Technical

Blur effects under iOS 7

by Katja

2014-04-24

Read more
let’s dev Blog | Beyond App Store - iOS application distribution

Technical

Beyond App Store - iOS application distribution

by Karl

2012-08-27

Read more
let’s dev Blog | Front-end architecture - Model View Presenter and Message Bus

Technical

Front-end architecture - Model View Presenter and Message Bus

by Karl

2011-03-08

Read more