Have you ever taken a moment to notice a sunbeam streaming through a window, seeing how the light changes the colors of objects in the room and casts shadows?
No? I’d venture a guess that most of us are so used to looking at light and shadow that we rarely take the time to think about how they work. But whether or not we’re consciously aware of them, light and shadow are visual cues that we all interact with every day — they give us information about shape, distance, position, texture, and other physical and tactile qualities.
Paying attention to the interplay of light and shadow in real life can give us some great inspiration for making our designs look more life-like. Unless you happen to have a 3D printer in your basement, most of us only have the ability to design in two dimensions. But we’re all used to seeing things in three dimensions, and sometimes that creates a visual disconnect between what we’re used to seeing in everyday life and what we see on paper or on screen. Adding elements of light and shadow into your designs can help bridge that gap, giving your 2D designs a more realistic, almost 3D appearance.
But (and this is a big “but”), if you’ve spent any time on the Internet at all, you’re sure to have noticed that light and shadow effects are easy to overdo. As one designer admitted in his amusing blog post “Confessions of a Drop-Shadow Addict”, in our modern world of instant, click-and-it’s-done design, it’s much too easy to add one effect after another without really thinking about if they’re necessary or beneficial to your design project.
That said, let’s look at a few pros and cons:
Light and shadow can add qualities like depth, dimension, perspective, realism, and visual interest to your designs. This can simultaneously draw viewers into your design and make it seem to pop off the page or screen.
But…it’s easy to get carried away. Overdoing effects is a no-fail way to make an otherwise good design look amateurish and tacky.
To sum up, the secret to using light and shadow in a smart way involves keeping two things in mind: purpose and subtlety. First, make sure any effect you’re using has a specific, practical purpose and makes sense for your project; then, take a “less is more” approach to applying it to your design. If you’re using an effect that came with your design program, the default settings are always more dramatic than realistic (particularly for shadows); don’t rely on them, you’ll likely want to make them softer, lighter, and more subtle.
Before we get into suggestions on how you can integrate light and shadow into your designs, it will help to have a basic understanding of their anatomy. This is something artists and photographers study to create well-lit compositions, but it can also help graphic and web designers create realistic light and shadow effects.
In the diagram above, I’ve pointed out a few key terms. We’ll define them briefly here:
This is a very basic overview that will give you a starting point for using light and shadows correctly. Now — let’s get down to business; on to the design tips you’ve been waiting for:
Color alone can be a great way to create the illusion of lightness or darkness — without resorting to pre-packaged effects. In particular, layering various shades of the same color can create the appearance of depth or distance. That’s because, to our eyes, light colors recede while dark colors advance.
The illustrations below demonstrate this idea perfectly. Notice how the mountains start off darker closer to the foreground, but then lighten and look like they’re off in the misty distance in the background.
There’s also a lot of other great light and color going on here. The color temperatures the designer chose for each panel do a lot to enhance the impression of light and darkness. The subtle gradients in the sky also create the impression of different times of day and types of light (e.g., the warm glow of sunrise versus the cool, white moonlight). Speaking of gradients, on to the next tip…
Turn on a lamp in your house and look at the nearest wall…It’s not all one, flat color, is it? The part of the wall closest the lamp might look lighter or warmer in color, while the farther away you get from the light, the darker it looks. You might think you’re looking at a plain, blue wall — but look closely, and you might see shades of gray, green, blue, or purple. The point is that rarely does light make an object or surface look like one even, unvarying color.
And one way to create that type of dynamic color variation is to add a gradient to a background or other large area in your design. Now, gradients may make you think of a horrible multi-colored background on a 1990s website that makes the text impossible to read — but that’s a gradient gone bad. When done well, gradients can add some subtle color variation (as already mentioned), help soften/fade out shadows, or create the appearance of light shining on a certain area of your design (particularly with radial, or round, gradients).
Below, this radial gradient on a website’s landing page is serving multiple purposes. The lighter part of the gradient makes it look like a light is shining from above, and also makes the shadow the phone is casting more visible. Combined, these effects make the scene here seem true to life — it looks like you could reach out and touch that phone; it has shape and dimension. Also notice how the highlight at the top right corner, along with the shadow, really helps give the phone a 3D appearance.
Light glinting off of something always catches your eye, doesn’t it? In a design, highlights can act like a subtle spotlight, making certain elements a little extra visible — in addition to helping items looks more realistic, as discussed in the previous point. If you want to highlight multiple things in your design, do remember to think about your imaginary light source, and make your highlights consistent.
Check out the simple highlighting on the “801” logo on the product packaging below. It’s really just lines of color that are slightly lighter than the primary color of the numbers, but it gives extra visibility and visual interest to the focal point of the design.
Shading is another term for the shadows on an object, like the core shadow we defined at the top of the article. Shading can give shape and dimension to flat design elements or lettering.
Here, the textured shading on a flat, white typographic logo makes it look layered and complex:
Remember the apple diagram earlier in the article? The cast shadow was the shadow that the apple itself caused by blocking the light, creating a shadow off to the side. Drop shadows are just a particular type of cast shadow where the light source is more or less directly overhead, which casts a shadow behind or underneath an object. This makes the object look like it’s floating above a surface.
From a design standpoint, drop shadows can help items or information “rise” to the top of a layout, making them stand out. They’re also useful for improving the visibility of light-colored design elements, especially text. For example, on this webpage design, drop shadows help make featured content more prominent:
Drop shadows are very common in design projects of all kinds, but also commonly misused. A typical drop shadow faux pas is to make them too large, too dark, and/or too sharp. Using shadows in a design generally shouldn’t make viewers think: “Oh look, there’s a shadow!” Instead, they should blend in seamlessly with the rest of the design.
In real life, shadows aren’t opaque, and light isn’t a flat wash of white or yellow — they’re transparent; it should be the same in your designs. For a subtle, realistic look, opacity and transparency settings are your best friend when applying effects. It’s good practice to start off with a really understated application, and then build it up slightly as needed; this will make it less likely that you’ll accidentally overdo it.
Your typography is a great place to add light and shadow effects, either on or off the letters. Particularly for designs where typography is the focal point, this can really make the words come alive in an eye-catching way.
Take this typographic logo as an example: it uses both highlights and shading on the letters that fade in and out (gradients) to create a chiseled, 3D look. There’s also a nice drop shadow below. (Notice the consistent use of an imaginary light source coming from the upper left hand side: the main highlights fall on the top and left sides of the letters, and the drop shadow points down and right, away from the light, as it should). Some subtle textures pull everything together.
Your fonts are one place where you can really get creative with shadow styles. They’re easy to apply for the most part (some fonts even come with a shadow style built in) and can give your typography a custom look. Let’s look at two more options:
1) Raised: Embossing is a printing technique that physically raises a design feature (usually text) above the paper’s (or other material’s) surface. This is usually done with a metal stamp of some kind. You can copy that effect digitally with some well-placed shadows (outside the boundaries of the letter shapes) and highlights (on the letters themselves).
2) Recessed: People use a variety of words to describe text that is engraved or pressed into a surface. Letterpress in a common one — it’s a printing technique that uses metal plates to press a design (either with or without ink) into soft, thick paper — but the word is also frequently applied to digital effects that replicate that look. For example, this logo design:
The shadows and highlights are placed in opposite positions as an embossed look: the shadows are inside the letters, and the highlights outside, marking where the surface is pressed down.
Flat design has turned into a trend that has staying power: from Apple’s transition to a flat mobile design to Google’s new flat logo, it seems here to stay, for a while at least. One of the defining characteristics of flat design is its lack of depth, which generally means you won’t be seeing many shadows or highlights. But what if you want to keep flat design’s minimalism while adding some dynamic lighting or shadows? Designers have been tweaking the trend to allow for that; here are a couple common approaches:
This 404 page design layers lighter and darker colors to create the appearance of depth (a technique we discussed in point #1).
For web design, how users interact with the site is naturally an important consideration. The user interface (or UI) should be easy to use and understand, and knowing what you can and can’t click on is a big part of that. That’s where shadows and highlights can be useful, especially when designing buttons.
Notice how the buttons below use a combination of many of the features we’ve discussed throughout the article — gradients, highlights, shading, shadows — to create shape and dimension. The highlights especially do a good job here; on the left button, the thin highlight on the edge makes it look like the button rises slightly above the surface (it’s pressable), and the rounded highlight on the top half gives it a convex shape. The left button uses an inner shadow technique to make it appear pressed down.
These types of design choices may be small and subtle, but they subconsciously help viewers interact with your design.
Light and shadow effects generally do the most for your design when they’re applied carefully and strategically, not randomly or just for the sake of adding extra “bells and whistles” to your project. Nate Eagle offers some good advice in his article on drop shadows and gradients:
“Use spacing, placement and color to make the design effective before adding the final layer of polish. If you focus on making your designs work without these tricks, you may find that you don’t need them as often, and that they are more effective when you do use them.”
Now, go experiment with some of these techniques for your own projects — happy designing!