Water
Menu
Skip to content

Layering

Layering different elements creates context for each task and helps direct users through the right order of events.

Subtle, but critical

Layers create digital depth, providing the information that shadows, lighting, and perspective offer in the physical world. Those subtle visual cues play a significant role in how we navigate, and digital layers do the same.

Key components

  1. Individual layers: Distinguishing the background from the foreground sets the expectation for when users should interact with which elements, and when they shouldn’t.
Link example
[image needed]
  1. Scale: Scale: The relative size of objects to each other also points to what is in “focus” and what’s not.
Link example
[image needed]
  1. WWhite space: The strategic use of empty space not only affects readability, but also indicates how different types of content and tasks relate to each other.
Link example
[image needed]

[note: I think layering is a good name, but I wonder if it's too clever as this is really about depth which is a concept well known in DS, where as layering can mean other things in adjacent contexts that might cause confusion]