Example of a gradient effect in Stripe's design
pattern-img-border

Pattern 9: Create Depth

Don’t assume you can’t use depth and lighting effects because of debates over flat design vs skeuomorphism. Adding depth in your design can still be a useful and worthwhile design pattern depending on your goals.


Depth can accomplish a lot within your design, and there are tasteful ways to create depth while ensuring your design is modern and relevant.

Why use depth & lighting effects

Depth can create dominance by visually emphasizing important elements. If only one element has a lighting effect, users are more likely to notice it first.

Via Medium

The clap icon on Medium is the only element with a depth effect, which makes it more visually dominant.

Example of a gradient effect in Stripe's design

Via Stripe

The background gradient on Stripe’s feature page leads your eye towards the graphic.

Depth can make interfaces easier to understand because they mirror the real world. Even if you prefer a “flat” design style and want to avoid hyper-realistic skeuomorphism, some subtle uses of depth can communicate a lot to users.

Example of depth effects in Trello's design

Via Trello

Trello famously uses a card-based interface with subtle shadows and depth effects to reinforce the kanban card metaphor.

Depth effects are one kind of affordance (a signal of interactivity). Gradients and shadows signal interaction states by mirroring the way we manipulate objects in the real world. Again, this is still possible without wading neck-deep into skeuomorphism if you don’t want to. For example, buttons with shadows look clickable:

Example of a shadow effect applied to a button in Google's design

Via Google

Examples of Shadows & Glows

Example of a shadow effect in Google's design

Via Google

The famous Google search box has a subtle shadow to draw attention and encourage users to interact with it.

Example of a shadow effect in Optimizely's design

Via Optimizely

Optimizely uses very soft shadows to draw attention to featured content.

Example of a shadow effect in Intercom's design

Via Intercom

Intercom’s feature page uses shadows to separate foreground elements from the decorative and colorful background.

Examples of Gradients

Gradients are a lighting effect where one color fades into another. Please don’t call it a “color transition”.

Example of a gradient effect in Spotify's design

Via Spotify.me

Example of a gradient effect in Carrd's design

Via Carrd

Avoiding banding

“Banding” happens when a gradient is too gradual or covers a large area and there aren’t enough values between the endpoint colors to make the fade appear smooth, so the gradient appears to be made of stripes.

Banding is becoming more rare as high pixel density screens become more common, but it’s still an issue to watch out for with extremely subtle gradients. (And remember, not everyone is looking at your design on a 5k retina iMac screen.)

While stepped or banded gradients can be an intentional design element, usually banding is an error and looks unprofessional and distracting.

A few methods for avoiding banding:

  • Add a noise pattern on top of the gradient, then reduce the opacity of the noise to 20-30%. The noise will help hide the banding. (For example in Phototoshop: Filter > Noise > Add Noise)
  • Adjust the endpoints of the gradient to more dramatic values, so there are more colors to use in between them. Even if the endpoints aren’t the precise colors in your color scheme, the gradient should match if you just use slightly darker and lighter values.
  • Apply the gradient over a smaller area. You can do this by cropping the element with the gradient applied, or even applying the gradient so that one of the endpoints is at half the available range.

Examples of Perspective

Of course, there are other depth effects beyond shadows and gradients. Another common design pattern is showing depth through perspective.

Example of a perspective effect in Wirecutter's design

2nd Example of a perspective effect in Wirecutter's design

Via The Wirecutter

The Wirecutter uses depth effects such a dog-eared corners of pages and banners that wrap behind other elements to add emphasis to important elements.


Looking for something specific? Email us here to suggest a design pattern.
Written by Jarrod Drysdale.


Share this article:


Objective Creative Design Bootcamp

Learn to succeed as a designer without compromising your creative vision

Objective Creative is a free mini bootcamp to teach you how to get hired as a designer without selling your soul to the devils of commerce.

You'll learn about the hidden factors limiting your success as a designer, how to overcome them, and how to show others the value of your work—without making compromises.

* email required

No spam, ever. Unsubscribe anytime. Privacy Policy.

Or, learn more about the bootcamp