Design trends: Neumorphic design

Shabier Jagoori
2 min readJan 5, 2020

In the early years of the modern user interfaces, we used to have skeuomorphic designs; it was a design mimicking its use case. For example, buttons were glossy, and the trashcan icon resembled deleting, and so on.

PART 2: Neumorphic design: Dark mode

The skeuomorphic design used in iOS 4

After the reign of the skeuomorphic was over, we had minimalistic design; the depth effect from skeuomorphic design disappeared, and we replaced it with a minimal, flat design. The big software companies released their guidelines, such as Google’s material design.

The neumorphism design

Neumorphic design

The neumorphic effect is a combination of the current famous flat UI and the old skeuomorphic principles! The components have a dark box-shadow on the bottom and a light box-shadow on top; the combination of both creates the effect of the elements pushing themselves through your display.

Get creative

You could get creative in your web designs and simulate an actual button push. This effect is achievable by removing the box-shadow on click! Of course, do not forget to add an indicator to signify a button press, add a colored status bar, or fill the entire component.

Neumorphic buttons

Don’t feel pressured to follow the skeuomorphic design guideline of mimicking a use case for each component! If you think it might look nice to have a lot of information catered on a card, go for it.

The information is displayed using a neumorphic effect.

Thank you for making it to the end of this post! Did you like this post? Clap those hands!

PART 2: Neumorphic design: Dark mode

--

--