gestalt-web-design

license	Apache-2.0
name	gestalt-web-design
description	Applies Gestalt psychology principles to web layout, spacing, grouping, and visual hierarchy. Proximity, similarity, closure, continuity, figure-ground, common fate, Pragnanz — translated into CSS, component structure, and information architecture. Activate on 'gestalt', 'visual grouping', 'proximity spacing', 'visual hierarchy', 'perceptual organization', 'layout psychology', 'whitespace strategy'. NOT for color theory (use color-theory-palette-harmony-expert), not for accessibility auditing (use design-accessibility-auditor).
allowed-tools	Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata	{"category":"Design & UX","tags":["gestalt","visual-hierarchy","layout","spacing","perception","ux-psychology","grouping"],"pairs-with":[{"skill":"ux-friction-analyzer","reason":"Gestalt violations are a primary source of UX friction"},{"skill":"human-centered-design-fundamentals","reason":"Gestalt is the perceptual backbone of human-centered design"},{"skill":"web-design-expert","reason":"Gestalt principles inform every layout and spacing decision"}]}
category	Design & Creative
tags	["gestalt","web-design","perception","visual-principles","ux"]

Gestalt Web Design

Applies Gestalt psychology principles to create interfaces that feel "obvious" to users by aligning with hardwired patterns of human visual processing.

Decision Points

When Proximity and Similarity Conflict

IF elements are functionally related BUT visually different:
  └── Apply proximity first (group with spacing)
  └── Then break similarity deliberately (e.g., accent color on primary CTA)
  └── Use 3:1 spacing ratio minimum between groups

IF elements look similar BUT serve different functions:
  └── Increase visual difference (color, size, or shape)
  └── Maintain proximity grouping for actual relationships
  └── Test: can user distinguish purpose at 3-second glance?

IF user needs to scan many similar items:
  └── Perfect similarity for easy scanning
  └── Break similarity only for critical state changes (error, selected)
  └── Use consistent spacing grid throughout

Spacing Hierarchy Conflicts

IF content requires more than 4 spacing levels:
  └── Audit for over-segmentation
  └── Combine related groups using similarity instead
  └── Reserve spacing jumps for major semantic boundaries

IF equal spacing is creating false groups:
  └── Implement 2:1 minimum ratio between spacing levels
  └── Map spacing to information architecture
  └── Test grouping perception with 5-second exposure

Figure-Ground Ambiguity

IF multiple elements compete for attention:
  └── Apply elevation hierarchy (ground/surface/raised/overlay)
  └── Dim background elements using opacity/desaturation
  └── Ensure only ONE primary figure per screen area

IF modal/overlay feels weak:
  └── Darken backdrop to 50-70% opacity
  └── Add substantial shadow to modal container
  └── Remove competing elements from z-index stack

Failure Modes

Schema Bloat

Symptoms: Users report "too busy" or "overwhelming" despite minimal content Diagnosis: Too many visual groups breaking proximity law Fix: Consolidate related items using tighter spacing, remove unnecessary dividers, establish 3-tier spacing system maximum

Invisible Boundaries

Symptoms: Users click wrong targets, miss related controls, confused navigation flow Diagnosis: Insufficient proximity differentiation between groups Fix: Increase inter-group spacing to 2.5x+ intra-group spacing, audit click heatmaps for misdirected interactions

False Similarity

Symptoms: Users expect identical behavior from visually similar elements that function differently
Diagnosis: Inconsistent visual treatment for different interaction types Fix: Create distinct visual categories for each interaction pattern, audit all buttons/links for consistent styling within function type