Soft UI Design (Neumorphism)

One of my favorite UI 2020 trends is Neumorphism. Neumorphism is actually a modern iteration of a style of designing web elements, frames, screens also know as Skeuomorphism.

In the last few days, I watched so many videos and read articles about neumorphism design so I decided to create something myself.

Here are the final results:

The most important thing when creating neumorphistic elements are the masters. Once you have them well designed, then you can create different shapes, buttons and other UI elements from it’s instances (while staying consistent when it comes to shadow, blur etc. )

I’ve started by creating an artboard in AdobeXD canvas. First, I created a square shape (w100px; h100px). I got rid of the border and selected the fill color the same color as the background of my artboard. I’ve used black color (hex #000000) for shadow, and set the opacity to 100%. The X, Y, and B of the shadow you can set it up as you like and change them later if that doesn’t work. For this case, I set it up this way : X6, Y6, B10.

Next step was to duplicate the square, separate them and change the shadow of my second square to X-6, Y-6 (minus 6). I also changed the shadow color to white (hex #FFFFFF). After that, I put these two squares together (on top of each other.) For my dark shadow square, I changed the opacity to 20%, and for the light square, I changed it to 80%.

Lastly, I selected both squares and made a component. When having a component, I duplicated it, and created a rounded, and pill shape just by selecting it and adjusting the radius. If I wanted to make some changes to all of my components (shadows, opacity, colors) I would just select a master component, change it how I like and all of my components would be changed the same way.

I deeply enjoyed creating the neumorphistic elements and soon planning to create a mini-project with this soft UI. Looking forward to it! :)