Preface

As a film student, I was quickly taught the laws of lighting as well as common techniques — three point lighting, reverse key lighting, bookcase lighting, so on and so forth. I was also taught that the goal of lighting a subject was often to create as much depth in the image as possible. This is why almost every movie lights half of their subject’s face while often shooting the shadow side : this is known as reverse key lighting, and contributes to what people like to call the “cinematic look”.

However, the last thing I expected to take away from learning all those technical physical details was that they would influence the way I perceive my flat 2D creations. Here, I want to dive into how adding light and depth — mainly through gradients and strokes — has helped elevate my basic designs to multidimensional interfaces.

---

Breaking down the basics

Here’s a simple button, we’ll call him Luke for the sake of simplicity. Luke has a bright orange background, rounded corners, as well as text in a desaturated, lighter shade of the background colour. And although Luke is a very nice and simple button, he’s unfortunately unlit. This trend of design often named “flat”, although it was very popular in recent year thanks to its simplicity and minimalism, can definitely use some enhancements nowadays. Let’s have a look at various techniques that could help us make Luke prettier.

Utilising Strokes

Utilising strokes is one of the easiest ways to add depth to designs. In the real physical world, a light ‘bordering’ a subject, highlighting its silhouette, would be referred to as a “rim-lighting”. It’s quite a common lighting technique amongst cinematographers to lift their subject from the background and draw attention to it.

Strokes have been used for ages in various interfaces and contexts, and I now feel dumb for not noticing them sooner. As soon as you notice one, you notice them all ! Popular examples include plenty of macOS elements such as its window tiles and dock, as well as the newly redesigned components from Windows 11.

The effect of strokes is especially apparent in dark-themed interfaces, as this highlights your app’s components. Let’s have a look at a very simple confirmation UI I’m working on. Right now, I’ve got the basics elements down, but it feels a bit flat to me, and I know I can make this simple component more readable.

Therefore, I've gone ahead and added a bit of spice : A nice stroke surrounding the main container and the action buttons, as well as a bold red to emphasize the importance of the action being taken.

A nice side effect of adding rim-lighting to our containers is helped by colour relativity : whether a colour can be considered dark or light isn't determined solely by itself, but rather how it compares to others around it. This makes our body text appear whiter, creating more contrast overall.

The secret to strokes is making them very thin, as real light spills very lightly when wrapping around a subject.

Utilising Gradients

Gradients are another tool that, if used correctly, can be extremely powerful. In order to use them properly, it’s important to understand that we, as humans, often see light as a 45° beam coming from above.

This tells us two things :

1. The lightest part of our element should almost always be at the top.
2. Consequently, shadows should consistently face downwards, always on the opposite side of the light.

The best tip for creating new gradient shades is : “The lighter, the less saturated, and the darker, the more saturated”. When working in Figma, use the “HSB” — “Hue, Saturation, Brightness” — colour input instead of the “Hex” one.

If you want to be able to change the colour of your component afterwards, you can use a fully opaque to completely transparent white gradient set to the “Plus Lighter” blend mode on 20% opacity, and vice versa for the darker side.

These two simple gradients mimic the behaviour of light on a slightly curved surface, which adds depth to our component and instantly makes it stand out. It makes for an ideal Call to Action, and a strong building block to a solid button hierarchy !

Utilising Shadows

Shadows are also one of the most straightforward ways to add separation, and is one of the longest-established element in interface design. They’re especially useful on hovers to act like the element is “lifting” from the screen, or to add contrast between two potentially clashing elements.

Here, the shadow on our header and text ensures it maintains a proper contrast for readability, regardless of the background content.

---

Putting Everything Together

With everything we’ve learned, we can now make Luke the prettiest button ever. I’ve added a darker stroke around him, as well as a subtle inner shadow on the text to make it look slightly embossed. I’ve also created a hover state, where I made it look like the light shone on him increased, by adjusting both of our gradients’ opacity by 7%, making the text whiter, and adding a soft drop shadow for that added glow !

---

Final thoughts

Simulating light through our designs allow us to understand the physical shapes of our elements on a 2D screen, allowing us to elevate the visual harmony of our designs, and ultimately resulting in more visually appealing interfaces.

Great designers understand the behaviour of light on different types of surfaces and how to utilise it in their designs. However, we should always remember that functionality should always be a priority, and form should never dictate function !