Depth and Regular Expressions

Jul 5, 2010
Episode 31
Nick shows you how to use depth in web design and Jim gives a crash course in regular expressions. Yikes!

Thanks to those who make Doctype possible!



Creating a sense of depth on a web page may seem like an impossible task. If the screen is flat, how can we make it feel 3D? The trick, is to think in layers.

By building up your page in terms of a background, middle ground, and foreground, you can create a sense of depth.

In color theory, cooler colors appear to recede back in to space, while warmer colors appear to be closer to the viewer. This isn’t a concrete rule, but you might have an easier time creating depth by choosing a dark or cool colored background, and putting your warmer tones in the foreground.

For example, if you look at the home page of Doctype, the warm skin tones jump out when set against the background of blue and gray.


Once you’ve built up your scene with layered elements, you should apply some lighting effects to separate the different 2D planes in space.

Before you start lighting your scene, you need to first consider a few things about the light source.

  • What direction is it coming from?
  • What color is it?
  • How bright is it?

..And so on. Obviously, there are many other factors to consider here, and you could create some very complex lighting effects.

When the light hits different page elements, it should create shadows on the layers below. Additionally, you can add a lot of depth by adding subtle highlights to the borders of page elements or text.

Last, be sure to add some subtle gradations to curved elements, like buttons, to help define their shape.