Depth establishes hierarchy, signals interactivity, and guides focus through the interface.
Hierarchy
Depth can effectively establish visual hierarchy. The higher an element sits in the Z scale, the more important it seems, helping people understand the importance of different elements and guiding navigation.
Do
Use depth tactically to differentiate between primary and secondary elements.
Don’t
Overuse depth — too many elements pulling attention leads to a cluttered, confusing interface.
Do
Keep child elements within their parent containers to maintain a cohesive perception of depth.
Don’t
Let elements protrude outside their parent containers, disrupting the natural perception of hierarchy.
Interactivity
Depth indicates interactivity. Interactive elements, like buttons or cards, get more depth to signal that people can interact with them.
Do
Use depth to indicate interactive elements so it’s obvious what can be interacted with.
Don’t
Give static elements unnecessary depth, which misleads people into thinking they’re interactive.
Do
Apply intuitive depth changes on interaction, like pushing a button down, for tactile feedback.
Don’t
Apply unexpected depth changes that cause disorientation.
Focus
Depth helps guide focus. Giving more depth to an element draws attention toward it.
Do
Use depth to highlight actions and overlays so people see them first.
Don’t
Rely solely on depth to create focus — not everyone perceives depth the same way, so combine techniques for accessibility.