Gestalt Principles

Why it matters

Almost every "the layout feels cluttered" problem is a Gestalt problem. Proximity and common region fix more visual-hierarchy complaints than colour or type ever will.

Key principles

1. Proximity - elements placed close together are perceived as one group. Spacing is your cheapest grouping tool.
2. Similarity - shared colour, shape, or size implies shared function. Do not style unrelated things alike.
3. Common Region - a shared container binds elements more strongly than proximity alone. This is what a card actually does.
4. Continuity - the eye follows lines and curves. Aligned elements read as a sequence.
5. Closure - the mind completes incomplete shapes, which is why partial cards signal scrollable content.
6. Figure/Ground - users separate foreground from background. Ambiguity here creates modal and overlay confusion.
7. Common Fate - elements moving together are perceived as related, the basis of good transition design.

Resources

Foundations, principles, tutorials, community Figma files, icon sets, and templates.

• FoundationPrinciples index
• TutorialNN/g: Gestalt principles in UI design
• TutorialIxDF: Gestalt principles course material