<?xml version="1.0" encoding="utf-8"?>

Simulate depth in 2D designs

Simulate depth in 2D designs Bad Practice
Simulate depth in 2D designs Best Practice

Adding depth to your design makes them look more realistic, vibrant, or even old-school. 3D design can be intimidating, but the good news is that you can simulate depth in 2D designs.

In the example, the use of shadows makes the buttons look elevated, while the title and subtitle look embedded into the screen.

Other ways of creating depth in 2D designs include:

  • overlapping elements
  • adding transparency (farther objects seem more opaque)
  • manipulating size and scale
  • playing with line thickness variation (the thicker the weight of the lines the closer the object seems)
  • and adjusting the perspective[1]
Improve your UX & Product skills with interactive courses that actually work