← Files DesignlyARCHIVED FILE

shared/references/gestalt-and-perception.md

2.33 KB · Sep 30, 2026 · 23:14 UTC

↓ Download file

# Gestalt and Visual Perception

Use perceptual grouping to make the design understandable before the viewer reads every detail

## Proximity

Objects close together are read as related

Use proximity as the first grouping tool

Do not place unrelated items close enough to imply a relationship

## Similarity

Repeated color, shape, type treatment, orientation, or texture implies common function or category

Use similarity for secondary consistency

Reserve a meaningful difference for the element that needs emphasis

## Common region

A shared container strongly groups content

Use containers only when the grouping needs more force than spacing and alignment provide

Too many cards and boxes fragment the composition

## Continuity

The eye tends to follow aligned edges, curves, gaze, perspective lines, and directional movement

Use these paths to move attention from hero to message to action

Do not create strong lines that lead out of the frame before the message is understood

## Closure

The viewer can complete incomplete forms when enough evidence exists

Use closure to simplify marks and conceptual shapes

Do not remove so much information that the subject becomes ambiguous

## Figure-ground

Separate subject from environment

Check whether the hero remains obvious when the image is blurred or viewed small

Avoid similar value, texture, and edge density on both hero and background when separation matters

## Focal anomaly

A break in a stable pattern attracts attention

Use one deliberate anomaly for emphasis when helpful

Several anomalies compete and become noise

## Common fate and direction

Elements moving or pointing in the same direction feel related

Use gaze, gesture, product orientation, perspective, and motion cues to reinforce reading order

## Perceptual tests

### Thumbnail test
Reduce the visual to a small size

The primary mass and hierarchy should remain clear

### Squint or blur test
Ignore detail and inspect value masses

The intended focal order should survive

### Grayscale test
Remove hue mentally or with a tool

Important hierarchy should not depend entirely on color

### Silhouette test
Ask whether the hero remains recognizable from outline and major internal features

### Edge test
Scan all four edges for awkward crops, tangencies, and trapped space

These tests diagnose structure; they do not prescribe a style

SHA-256: 5a1baa8cb5e0c2c04617ae197f2fd7137a2f657dbf6d5d47de9dc473a405207e