Designer's Toolkit: Tastefully Adding Depth To Your Design

Designer’s Toolkit: Tastefully Adding Depth To Your Design

There are certain situations when your design just needs that little something extra. I’m a huge advocate for clean and minimal design, but for when you need to kick it up a notch, I’d like to discuss some simple and tasteful design touches that you can apply. These are just a few solutions out of many.

depth 1

When adding these flourishes, less is definitely more. It takes experience to know when to pull back. I won’t get into the actual steps within Photoshop (or your image editor of choice), since every designer will have their own preferred method.

depth 2

It’s OK to be transparent
Even slight modifications to an element’s opacity can give the illusion of depth. In this case, I’ve dropped the white rectangle to 90% and applied subtle layer masking to fade towards the top. This allows the background elements to show through making the white rectangle more of an object and not just a white container. Also, make sure you’re not affecting the readability.

depth 3

Borders and Boundaries
Obviously, borders help define the edges of an element. They can help emphasize a certain edge and provide subtle hints of depth. In this example, I have an outer white border and an inset blue border. These are both faded towards the bottom.

depth 4

Drop Shadows Not Bombs
When tastefully used, shadows can be used to give an object weight. It adds a bit of faux realism and begins to suggests a light source, creating an environment within your design. Just make sure that you are consistent with shadowing and be careful to not overdo it (read: don’t ever use the default drop shadow layer effect within PS). Shadows should play a supportive role and not detract from the content. In this case, I have a faint shadow behind the entire content area, and I’ve also created a cast shadow that fades out to the right and ends at the top of the darker background color creating a horizon line.

depth 5

Mirror, Mirror on the… floor?
Reflections also add to the creation of an environment within the page. The “wet” look is a bit overdone at the moment, but I think a subtle reflection treatment is just fine in the appropriate context. Again, less is more and this needs to be treated as a supportive decorative element.

depth 6

Real World Examples
Here are just a few of the examples I found while writing this article:    Updated 03/10: Site no longer available
This stylish designer uses an elegant rounded transparent border around his site. This allows for his unique background elements to show through.
Needing no introduction, Apple constantly produces the best examples of tasteful reflections.
The featured products really pop to the front on this corporate site. The cast shadow creates depth and the way it extends into the above image makes it feel like it has some real dimension.

Is there a solution you’ve found that you’d like to share? Post a comment below and let us know.

Related Articles

A person with short hair in a hoodie facing away in a computer chair at a desk with a view through two large windows with the lingering remains of light after a sunset. The desk has a lamp that is off and some papers. The edges of a keyboard and a computer monitor showing past the sides of the person in the chair. Case Studies

5 Key Findings from a Recent Client Usability Study

Introduction Good usability within a website means that the user is able to use the interface to complete her/his tasks quickly and successfully. It is...

Online Marketing

Key Considerations for Investor Relations Websites

Creating an Investor Relations page that grabs the attention of various shareholders and instills confidence in your business is a crucial part of your company’s...

User Experience

Human-Centered Web Design Begins with UX Research

At PINT, one of the first things we do when we start a web design project is determine what kind of design and marketing research...