Neumorphism/Soft UI Design Trend: Is it Usable in the Real World?

One of the biggest design trends we have seen emerge throughout 2020 for UI design has been Neumorphism, AKA Soft UI. If you search for inspiration on sites like Dribbble or Behance for app and website designs, Soft UI designs are a dime a dozen. But is Soft UI really usable in the real world? First let’s talk about what it is, and what that has to do with it’s usability.

What is Neumorphism?

Neumorphism is a design sstyle in which certain elements use shadows and highlighhts to appear as if they are 3D, almost molded from the background. It strikes a nice balance between skeumorphic designs of the past and the flat and minimal style we see now.

It’s a cool effect for use on a screen where we’ve become accustomed to seeing things in a 2D environment. The uniqueness of the style has lent to it’s huge popularity in 2020 and huge numbers of designers are posting designs in their portfolio featuring it. While it looks fantastic in a portfolio, the fact that it relies entirely on subtle details to present itself poses a challenge for it’s usability in the real world, though it can be done.

Accessibility

Something far too often overlooked in design is accessibility. A designer can make something look really cool, but that doesn’t mean that everyone sees it the same way. We have a variety of people accessing the internet everyday, some of whom have poor eyesight and struggle to see minor details, and others who have color blindness and only see certain colors or misinterpret them. This presents a significant challenge to Neumorphism due to the subtle nature of the effect.

The shadows and highlights that you notice create the effect are minor details. Some people may not be able to see those details at all. The reason this is an issue is if an element uses a neumorphic style to stand out on the interface, some people may totally miss it. The element may just simply, disappear. To counteract that, here are some things to think about:

1. Buttons should use outlines or strongly contrasting text to remain visible to users even if they cannot see the shadows and highlights of a neumorphic element.
2. Never make icons neumorphic. A “play” icon make look great in a neumorphic style, but if it is not a contrasting color to it’s background or outlined somehow, some people may not be able to see it at all, rendering it useless.
3. Be sure to use the effect sparingly. Try to limit its use to non-critical elements.

Clutter

If there was ever a design method that emphasized the need for the KISS method (Keep it simple, stupid), it’s Neumorphism. An overload of Neumorphic elements can make a page look way too busy. Because the shadows and highlights extend away from the element, it has a tendency to be destructive to negative space, which is critical in UI and UX design. Also, Neumorphic elements too close together start to look cheesy, and the effect might be totally wrecked if the shadows/highlights of different elements overlap each other, as seen on the left in the image below. So, beware of using a large number of Neumorphic elements. If you’re not careful, you’ll either overly clutter the page, or destroy the effect altogether.

Development

Another consideration to make is the ability to build the effect with code. CSS is, to an extent, limited in scope for what it can achieve. I’ve played around with it a bit to achieve this in code, and it’s possible. At first I didn’t think it would be, but, it turns out you can layer box shadows in CSS to apply more than one to a single element, thus creating this Neumorphic effect. It’s so great that this is possible, because otherwise you would need to make a duplicate of the element, and give it it’s own box shadow. This would mean that any Neumorphic element would actually be 2, increasing rendering overhead for the browser. Thankfully, that’s not necessary. Here’s a screenshot of what the code looks like using Styled Components, however this method can be used for vanilla CSS as well.

Where it gets tricky, is producing the Neumorphic elements that have a cut out. It’s not something I would recommend using in a real product anyway, due to it’s low usability, but in code it’s even more difficult. To accomplish this, you would need to use svg code, make a duplicate of the element, and use booleans to cut that shape out of the other, then apply your box shadow. Yeah, it’s a lot and not necessarily worth the difficulty for something that isn’t going to add any functionality and very little aesthetic value.

Sorry for the technical ramblings, which you probably don’t care about. Here’s the TL;DR: Consider what impact using this effect will have on the development process. You don’t want it to slow things down if it’s too complex or your trying to use advanced versions of it.

In Conclusion

Neumorphism is usable in the real world. But to what extent? It depends entirely on how you use it. Just keep in mind that everything you do on your site has an impact on it’s usability and accessibility, and those things in turn have an impact on your sales, and even your SEO performance. If you’re looking for something really unique to do with your website or app, it’s always best to hire an agency that has experience in blending these unique styles and effects with tried and true methods for keeping the user experience solid. Doing that will ensure strong performance and visual impact that will bring your clients and users back time and time again, and that is exactly what JL Tech is here to do.