← Files DesignlyARCHIVED FILE
shared/references/gestalt-and-perception.md
2.33 KB · Sep 30, 2026 · 23:14 UTC
# 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