Moodboard Series: Neumorphism

Liam McKay June 29, 2021 · 7 min read

Neumorphism has been showing up in more and more work recently as designers look for different aesthetics to explore that moves them away from the comfort of ‘flat design’ and ‘material design’ trends. Characterized by beautifully soft minimalistic interfaces, the trend of Neumorphism certainly looks like it’s on the rise, and it’s here to stay in one form or another.

The neumorphism design style grabbed the spotlight thanks to one Dribbble post that received a lot of likes and attention back in 2019, and it has continued to prove a popular design choice for designers ever since, but just what makes up the look and how can we spot it? In this post, we are going to visually explore the characteristics of neumorphism and see what makes it unique to the trends that came before it.

What is Neumorphism?

Hex Color Palette: #f2f5ff, #808ca4, #171c47, #83d5f6, #bbc4d6, #80e19e

If you had to boil neumorphism (or neo-skeuomorphism) down to just one single word, that word would be ‘soft.’ The look relies heavily on the use of smooth lighting, soft highlights and shadows, big rounded shapes, faded gradients and blurs, and simple monochromatic color palettes. The style attempts to retain a level of realism when it comes to the overall lighting, but then it breaks out from the real world with abstract touches and minimalism, giving plenty of white space to help interfaces feel more open and futuristic.

The New Skeuomorphism

The neumorphism name itself originates from the idea that this trend is essentially viewed as the ‘new skeuomorphism’. Skeuomorphism is a style that has been around since the early days of computers, but it was popularised in the early days of the Apple iPhone, and essentially, it looked to closely mimic real-world elements in a very literal way when it came to re-creating for the screen. This meant populating your design with real materials, surfaces, buttons, switches, and lighting, as well as the layout, structure, fonts, and iconography too.

So, for example, if you were going to create a skeuomorphic alarm clock app, you would first closely examine examples of real-world alarm clocks and begin to re-create stylized elements from those physical interfaces for your digital version to help make your app feel more like its real-world counterpart. Here’s a fantastic example of this kind of thinking in action by Ben Keating

This was done by designers as a way to introduce a certain familiarity into their digital interfaces and to make interactions and controls a little more intuitive; this was especially true for early app designers at a time where the idea of mobile apps on a touch screen was still very new.

As time and trends went on, designers started to venture away from skeuomorphism. They moved more into flat design and material design, which have both pretty much dominated the design world ever since. But as skeuomorphism itself has begun to make a slight comeback, this has lead to more designers to begin exploring how a more minimalistic or futuristic adaption of skeuomorphism might look, and this is where neumorphism steps in — it’s a great mid-way point that sits somewhere between skeuomorphism and flat design.

Characteristics of Neumorphism

Neumorphism is similar to skeuomorphism in the sense that it has this very ‘real’ tactile feel to it, and that gives it a sense that it could be something that exists in the real world. Still, the main difference is that neumorphic designs are a little more abstract in a way that you can’t always point to a real-world example that neumorphism is mimicking. It borrows many cues from the skeuomorphic style but then gives it a much more minimal or futuristic polish that allows interfaces to look real and touchable without necessarily representing something that exists in reality.

If we take a look once again at the skeuomorphic alarm clock example from the section above and compare it to an example of a neumorphic clock design by Jatin Lathiya we can get a sense of how the two trends share some similar ideas, but the final results look vastly different.

There are several key characteristics that help to make the overall neumorphism style quite recognizable. On their own, these characteristics are nothing new, but it’s all about the way they are combined and the overall polish that you give that can push something into the neumorphic category. Here are some of the clues to look out for to help you identify something as neumorphism.

Super Soft

Compared to something like material design, which is known for stacking elements and displaying shadows in a ‘realistic’ way to increase contrast and add subtle depth, neumorphism instead looks to extrude elements out of the background in a way that makes them appear to be one with the background that they sit on.

This is often achieved by having a drop shadow with a very large blur radius and low opacity on one side of a shape or element and a similarly blurry highlight on the opposite side. This results in a clean, soft, touchable aesthetic that has a very gentle minimalistic vibe.

This softness can come at the cost of contrast, and one main criticism of the neumorphism trend happens to be the fact that it is perhaps ‘too soft’ at times, and important elements can get ‘lost’ as they don’t always stand out as much as they perhaps should.

Rounded Everything

Because the neumorphism style makes it look like elements pushing out from the surface behind it, what you end up with is very rounded shapes and corners to help sell that look. If you take a peek at any design in this category, you will notice that almost everything is extremely rounded, and the radius on corners is cranked up high. This adds to the style’s overall softness and combines incredibly well with the subtle lighting to give a very gentle final result.

Monochrome Colors with Vibrant Accents

Color pallets tend to be fairly limited, with a soft monochromatic look for the most part, with some use of a vibrant accent color or gradient popping up in some designs. Neumorphic work can be very monochrome to the point where buttons or button text don’t even have a different color at all, and it is just the shadows that pop them out from the background.

We tend to see lots of light background colors used, with either off-white or grey tones being the most common color choice, then for the darker text, once again, we see regular use of some shade of grey or something that is just off-black. This is not a strict identifier of the style, just a common theme throughout, but for example, I’ve seen a number of ‘dark mode’ designs that basically follow the same ideas, just inverted.

Minimal Fonts & Icons

When creating such soft and delicate elements, it naturally makes sense to keep the content of the interface quite minimal, too, so with neumorphism, we often see minimalist icons put to good use, and designers like to look to modern, rounded sans serif fonts to help complete the look. I’ve seen many designs using simple line icons and others featuring duo-tone icons, all usually featuring just a simple monochrome color scheme, nothing fancy.

Neumorphism Collections

I have always been a massive fan of skeuomorphism regardless of how in trend it was, so personally, I am very happy to see it make a comeback and for it to be evolving into other design trends. If you too are a fan of this look and are looking to re-create some similar looks in your own work, then I have put together a Neumorphism Collection here on Creative Market, which contains a mixture of various graphic design resources that either directly use this style, or would be a great addition to any neumorphic design. Likewise, if you are looking for more examples and inspiration in this style, I’ve built a Dribbble Collection featuring some fantastic examples that I found along the way.

If you found this post useful, please head over to our moodboard series on the Creative Market Blog to browse similar inspirational content created in a similar format.