If you’ve spent any time in design blogs or communities in the last year, you’ve likely heard of neumorphism, a new design trend that’s fascinated and divided the UI/UX community. But what is it, exactly, and is it the future of user interfaces? To answer that, we first need to understand the history behind it.
Digital design began with skeuomorphism, a design trend that relied on real-world parallels to convey digital ideas to first-time computer users. Designers achieved this by creating three-dimensional, realistic-looking elements. For example, skeuomorphic buttons would appear raised, and pressing them would sink them down, just as buttons behave in reality.
Flat design changed the way we look at digital products when it gained mainstream popularity in 2013. By disconnecting digital elements from real-world items, it allowed for design to become simpler and – true to its name – flat, by moving from three-dimensional to two-dimensional elements. Flat design is still used for the vast majority of digital products today.
Neumorphism is a new design trend believed to have been started in late 2019 by Dribbble user Alexander Plyuto, which has since inspired thousands of designs on the platform and other design communities. It borrows the real-world, three-dimensional elements of skeuomorphism while drawing on the simplicity of flat design. The result is a minimalistic-looking interface that feels almost tactile.
The key to neumorphism is how it treats depth. While flat design has just two levels of depth (flat and raised), neumorphism has three: sunken, flat, and raised. This allows it to either highlight or de-emphasize different elements, focusing the user’s attention better.
Buttons, for example, will display as raised until the user presses them, at which point they will display on the sunken level.
Another important aspect of neumorphism is how it handles raised elements. Whereas flat design uses a drop shadow to create the effect of an element hovering above the background, neumorphism uses two shading – light on one side and dark on the other – to suggest that the raised element is attached to the background and not hovering above it.
The idea is that the light is bouncing off one side of the element, which is attached to the background, causing the shadow on the other side.
To achieve its clean look, neumorphism also tends to use light, pastel colors for the background and elements. The background and overlaying elements which usually have very similar, but slightly offset colors.
It borrows the real-world, three-dimensional elements of skeuomorphism while drawing on the simplicity of flat design.
A big differentiator between flat design and neumorphism is that neumorphism will very rarely use hard lines as borders for elements. In addition, neumorphism will almost exclusively use rounded corners to keep a soft look, refraining from any harsh angles.
While its use of three-dimensional elements are clearly borrowed from skeuomorphism, neumorphism uses much simpler icons and usually relies on shadows and gradients to achieve its three-dimensional effect, as opposed to detailed textures.
The appeal of neumorphism
As designers, we’re always looking for challenges and new ways to innovate and refresh user interfaces. Since the adoption of flat design close to a decade ago, there has yet to be a significant change in visual styles used in the design community, so the appeal of a brand new type of UI is easy to understand.
Neumorphism has a distinct look that clearly contrasts with the styles we’ve been using for seven (or more) years. It also utilizes different concepts than flat design or even skeuomorphism.
Its soft shadows and lack of hard, separating lines give it a fresh, clean feel that sets it apart from flat design. This has inspired many designers to contribute their interpretations and variations on the neumorphic style. The influx of these explorations are reminiscent of the creative surge that stirred the industry when flat design was initially introduced. Seeing something new – truly new – in the design world is rare.
Neumorphism imagines a soft, simple world of digital interactions that feels seamless and minimally intrusive. Combining the realism of skeuomorphism with the minimalism of flat design, neumorphism creates a glossy digital experience that pops out of your screen without overwhelming you.
Taking part in creating a new type of digital interaction is every designer’s dream. Being able to redesign existing experiences in a new way is both hard and rewarding, and neumorphism is the perfect opportunity to do just that.
Neumorphism’s effect comes largely from its pale color palette and from using shadows instead of hard borders. While this makes the designs feel clean and open, it also presents a significant accessibility problem.
The similar colors used in the background and foreground and lack of clear borders make most neumorphic designs inaccessible to users with visual impairments, who require a much higher level of contrast in order to distinguish between different elements.
Even to users without visual impairments, the glossy, 80’s-inspired, soft-focus effect that neumorphism uses, can be hard to parse sometimes. This is especially problematic in the dark mode versions of neumorphic designs, where very subtle shadows disappear entirely when you squint.
Neumorphism’s focus on a very distinct style might alienate products whose brand guidelines aren’t compatible with the trend. While flat design changed the way we perceive digital interfaces, its guidelines offered enough leeway to fit a lot of different styles.
At the moment, neumorphism doesn’t appear to have that flexibility. A brand looking to redesign to neumorphism might find that their brand language is not compatible with the pastel colors and soft borders it has to offer. That’s not to say that there isn’t room for neumorphism to be more accommodating of different types of visual styles, but it’s certainly not there just yet.
As more designers are inspired by this trend, we may see neumorphism evolve into a movement that can contain many different styles. Many are already tackling this issue, so it may just be a matter of time until a more inclusive version of the design style emerges.
One of the most important tools in a designer’s arsenal is the use of whitespace. Modern design draws heavily on early 20th-century trends such as De Stijl and Bauhaus, which pushed back against the tightly knit elements in older design trends and introduced the idea of using space and grid to create a sense of openness, and draw attention to the important elements of a composition.
In UI/UX design, we use spacing between elements to create a visual hierarchy and to make sure that the user is aware of the important actions to take on the screen.
Neumorphism uses two shadows on every raised element, which can easily add another 10 pixels to the padding around elements (which would then turn into 20 if you’re dealing with two elements next to each other). When you’re trying to fit all the necessary elements on the screen, this lost space can significantly hamper your ability to get everything you need on the page.
Clearly defined rules
Neumorphism is still in its early stages. Should it be more widely adopted, clear consensus will start to build around how elements are used. Designers love a good challenge, and this may prove an opportunity to create a trend that can be used widely. That being said, at the moment there is a lack of consistency in the way designers use neumorphism’s components:
Clickable elements are usually raised, but not all raised elements seem to be clickable. This could lead to a lot of confusion as to what the action items on a page are. Many designs also have multiple clickable items on a page, where some are raised and some are not.
The use of three-dimensional elements sometimes creates more levels than the three main neumorphic plains. When raised elements have sunken parts to them, or even further elevated graphics, the visual distinction between the different depths becomes confusing, both visually and on a user-experience level.
Sunken elements usually convey a selected state, like pressed buttons or slider backgrounds. Sometimes, sunken states are used for non-pressable information as well. Given those elements, text input bars, which are near universally displayed as sunken, don’t feel actionable or inviting. It’s strange to feel like an action you want to take is being displayed as below everything else.
Reception in design circles
Design communities like Dribbble are often more focused on aesthetics than usability. After all, those are the spaces designers use to experiment and get feedback on new concepts. The “shots” designers share on Dribbble aren’t always intended to be implemented and are not usually examined with an eye for UX.
The Dribbble community and a lot of graphic designers seem to be excited about neumorphism. It’s a new challenge and an opportunity for designers to dust off their three-dimensional design skills, which haven’t been as relevant in the last seven years.
No matter how you feel about it as a trend, it’s worth noting that pulling off a good neumorphic design isn’t easy. The talent displayed in the designs is very impressive, and it’s understandable why designers are eager to try their hands at it.
While over 3,000 neumorphic designs have been shared on Dribbble alone, many articles have been written slamming the usability and aesthetic of neumorphism.
Many designs are very appealing and require a lot of talent to pull off, but they’re not realistic as user interfaces, in practice.
Its accessibility issues have been the focus of many critiques, as the UX community is not enthused about implementing designs that will not be usable to all users.
It’s also been pointed out that the satiny aesthetic and the lack of clarity in elements can lead to a confusing hierarchy and bland designs.
Neumorphism has a unique look, but it might not be applicable to just anything.
Can neumorphism catch on?
Users tend to be extremely averse to change of any kind, so completely redesigning a product is only worthwhile if you can make it better in the process.