Mastering Drop Shadows like a Pro
Just like buttons, shadows are another UI element brought from real life to design. If you grab your phone and open the calculator app, you’ll see how each number is a UI element called a button which is a real-life representation of the buttons that actually calculators have. Shadows, like buttons, is just that, a representation of real-life things.
So now it’s time to understand what a shadow is. According to the dictionary a shadow is a dark area or shape produced by a body coming between rays of light and a surface.
Commonly, we are used to relating a shadow with a completely black and low opacity color, but in real life, shadows are not totally in that way.
What happens if you put a green apple on an orange background and illuminate the object? Of course, we create a shadow, but, have you ever wonder what color the shadow is?
To understand a little bit more what a shadow is, We need to know that the color doesn’t exist, color is just something our brains invented to understand how light and pigments work on surfaces and give shape to our reality, and if you don’t believe me, I dare you to grab an object of one color, a bright object, look at its color and then start giving it less light, and less and less until you can barely see the object, is it still the same color? do you still see the bright color you were watching at the beginning? Of course no, if the object is of a brightness blue, when the light it’s not hitting on it you may see a dark blue, and the less light you give it, the less bright blue that you’ll see it, so we can conclude that the color changed because the light hitting the object changed.
Now that we understand a little bit more about color and light, it’s time to get more deep into drop shadows in UI.
Drop Shadows
Drop Shadow is the name for the UI shadows that are bring from real-life to design. This shadows are generally produced when a shadow is behind an UI element and drops between the UI and the background, this help us to give volume to the design and make users have a feeling of proximity with the components highlighted.
Most of the software used for design, use five basic elements for setting a drop shadow: X, Y, Blur, Opacity, and Color. Some software like Figma and Sketch uses a 6th element: Spread. But in this post, we will only focus on the first five.
What to consider when choosing shadows values
First of all, you need to set which elements you want to highlight. These elements should be focus points to the users, like Call to Action, visual elements, card information, etc. always be careful not to set too many focal points because we don’t want users to get lost and confused with too many highlighted elements.
Once you set your focus points, you need to imagine your source of light, do the light will come from the front or from a lateral side? would it be soft or hard light? will all my elements have the same elevation or I will have some above others? Once we answer all these questions and set how our shadows are going to work, we only need to define our shadow color. For this, I recommend you use the same color as your background but less bright, to have better color and realistic integration. If you are using white or a soft gray as background color, for the shadow you can use the same color as your element but in a super dark tone, and if your background and your element with elevation are in a light color, then you can use a dark gray for the shadow.
Now is time to set our values based on our previous answers, for example:
We are going to have a soft front light source (slightly from the top) and two levels of elevation, Call to Action buttons will be in a higher elevation than Info Cards. The background will be dark blue and shadow color in a darker blue.
Result:
My favorite trick.
When I create shadows, instead of using the default shadow and only set my decisions, I like to create a blur layer, with the same size of the element I want to give a shadow and work with that layer. It gave me a softer shadow and allows me to manipulate the shadow to make it more realistic.
Now we are a little more expert on working with shadows on our designs!
Hope this article serves you as inspiration to use better shadows! And don’t forget to leave your comments and share this post!
