| 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
