Proximity
Elements placed near each other are perceived as a group. The closer items are, the stronger the grouping. This is one of the most powerful and commonly violated Gestalt principles — unrelated items sitting close together mislead the eye.
These are the design principles and concepts referenced in Gestalt Or Not feedback. Each term links back here when it appears in a review, so you can learn as you go.
Gestalt Principles
Similarity
Elements that share visual characteristics — shape, color, size, or texture — are perceived as related. Similarity works alongside proximity: grouped items that also look alike form an even stronger association.
Continuity
The eye follows smooth paths, lines, and curves in preference to abrupt changes in direction. Elements arranged along a line or curve are perceived as more related than elements not on the path. This is why navigation bars and timelines work.
Closure
The mind fills in missing visual information to perceive a complete shape. You don't need to draw every line — the brain will close the gaps. This is why icons can be simplified, and why dashed borders still read as contained regions.
Figure-Ground
The eye naturally separates shapes (figures) from their background (ground). When this relationship is ambiguous, users struggle to parse the interface. Good design makes it obvious what's content and what's background through contrast, elevation, or framing.
Common Region
Elements enclosed within the same boundary are perceived as a group, even if they otherwise differ. Cards, panels, and bordered sections all leverage common region to visually organize content.
Common Fate
Elements that move or change together are perceived as related. In interfaces, this applies to animations, scrolling behavior, and synchronized state changes. If two elements respond to the same action, users treat them as a unit.
Visual Design
Visual Hierarchy
The arrangement of elements to guide the eye through content in order of importance. Size, color, contrast, spacing, and position all contribute. Without clear hierarchy, users scan randomly and miss what matters.
Contrast
The degree of difference between elements. High contrast draws attention and creates clarity. Low contrast suggests secondary importance. Contrast operates across multiple dimensions: color, size, weight, shape, and spacing.
Alignment
Placing elements so their edges or centers line up along a common axis. Alignment creates order, reduces cognitive load, and makes relationships between elements visible. Even small misalignments feel "off" to users.
Repetition
Reusing visual elements — colors, shapes, fonts, spacing patterns — to create consistency and strengthen unity across a design. Repetition makes interfaces learnable: once you understand one card, you understand them all.
Whitespace
The empty space between and around elements. Whitespace isn't wasted space — it provides breathing room, improves readability, creates groupings through proximity, and signals importance. Crowded layouts overwhelm; generous spacing communicates confidence.
Balance
The distribution of visual weight across a composition. Symmetrical balance feels stable and formal. Asymmetrical balance feels dynamic but requires careful counterweighting. An unbalanced layout feels like it might topple.
Emphasis
Making one element stand out from the rest to draw attention. Emphasis is created through contrast in size, color, weight, or position. Every screen should have a clear focal point — if everything is emphasized, nothing is.
Scale
The relative size of elements compared to each other and their context. Scale establishes hierarchy — larger elements claim more importance. Dramatic scale differences create visual interest; subtle ones confuse rather than communicate.
Color Theory
The principles governing effective use of color in design. This includes color harmony (complementary, analogous, triadic), color psychology (red = urgency, blue = trust), and functional color (red for errors, green for success). Consistent color usage builds meaning over time.
Typography
The art of arranging type for readability, hierarchy, and visual appeal. Good typography uses a limited type scale, maintains consistent line heights, and ensures adequate contrast between text and background. Type choices convey personality — a serif font says something different than a geometric sans.
Interaction & UX
Affordance
Visual cues that suggest how an element can be used. A raised button affords pressing. An underlined word affords clicking. When affordances are missing, users don't know what's interactive. When they're false (a non-clickable thing that looks clickable), users get frustrated.
Feedback
A response from the system that confirms a user's action was received and shows its result. Button press states, loading spinners, success messages, and error alerts are all forms of feedback. Without it, users click again, wonder if anything happened, and lose trust.
Mapping
The relationship between a control and its effect. Good mapping is intuitive — a slider moves left to reduce, right to increase. Bad mapping requires memorization or documentation. The closer the control is to the thing it affects, the clearer the mapping.
Constraint
Limiting the range of possible actions to prevent errors. Greyed-out buttons, disabled fields, date pickers that prevent invalid dates, and character limits are all constraints. Good constraints are invisible — they guide users toward valid choices without feeling restrictive.
Progressive Disclosure
Revealing information and options gradually, showing only what's needed at each step. This reduces cognitive overload by keeping the interface simple for common tasks while still making advanced features accessible. Accordion menus, "Show more" links, and multi-step wizards all use progressive disclosure.
Fitts's Law
The time to reach a target is a function of its size and distance. Larger, closer targets are faster to click. This is why primary buttons should be big, why nav items benefit from generous padding, and why placing destructive actions far from common targets reduces accidental clicks.
Hick's Law
Decision time increases logarithmically with the number of choices. More options mean slower decisions. This is why mega-menus overwhelm, why curated defaults outperform long lists, and why breaking a 20-option form into steps reduces abandonment.
Layout
Grid System
A structure of vertical columns and horizontal rows used to organize content consistently. Grids create alignment, rhythm, and predictability. They don't have to be visible — their power is in the invisible order they impose on a layout.
Responsive Design
Design that adapts gracefully to different screen sizes and devices. Not just "make it smaller" — responsive design rethinks layout, typography scale, touch targets, and content priority for each breakpoint. What works on desktop may need a completely different approach on mobile.
Visual Weight
The perceived heaviness or lightness of an element based on its size, color, density, and texture. Dark, large, dense elements feel heavy. Light, small, sparse elements feel airy. Visual weight determines where the eye lands first and how balanced a layout feels.
Rhythm
The repetition of elements at regular intervals to create a sense of organized movement. Consistent spacing, repeated components, and predictable patterns all establish rhythm. Like music, visual rhythm can be regular (steady) or syncopated (varied but intentional).
Unity
The sense that all elements in a composition belong together as a coherent whole. Unity comes from consistent use of color, typography, spacing, and style. A design with strong unity feels intentional and professional; a design lacking unity feels like parts from different kits assembled randomly.
Readability
Readability
How easily text content can be read and understood. Readability depends on font choice, size, line height, line length, contrast with background, and paragraph spacing. Long lines (over ~75 characters) are hard to track; short line heights make text feel cramped; low contrast strains the eyes.
Composition & Information Design
Composition
The overall arrangement of elements within a frame. Composition determines how the viewer's eye enters, moves through, and exits a piece. Strong composition feels intentional and balanced even when asymmetric. Weak composition feels like elements were placed without considering the whole.
Data-Ink Ratio
Edward Tufte's principle: maximize the share of ink devoted to actual data, and minimize everything else — decorative borders, grid lines, redundant labels, 3D effects. A high data-ink ratio means every mark on the page earns its place. Chartjunk (gratuitous decoration) actively interferes with comprehension.