Neumorphism & Soft UI Trend: Ultimate Guide to Neumorphic Design
Table of Contents
Get the Ultimate Neumorphic Ui Kit
In the past few months, a new design approach called Neumorphism has taken off at an incredible rate.
If you pay any attention to design trends, there’s a good chance you’ve recently seen at least one Neumorphic design or a mention of Neumorphism in one of your social media feeds or on a design site. But because it’s so new, you may have no idea what they’re talking about.
In this article, I’ll give you a quick overview of Neumorphism: what it is, where it came from, how you can try it out, and whether it’s likely to stick around.
What Is Neumorphism?
Neumorphism, also known as Soft UI, is a design approach that uses highlights and shadows to make shapes look like they are floating a bit above a background.
One of the first examples of Neumorphism was a design created by Alexander Plyuto. On his Dribble account, Plyuto posted the above graphic.
The design got a lot of hits and bounced around the Internet. Many credit it with helping to popularize Neumorphism.
Plyuto’s design is a little over the top. But you can certainly understand why it got designers excited about the possibilities of Neumorphism.
The History Behind Neumorphism
To truly understand what Neumorphism is about and what role it might play in your toolkit, you need to understand the history behind it.
Under the leadership of Steven Jobs, one of the distinctive things about many Apple products was that they relied heavily on a strategy known as Skeuomorphism.
For example, if you wanted to delete files, you would drag them over to an icon of a recycling bin.
Similarly, if you wanted to pick an e-book to read on your iPhone, the app for managing your books was designed to look like a bookshelf.
The idea behind Skeuomorphism is that users can learn how to use an interface much quicker if that interface takes advantage of concepts users are already familiar with.
At first, Skeuomorphism was an incredible success. For example, it’s widely credited for the fact that users took to iOS — an operating system for devices that had virtually no physical buttons — so quickly.
But over time, as more and more people got comfortable with digital tech, Skeuomorphism’s initial ease-of-use became less salient.
As a result, its limitations became more pressing.
For example, because Skeuomorphism was attempting to imitate the physical world, it often didn’t make an efficient use of space — especially on the iPhone’s small screen.
And Skeuomorphism suffered from a variation on the Uncanny Valley problem. Because it’s pretty evident that an iPhone or Mac desktop screen doesn’t have the depth of field of the real world, pretending that it does creates dissonance.
By 2013, Apple had had enough. With iOS 7, they introduced a flat design.
The new flat design could do a lot more in a smaller space in a very clean, simple way.
It was also less time-consuming to design.
And it was pretty easy to use.
But after a while, designers started chafing against the limits of a flat design.
For example, Google introduced Material Design, a very clean, simple approach that added in depth cues and other small touches.
Other designers experimented with what they called Flat 2.0, adding layers, subtle shadows, highlighting, etc. to bring back some perception of depth.
Late last year, in a piece on where UI design might go next, HYPE 4’s Michal Malewicz suggested a new twist on the reactions to Flat that he initially called New-Skeuomorphism.
The idea behind New-Skeuomorphism was that it “goes one step beyond modern and brings back some faux-3d, albeit not as textured and real-worldly as before.”
In the comments, Jason Kelley playfully suggested calling it Neuomorphism.
Malewicz dropped the o, and voilà: Neumorphism.
In short, Neumorphism is trying to find a balance between the last two swings of the design pendulum. It’s an attempt to take advantage of the power of Skeuomorphism, which initially paid off so well for Apple by mimicking the physical world, without going beyond what painful experience has taught us are Skeuomorphism’s limits.
How to Create a Neumorphic UI
Using Neumorphism With Graphic Design Tools
One way to create a Neumorphic design is by using traditional graphic design tools.
For example, Morgan Caldbeck has written a nice tutorial on how to create Neumorphism using Adobe XD.
If you prefer learning from YouTube videos, Alexunder Hess, Gary Simon, Caler Edwards, and Dansky have got you covered.
Hess also has a video on how to create Neumorphism using Photoshop.
Using CSS
You can also create Neumorphism just working in HTML and CSS.
In fact, there’s a great little site called Neumorphism.io where you can experiment with a Neumorphic button.
The site lets you pick the color and tweak the size, border radius, distance, intensity, and blur, as well as shape.
Once you’ve got a Neumorphic button you’re happy with, the site makes it easy to grab the CSS that created it. Here’s an example:
border-radius: 61px;
background: #eeeeeb;
box-shadow: 24px 24px 48px #c3c3c1,
-24px -24px 48px #ffffff;
As you can see, a very basic Neumorphism version isn’t rocket science; For at least a simple version, the CSS is pretty straightforward.
Never worked with a CSS box-shadow before? W3schools.com has a very useful overview, including several CSS code samples you can play with.
For a more detailed look on how to create Neumorphism using CSS and HTML, the Julio Codes channel has a useful tutorial where he shows where you can simultaneously see the code he writes and the result as he incrementally builds out the design.
He also does a particular good job of explaining why he’s adding each element as he adds it.
In addition, there are a ridiculous number of short YouTube videos where a designer cranks out a Neumorphic effect while playing music in the background.
Unless you’re interested in finding out just how many designers have questionable taste in music, you won’t want to look at more than one or two of these.
But here and there, you’ll find one that’s useful and where the music won’t make you cringe — e.g., how to create a Neumorphism Button Hover Effect or a smart home app.
Learning from Examples
Once you have a feel for the basics, there are plenty of examples freely available online that you can learn from and be inspired by.
For instance, you can find an extensive curated collection on cifwep.com that includes lots of code snippets.
Given that Neumorphism really took off on Dribble, not surprisingly there’s a large collection of examples on the site.
CodePen also has lots of examples that you can play with your heart’s content.
The other nice thing about having so many examples available online is that it gives you a quick and dirty way to get a feel for where Neumorphism works well and where it doesn’t.
Best Practices
The tutorials for using Neumorphism will give you some useful guidance on the nuts and bolts of how to create this effect using graphic design tools and CSS. But there are also three more general best practices you should keep in mind.
1) Ensure Your Design Is Accessible
It’s too early to tell what all of the accessibility challenges users of Neumorphism will need to grapple with.
But one of them is clear from the get-go: contrast.
Neumorphism relies heavily on subtle forms of contrast.
That’s a great way to get an aesthetically pleasing effect.
It’s also a great way to develop a design that isn’t very accessible.
According to the WC3’s Web Accessibility Initiative, user interface components and graphics need a contrast ratio equal to or more than 3:1 if they’re going to work for the vast majority of users.
So as you are experimenting with Neumorphism, one of the things you want to play with is how to produce an effect that has at least a 3:1 contrast ratio while still having the aesthetic impact you want to achieve.
Luckily, you don’t have to start from scratch and figure it out by yourself.
Xurxe Toivo García and Michael J. Fordham have written tutorials where they wrestle with how to produce an aesthetically pleasing, accessible Neumorphic graphic design. Fordham also posted the design he came up with on CodePen.
And if you’re struggling with finding the right contrasting colors, Web Accessibility in Mind (WebAIM) has an interactive color contrast checker that makes it easy to iteratively experiment.
Although WC3’s guidelines are good place to start, they don’t have to be the end of the story.
For example, as an article on UX Movement explains, if you’re working with 2 colors that both have high luminance, the contrast ratio doesn’t capture its impact on what people see.
One study showed that if you have a button with a strong blue background, the color contrast ratio tells you that the button’s text should be black, but most users found white text to be more readable.
While the details of the study aren’t immediately applicable, there’s an important moral here. If you want take full advantage of Neumorphism and create a design that’s effective, a little testing could be very helpful.
And that leads us to our second best practice: experimenting with and testing your design.
2) Experiment with and Test Your Design
It’s always a good idea to iteratively experiment with a design and test it out with users. That’s especially true with the technique that’s as new as Neumorphism.
There are tons of small examples of Neumorphism online. But not enough designers have used it for real, on apps and production websites that people are using, for us to really know what works and what doesn’t for particular environments and use cases.
Right now, using Neumorphism is a little like choosing the colors to paint your living room.
The only way to be sure the colors have the effect you’re looking for is to put paint to wall and then see how they work at different times of the day.
So if you’re thinking about using Neumorphism, start with some opportunities that will let you try it out and get a feel for what works and what doesn’t.
And by “what works,” I mean what works for your users.
Which you would only know if you run some tests.
Are you groaning a little right now?
If so, I’d like to remind you that Jakob Nielsen, one of the granddaddies of UX, has 30 years of research and experience demonstrating that most of the time, quick and dirty tests with a handful of users is all you need to catch the biggest problems with your design.
If this still feels like a pain, maybe that’s a sign that one of your goals this year should be to get comfortable with what other folks call guerilla usability and Nielsen charmingly calls discount usability.
Because if you aren’t comfortable running quick and dirty tests, you’ve got some design issues that go way beyond how to use Neumorphism.
3) Use An Approach That Lets You Easily Change Your Mind
Because Neumorphism is so new, there are a lot of uncertainties around using it.
The only thing that is certain is that if you build anything that isn’t trivial, odds are you’re going to end up changing your mind about at least facets of how you use Neumorphism.
If you’re building a single page app with a straightforward user interface, that’s not a big deal.
Whether you’re using graphic design tools or are working directly with CSS and HTML, when you’re working with a design project that has a relatively small scope, iterating your design is pretty straightforward.
But if you’re going to use Neumorphism with a complex website, make sure that whatever approach you use is easy to change.
That’s one of the biggest advantages of working primarily in CSS (or SASS or LESS).
Discover that some of the shading works great on most of the platforms you’re targeting but looks a little off with a new version of Firefox? Make the changes in one place and you’re done.
However, using CSS to tweak your design across many pages doesn’t always make it easier to solve the problems you’re encountering.
For example, you may discover that while you like the overall impact of Neumorphism, you’ve been using it on too many elements and on too many pages. Unless you were clairvoyant about the design fix you’ll need to employ, there may be no simple way to use styles to dial it back across the board.
That’s where the power of using a framework comes in.
If you are using React, Vue, or any other website framework and you’ve smartly architected your pages, you may find that you will end up saving yourself a huge amount of time and effort when making significant design changes.
The other reason to use an approach that lets you more easily change your mind? Even if your UX testing found that your users are responding positively to Neumorphism today, it’s quite possible they’ll find it irritating to deal with after six months — especially if Neumorphism turns into a big fad and becomes ubiquitous.
Conclusion: Where is Neumorphism Headed?
Is Neumorphism here to stay for a while?
Or will we all be pleading for it to go away by the end of 2020?
Malewicz, the designer who created Neumorphism, is firmly on Team Not-Here-to-Stay.
At the end of 2019, he argued in a blog post that
Neumorphism is not versatile enough to be a popular design style
More recently, he tweeted out a particularly egregious example of what not to do with Neumorphism, writing “When you try and kill #neumorphism and start seeing it everywhere”
[Samuel, not sure how you prefer to handle tweets, so here’s the link and the embed code:
<blockquote class=”twitter-tweet”><p lang=”en” dir=”ltr”>When you try and kill <a href=”https://twitter.com/hashtag/neumorphism?src=hash&ref_src=twsrc%5Etfw”>#neumorphism</a> and start seeing it everywhere ? Good one <a href=”https://twitter.com/Samsung?ref_src=twsrc%5Etfw”>@Samsung</a> – way to be trendy 😉 <a href=”https://t.co/ziNSTvcxcs”>pic.twitter.com/ziNSTvcxcs</a></p>— michal malewicz (@michalmalewicz) <a href=”https://twitter.com/michalmalewicz/status/1226836415138467840?ref_src=twsrc%5Etfw”>February 10, 2020</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>]
On the one hand, I empathize with Malewicz.
It must be really painful to come up with a smart, interesting idea and then watch as not very skilled designers turn it into a design version of the Telephone Game whose end results make you want to crawl into a cave and growl at anyone who comes by.
At the same time, there’s a rising chorus of No-to-Neumorphism grumblings I could see just beginning to form when researching this article, and it feels like a depressingly familiar pattern.
Sometimes it feels like social media has turned us all into three-year-olds who’ve discovered and scarfed down a stash of chocolate.
Whenever a new design/tech approach or tool or feature comes out, too many of us react by racing around like we’ve been hit with a sugar rush, then crash and have an equally dramatic melt down.
I freely admit I’m as guilty of this as anyone else.
Since 2020 has just started, I’d like to suggest a New Decade’s resolution. Let’s give our inner child a timeout and try a different approach with Neumorphism.
What if we start by asking, what can we learn from the fact that Neumorphism is taking off so fast?
Part of its popularity is undoubtedly because our modern economy has turned most of us into addicts of the New.
But something else is also going on..
The introduction of Flat design as a reaction to the excesses of Skeuomorphism was a sorely needed corrective.
But as is often the case, in correcting for the successes, we overshot the mark.
I would argue that what the rise of Neumorphism is telling us is that our first course corrections for Flat — Material Design and Flat 2.0 — didn’t go far enough.
So maybe what we need to do is think of Neumorphism as an opportunity to open up a dialogue about what’s missing in the current design balance.
As designers begin to work with Neumorphism, they can use it as a lens to shine a light on the current balance, to get a more fine-grained feeling for where the gaps are and start developing ideas about how we might use the next iteration of design trends to search for a better solution.
This deeper exploration is particularly important given the other big trend that’s just beginning to hit the design world: augmented, virtual, and mixed reality.
These three forms of what’s known as extended reality or XR have already given rise to design strategies that lean heavily on Skeuomorphism.
And at the same time, since XR is not the physical world, there’s no reason to assume that we won’t run into the same problem of finding the right balance.
Moreover, if Skeuomorphism runs rampant in XR, odds are good that excessive Skeuomorphism will spill back into the rest of digital design.
So if ever there was a moment to let go of our “X is fabulous!”, “No, X is awful!” framework of collectively working through broad design challenges, now seems as good a time as any.
And who knows? Maybe you too will toss off a snarky line in a comments section and end up helping name the next big design trend!
Leave a Reply