Creating a user interface with depth can seem daunting at first, but it only requires you to understand one fundamental rule — emulating a light source.

Emulating a light source

When emulating a light source, it’s important to keep in mind that, most likely, the light will come from above.

Take for example the door below:

Although you’re observing a flat raster, it’s still evident that the panels on the door are raised.

You’ll notice that each horizontal panel’s top edge is lighter while the bottom edge is darker. This is because the door is angled toward the light source. As a result, the top edge receives more light since it’s angled toward the source while the bottom edge receives less light since it’s angled away from the source.

The only way that the panel’s edges could be oriented as such is if the panel were itself raised, which is exactly how our brains tend to perceive it.

Let’s take a look at another example:

In this example, it’s evident that the four panels are inset.

You’ll notice that there’s a shadow at the top edge, indicating that the top lip is obstructing the path of light. The bottom edge, on the other hand, is lighter since it’s angled toward the light source.

If you want to add a similar sense of depth to your designs, you simply need to mimic the way light behaves in real-world scenarios.

Simulating light in Sketch

As you saw above, there could be two possible profiles i.e. raised and inset.

When you’re trying to replicate this behavior, you first need to decide the desired profile of the target element. You can then easily mimic how light would interact with the element.

Inset elements

Say that you want to design a component that feels like it’s depressed into the page.

Your desired profile would then look something like this:

Pretend that a light source exists and is slightly above the inset profile.

When you look slightly downward, you would only see the bottom lip. Since the bottom lip is facing toward the light source, we can give it a lighter color via a bottom border or inset shadow along with a negative vertical offset.

When you look slightly downward, you barely see the top lip since it would block some of the light. Since the top lip is facing away from the light source, we can give it a darker color via a bottom border or inset shadow along with a positive vertical offset.

Adding the positive vertical offset as opposed to a negative offset will ensure that the shadow doesn’t poke through at the bottom.

You can now apply this technique for whatever you like such as a checkbox or text inputs.

It’s often tempting to see how close you can mimic real-world scenarios, however, don’t get too carried away. Although this is a fun exercise, going overboard almost always leads to interfaces that are busy and/or unclear.

Raised elements

Now, say that you want to design a call-to-action that feels like it’s raised off of the page.

Your desired profile would then look something like this:

Similar to how light behaves, users typically look slightly downward when interacting with their screens.

To achieve the most natural result, you should expose a little bit of the top edge and conceal the bottom edge.

Since the top edge is facing toward the light source, we can give it a lighter color than the face of the button via a top border or an inset shadow along with a negative vertical offset.

I’ve simply picked white as the lighter color for demonstration purposes, but this won’t give you the best results. You’d want to pick the lighter color by hand as opposed to using a semi-transparent white color.

When you look downward, you’ll notice that a raised element will block some light from reaching the bottom edge. To account for this, we can simply add a slightly dark drop shadow with a positive vertical offset.

Do keep in mind that we only want the shadow to appear below the element, hence the positive vertical offset described above.

I would suggest not to get too carried away with the blur radius. A couple of pixels is usually good enough since these kinds of shadows have rather fine edges. Take for example a shadow cast by the bottom of a plate, etc.

Conveying elevation via shadows

When you utilize shadows thoughtfully, you can make it seem that your elements are positioned on the imaginary z-axis, adding elevation to the screen.

For instance, smaller shadows that have a tiny blur radius will make the element appear as if it were only slightly raised. Larger shadows with a higher blur radius will make it seem that the element is closer to the user, and further from the screen.

The reason I mention this is that the closer a call-to-action is to a user, the more likely they are to perform the intended action.

Shadows can have multiple parts

Have you ever observed a gorgeous shadow effect on a website and were unable to recreate it with a single shadow?

Well, you might not have noticed that these sites were probably using multiple shadows instead of the one.

Take for instance the UI below:

At first glance, this doesn’t make a lot of sense. When you see designers combining shadows, they’re not just randomly experimenting with different effects. For these meticulous artists, each shadow serves a particular purpose.

The first shadow in the image above is a larger and softer one, having a sizable blur radius and vertical offset. The purpose of this shadow is to emulate the shadow cast behind it via a direct light source.

The second shadow is a tighter and darker one, having a smaller blur radius and vertical offset. The purpose of this shadow is to emulate the shadowed area underneath the object where ambient light cannot reach easily.

Here, the designer (Peter Miller) has presumed that he wants to mimic a tangible light source. To cast a shadow, some of the light would bounce around behind it and most likely transfer a blue glow onto the surface behind it (assuming that the object is blue on both sides).

Assuming then that the object is blue on both sides, the shadow should probably have a little blue to it as the light bounces around on the backside of it.

As you can see, with multiple shadows, you get a lot more control than with a single shadow.

There are a ton of other ways to account for elevation that this article hasn’t covered. What we’ve covered today should provide a good starting point. My goal was to keep this as concise as possible without sacrificing the nuances that get lost in translation.

A few more ways that you can add depth to your interface is by establishing an elevation system, combining shadows with the interaction, utilizing shades of the same color, and/or using solid shadows. I would recommend incorporating the components I have mentioned above to create more granular and lifelike experiences.

I’m excited to see how you add depth to your designs in Sketch! As always, thanks for reading.