So, it seems as though our newest UI design trend for 2020 is going to be Neumorphism, aka Soft UI. What is it? It means using shadows and highlights to make shapes appear as though they are slightly extruded. It gets it’s name from a term called “skeumorphism.” Skeumorphism is a design style in which the goal is to make something as closely resemble it’s real life counterpart as possible. “Neumorphism” is a play on words, adding the word “new” to the beginning. This design style, I admit is pretty cool. It catches the eye and brings back some almost retro 3D styling to the more modern flat trend. Let me set something straight though: Neumorphism is not a replacement for flat design. Many of us remember the switch between ios6 and ios7. That switch is often used as the prime example between skeumorphic and flat design styles. Neumorphic design, though, proposes a far less drastic shift in design, but rather compliments flat design style. The combinations of these styles looks really nice, and it can really set your designs apart from the hoardes of flat UI’s out there.
When I first started playing with this style, I was experimenting in Photoshop, and created the effect using the bevel/emboss layer style. But, as I wanted to start using it in my UI designs, I ran into a problem. How do I create that beveled look in Adobe XD without layer styling options? Turns out, the answer is pretty simple. I’m going to show you how to create a series of different button and border styles that you can replicate into your own designs! So, let’s get started.
We will start with a blank document. I just used the standard web page artboard size, 1920x1080, and then colored the background a dark blue (#2B3134).
Now we want to create our first button. We can create a rectangle by hitting “R” on the keyboard. Just drag one out, and then resize it to 200 pixels wide by 80 pixels tall.
Now, to create our “soft UI” effect, we need the button to look 3D. How do we do that? Well, we simulate lighting. Imagine setting something on a table. Light casted over the table will “hightlight” one side of the object, and cast a “shadow” on the other side. We can replicate this in XD pretty easily. Let’s first make sure our box has a fill color identical to our background. This will make the button appear as if it’s just an extruded part of the background itself, which is what is popular now with the “soft UI” effect. Keep the rectangle selected.
Now, we will start adding shadows and highlights. To start, let’s add a drop shadow. I used the settings below.
X: 5
Y: 5
Blur: 11
Shadow Opacity: 15%
You should now have an effect like what you see in the image, just a soft shadow off the bottom right of our rectangle button. Now, to finish the effect we need a highlight opposite of the shadow to make it really appear 3D. To do that, hit CMD+C to copy the button, and then paste the button directly on top of itself with CMD+V. Now, on this second copy, we reverse the shadow to the other side by flipping our X and Y settings for the shadow to the negative like so:
X: -5
Y: -5
Blur: 11
Shadow Opacity: 15%
Almost there! But it needs to be a highlight, not a shadow. So let’s change the color of the shadow. I used #717171. This color is just light enough to create the illusion of a highlight without being too bright and looking unnatural. Our button is looking pretty good!
However, in my own experiments, I’ve noticed that the effect is less convincing with the sharp corners. So I prefer to add a little bit of a radius. To compare, go in your layer panel and select both rectangles you used to create the button, and group them. Then, copy that group directly below the first button so that we now have 2. On the second button, adjust both rectangles to have a corner radius of 20.
In my opinion, this corner radius makes the overall effect much more convincing.
Now, with that technique, you can create whatever shapes you’d like and apple these shadows and highlights to create a “soft UI” effect. There’s one other cool effect we can do here, a border. To do this in XD though, we need to use a slightly different technique.
For the first step, create another rectangle the same size as before, 200x80. This time though, we need to turn off the fill color, and leave a 5px border, coloring the border the same as our background. Set the border to “outside”, and then apply a shadow.
Looks pretty good already. The reason behind using an outside border rather than the standard or centered, is because the shadows will overlap one another if we do not use outside. So now that we have our shadow, copy and paste the bordered rectangle again, flip the shadow X and Y, and change the color to our highlight color, #717171.
And there you have it! Experiment with different shapes and using borders around them to create interesting UI elements. Now, one last button type to show you!
We can create a nice little round button with a simulated rounded top, rather than the flat raised top we are seeing on the buttons we already created. To get started, create a circle and apply the same “soft UI” effect we’ve been using on the other buttons.
Now to create our rounded top, it’s just as simple as applying a linear gradient. So, change the fill of the circle on the top to a linear gradient, and line it up with the direction of our other highlights and shadows.
Now, change the colors of each side of the gradient. For the highlight side, use the color picker, and grab the color from the highlight we applied to the shadow, like I did below:
Then, do the same on the shadow side to get the final effect.
And that’s how you create a nice “soft UI” effect in Adobe XD with just a few simple steps! A word of caution though, try not to over use this effect in your UI and other designs, because it can really clutter things up. Play around with this effect and learn how to use, it’s getting popular already and clients may want to see it, and it’ll look great in your profile!
Article Comments