Neumorphism is very much like Marmite; you either love it or hate it. The concept is so bold, it makes it difficult to be on the fence with. Personally, I hate Marmite but love neumorphic design! I know my screen is flat, but the idea of an inanimate object being represented in its 3d state just works for me, and it looks great too!
The design concept of Neumorphism is firmly rooted with Skeuomorphism - real-world representation - but with a minimalistic twist. Pressable interactions such as buttons are created with shadows and highlighting instead of colours, providing a minimal realistic look; to gain a feel for what is going on, pop over to https://neumorphism.io/#55b9f3 and have a play around. Skeuomorphism isn't dead and still has a place in graphical design, providing a familiar look and feel for the user, here is a perfect example.
Physical compressor, image from kmraudio.com
Skeuomorphic counterpart, image from waves.com
Here to Stay
I believe Neumorphism redefines intuitive UI and is here to stay (at least for a little while). Think about it, the only reason a filled or bordered rectangle with a word in the middle intuitively looks like a button is that we’ve become accustomed to it. Take a look at your keyboard, are your buttons inline with the surface, or can see shadows created by light? Now press any key and see what happens to the shadow around it… point made! With the release of Big Sur, even apple has jumped onboard.
Neumorphism with React Native
This library comes with three components, Shadow, Neomorph, and NeomorphBlur; they don’t support flex, but it has two experimental components that do. It’s easy to use and fairly self-explanatory; install the packages, import the component, and add styles; zero boilerplate! I’ve played with this one and love it! But there is a catch, you can’t use it with Expo as Expo has deprecated react-native art.
If you’re an Expo user and the previous library excited you, it’s time to turn that frown upside down, because here’s one that you can use with Expo. It’s not the most popular library (3 weekly downloads at the time of writing), but if you just want to play with some design concepts, why not!
Well, not much, really. But hey, if you love Neumorphic design, and want to use it in your next project, you could always do it yourself, after all, it’s just styling.
With all this talk of sexy minimal design, we need a ‘here’s one I made earlier’ example to make this article complete. And here’s a calculator using react-native-neomorph-shadows (that I made earlier) - see what I did there!