Dubbed the “UI Trend of 2020”, neumophism and neumorphic design have become a hot topic in the design community over the last few months.
“Neu-what-now?” we hear you say!
Don’t worry, we’re on hand to show you some incredible examples, plus discuss the pros and cons of this design style.
What is neumophic design?
While Skeuomorphic Design mimics real-world objects, and Material Design uses digital shadows and surfaces, neumophic design is said to be halfway in between.
With the trend, buttons and other elements of your website appear to be pushing themselves through your display, creating a clean, “soft plastic” feel.
In contrast to material design, where shapes float above the page, neumophic elements simply extrude from their background.
As you can see from the examples below, neumophism is quite beautiful. It’s a fresh take on minimal design and can make your app or website really stand out from the crowd.
However, there have been some concerns raised to whether neumophic UI is truly accessible.
Why should designers consider accessibility?
The accessibility of your website or application is essential. After all, if it only looks nice, but can’t be used effectively, what is the point in having it at all?
And, accessibility is not only about creating a product that can be used by people with disabilities or those who are sight impaired (although this is a significant factor) – good accessibility improves user experience for everyone.
Your website/app must be able to be used by a wide variety of people, on a wide variety of devices – think small, low-quality screens, bright sunlight, dimmed screens, people using their apps on the go, slow internet speeds – the list of requirements is endless.
So, why are there concerns about neumorphism’s accessibility?
It’s all about the low contrast.
According to the Web Content Accessibility Guidelines (WCAG) 2.1 – the web accessibility bible that you should check out after reading this blog – minimum text to background contrast ratio should be 4.5:1.
With neumorphic style, the background is the same colour as the card/button, so this contrast cannot be achieved.
Of course, there’s some shadowing involved that you could increase the contrast of, but as the example below shows, this may not be enough to make your neumorphic design accessible.
What’s more, once buttons are “pressed” in neumorphic design, some can seem to disappear into the page. Again, not great as they can be overlooked by users. One way to address this could be to use a bold colour for the pressed in button, or a filled icon.
Overall, we appreciate the visual beauty of neumorphic design – it’s exciting and has definitely inspired us as we head into a new decade. Nevertheless, if we were to incorporate this into our work, we’d have to mix it with other design styles to ensure our work is accessible for our audiences.
Have a web or app design project in mind? Get in touch with a member of our team right now to see how we can help you bring it to life.