Getting started with Neumorphism
The term wears many hats: New skeuomorphism / Neumorphism / Soft UI.
Let’s dig into the what, why and how.
What is it?
A new design trend/term, started from a Dribbble shot and has picked up significant steam recently.
It can be seen as a way to achieve “real world” UI elements using combinations of shapes, background colors, shadows and gradients.
By “real world” I mean, for example, a button on a UI that actually looks like a physical real world button.
A little background
It’s predecessor, Skeuomorphism, was a design technique where real world objects were used to create some very famous UI elements.
This helped users to feel comfortable with the UI and understand quickly what that element meant and how it could be used.
The most relatable example could be the Trash can/Recycle Bin icon on Mac or Windows.
Infact, Apple was the lead player in adopting Skeuomorphism principles.
But after a few decades, we started seeing the shift from Skeuomorphism to Flat design.
Again, apple being the lead player in this change.
This was because companies no longer needed to make users feel comfortable with the UI elements. The generation using the computers then was already familiar with what the trash can meant and how to interact with it.
Which gave rise to Flat design, which was simpler, easy on the eyes and more intuitive.
The industry saw the results and quickly adapted to the new design principles.
So why is it?
It can be seen as a revamped version of Skeuomorphism.
To use Skeuomorphism in flat design in very common UI elements like buttons, cards(most importantly, in my opinion), fields(not so importantly, in my opinion) etc to give them a ‘pop’ effect and make them look a little more ‘real’.
How?
We’re using Figma here, but it can be achieved in almost any UI design tool/software.
Principles for simplest Neumorphism:
- Keep the background color and the UI element color same
- One light shadow, for top and left
- One dark shadow, for bottom and right
Follow along the steps:
-
Create your color palette
-
Create your card/element matching the background color
-
Apply the two shadows and shift them to their positions
-
You can see your card/element ‘pop-out’
You can invert the shadow positions and use inner-shadow on the element to create a focused/pressed state.
Keep experimenting with every & any combinations of colors, shadows, gradients and see what fits your design the best.
