Figure/Ground

Key Points

• •The brain always assigns elements as either "figure" (focus) or "ground" (backdrop)
• •Smaller, enclosed, or higher-contrast elements are perceived as figure
• •Shadows and elevation cues reinforce figure/ground separation
• •Modals, dropdowns, and tooltips rely on figure/ground to appear "above" the page
• •Ambiguous figure/ground creates visual tension and confusion
• •[FIGURE 2.11 — Figure/ground perception] Shows: Ambiguous shapes that can be perceived as either figure or ground depending on focus. Teaches: The brain must assign figure vs ground—when ambiguous, perception alternates between interpretations. Reproduce as: Classic figure/ground illusion with toggle highlighting each interpretation.
• •[FIGURE 2.13 — Closure and figure/ground] Shows: Complex overlapping shapes perceived as simple figures due to closure principle. Teaches: We see complex arrangements as overlapping simple shapes rather than complex single shapes. Reproduce as: Shape decomposition animation.

Guidelines

• ✓Use backdrop overlays (dimming) to push page content to ground when showing modals
• ✓Apply box-shadow or elevation to elements that should appear above their context
• ✓Ensure sufficient contrast between layered elements
• ✗Don't stack more than 2-3 visual layers—depth becomes ambiguous
• ✓Use z-index intentionally and document your elevation scale

Related Topics