Sickdesigner

You know how, often times, clients demand that your design needs to pop more? Well, welcome to part 4 of our 5 part miniseries jam packed with easy to follow tips and tricks. In this episode we’ll be covering the basics for: Depth.

Depth

Depth is just a short word for what I like to call Hierarchical Content Layering.  This is one of the most important aspects of web design simply because it’s so damn powerful. Depth is a play on the human eye, really, and the way that our eyes and brain understand the world around us.  Our eyes, naturally, focus on planes of interest, while consciously ignoring the rest of what we see.

Try a little experiment: look at something colorful, like flowers; then move your head about 45 degrees to the side and, without moving your eyes, try to notice the color of the object you were previously focusing on. It looks gray, right?

We can use this feature (or bug?) of the human eye to our advantage, in design. By creating planes of focus we can build a nice pyramid of interest in which the design supports the content, rather than the other way around.

Depth isn’t just something we can employ to create Hierarchical Content Layering, but also to provide a more natural atmosphere to the design. So, what are the major ways to add depth to your designs?

1. Blur
2. Scale
3. Shadow

Now let’s break them down and see how to use these three major techniques to bring some depth to your design!

Tip 1: a blurry background will automagically bring content to the center stage; the reason for this is simple: HTML text is naturally sharp and, by contrasting the background with the text, you’re forcing the user to focus on the sharp stuff, rather than the blurry background. If I make it sound like a sneaky move, that’s because it is. But in a good way!

Tip 2: Stuff that’s bigger is more important, more in focus than things that are smaller. Yes, it’s that obvious and that simple. But, as it’s often the case, it’s these seemingly obvious things that get missed.

Tip 3: Shadows follow the same rule as scale, with the addition that shadows need to bend and warp relative to your light source. If you haven’t already, read part 2 of this miniseries in which Liviu talks about Lights & Shadows and how to add them to your design popping arsenal.

Let’s look at a few examples of how to properly implement Depth into your designs.

01

HDQT makes extensive use of both blur and perspective scale to put the front content literally center stage!

02

Speaking of scale, Jeff Everson makes use of this in the background to make the header really pop out of the design.

03

Amp Your Biz has a very subtly implemented depth: it’s based on the large shadow cast by the header block and by the two-tone background. This really brings out the text and headings making it a very clear and convincing design. Very effective!

I hope you enjoyed this short dive in the mysteriously dangerous deep woods of Depth itself. I know, I said no more puns…I lied. Anyway guys & gals, I’ll see you next time for the final episode of the miniseries. It’s going to be typo-tastic!

by Radu Chelariu