Neumorphism — Don’t Follow This Trend!

TemplateMonster
4 min readMar 31, 2020

--

Neumorphism — Don’t Follow This Trend by TemplateMonster

Neumorphism, also known as Soft UI, is a trend in UI design that emerged at the beginning of 2020. It uses highlights and shadows to make UI elements appear as if they were floating above the surface. Neumorphism design looks very similar to the ‘bevel and emboss’ effect in Photoshop.

What Is Neumorphism?

Neumorphism landing page by Dylan

Basically, “neumorphism” is the “new” version of the popular “skeuomorphism” design trend, using UI elements that imitate how real-life objects look.

Origins of Neumorphism

One of the first examples of Neumorphism was a concept design posted on Dribbble by Alexander Plyuto. It was instantly picked up by other designers, and since then, the internet was flooded with more neumorphism concepts, tutorials and even products like UI kits and CSS libraries.

Skeuomorph Moblie Banking by Alexander Plyuto

But does this mean you should use neumorphism for a real project? Not quite.

Despite it’s pretty popular at the moment, one of the co-creators of the term neumorphism, Michal Malewicz, believes it’s not going to stay. And gives several reasons why using neumorphism in your website’s interface is NOT a good idea.

  • Neumorphism is not versatile enough to be a popular design style. Especially in real projects.
  • It doesn’t work for buttons because the change of state is not visible enough. Especially for people with visual impairments or lower quality screens / lower screen contrasts.
Fintech x Neumorphism by Hero
  • Cards and sliders are probably the best use-cases of neumorphism. However, there’s a number of conditions for it to work — The structure of the card must be done right, the hierarchies between images, icons and fonts need to be clear and the spacing well defined.
Neumorphism will NOT be a huge trend in 2020 by Michal Malewicz

The best way to test if a card works is by removing that neumorphic background. If it works on it’s own (especially next to other cards) it’s good!

How To Use Neumorphism Right?

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.

  • Make your design accessible
  • Run tests to see what works for your users.
  • Use an approach that lets you easily change your mind

Because Neumorphism is so new, there are a lot of uncertainties around using it. And normally if you build anything that isn’t trivial, odds are you’re going to end up changing your mind

What Types of Projects Will Neumorphism Work For?

✔️ YES for single-page apps and small projects

If you’re building a single page app with a straightforward user interface, that’s not a big deal.

Audiobook App — Neumorphism style by Patryk Szymański

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. Neumorphism is also worth trying if the project you’re working on.

Adidas Neumorphism Landing Page by George Tang

❌ NO for Complex Websites and apps

If you’re still going to use Neumorphism with a complex website, make sure that whatever approach you use is easy to change.Because 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.

Bomcom Apps / Web site design by Mike | Creative Mints

Time will tell if Neumorphism is a temporary trend or it’s here to stay. Sound off in the comment section if you have used or intend to use soft ui in your projects!

If you liked this video — give it a thumbs up.

Subscribe to our YouTube channel for more videos and Elementor tutorials!

See you in the next video.

--

--

TemplateMonster

TemplateMonster — we deliver the best website templates on the Net! Visit https://templatemonster.com