top of page

What is neumorphism and is it here to stay?

A mix of skeuomorphism and flat design, neumorphism has made waves in the design community. But will the trend catch on?

Illustration by Eli Zapa.

Profile picture of Coren Feldman

10.27.2020

8 min read

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.



Neumorphism guidelines


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.



Example of button design in neumorphism trend


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.



Light and shadow in neumorphic button UI



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.



Neumorphic UI design for knob and sliders


Challenges


Accessibility


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.



Brand identity


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.



Spacing


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.



Various UI elements designed in a neumorphic style


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.



Mockup of two screens of an app designed in a neumorphic style


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.


When flat design was introduced, it had a clear visual language and easily intuitable rules. It was a robust and meaningful answer to skeuomorphism that made interfaces simpler, more exciting and more accessible, both to users and designers.


Neumorphism as a trend is more of an aesthetic gimmick. It’s not significantly changing how we interact with digital interfaces; it’s just a new skin. Many designs are very appealing and require a lot of talent to pull off, but they’re not realistic as user interfaces, in practice. The movement as a whole has a lot of hype in the design world, but it doesn’t seem to have enough substance to replace flat design.


Accessibility remains one of the biggest barriers to neumorphism being adopted more widely, and it has yet to be addressed in neumorphic design circles. There have been suggested solutions to make it more accessible, but adding any kind of borders that would make buttons able to pass the WCAG test would also ruin the soft shadow effects that are key to the neumorphic visual style. A comprehensive change to the neumorphic rules would be necessary to make the trend accessible, and in doing so, it would likely lose a lot of the appeal it has today.


Due to its specific visual language, neumorphism might not be a good fit for just any platform, but it could find its home in minimalistic products that can afford to use a lot of space for elements or want to emulate real-world items a little more, like remotes or calculators. It’s possible that there’s a use case for the trend that we’ve yet to think of, where it could have a bigger impact.


The design world is itching to know if and when neumorphism will catch on. It’s been widely discussed and debated for over a year now. The simple truth, though, is that we already have an answer: No company and no product, to date, have adopted neumorphism. Other than a handful of low-quality test apps in the App Store, there are no neumorphic apps or websites.


We need to stop asking, “Will it catch on?” and instead look to see if it is actually catching on. The interest in this design trend is, at least at the moment, confined to design circles. Only when a big company or product implements neumorphism, its viability as a movement will be worth considering.


Finally, flat design has only been widely in use for seven years. It took the better part of a year after iOS 7 for most apps to redesign, and, in the six years following that, it has still been evolving and growing in new and interesting directions. Neumorphism is exciting, fresh and worth experimenting with, but ultimately it will likely remain a thought experiment rather than a design movement.


The ability to look at UI with fresh eyes is rare and neumorphism has given the design world an opportunity to reexamine how we communicate ideas to users. That alone could make this experiment worthwhile. Neumorphism might not catch on, but maybe some of its elements will end up being incorporated in flat design. It could also possibly inspire another trend. All we know is that, right now, flat design is the standard, but we can always iterate and improve on it.

RELATED ARTICLES

Find new ways FWD