A Showcase of Depth in Web Design

Just because the screen is flat, doesn’t mean your designs should be. Designers use tricks to add depth to their web designs, here are some of our favorites.

Designers sometimes employ shadows and gradients to give the impression of light hitting the elements of the page. Sometimes overdone and a bit cliché, it can make the flattest 2D images look 3D, regardless of background.

They can also put elements in front of each other; Overlapping grids or photos can give a sense of one thing physically being in front of the other, which suggests a sense of depth. Designers also use ribbons that wrap around other elements to highlight certain elements like headings or calls to actions. The ribbons can look like digital ribbons, with perfect lines, or they can look like real ribbons, floating organicly and wrapping softly around the page. Either way, the simple act of having a ribbon wrap around an object gives the impression of depth.

Finally, designers can go back to their art school roots and use perspective. The basic theory of perspective points and parallel lines and angling towards a vanishing point. The lines in the image will point directly to the vanishing point, whilst the objects will shrink proportionally towards it. This lets the design, even a very cartoony one, trick the eye into seeing a realistic depth in the image.

Here are some great sites that do the job:



Which are your favorites? How do you create depth in your designs?