---
type: Design Foundation
title: Gestalt And Composition
description: Composition and Gestalt checks for grouping, visual path, focal point, and layout discipline.
tags: [gestalt, composition, layout, alignment, rhythm]
---

# Purpose

Use this concept when arranging content, creating visual hierarchy, designing graphics, or fixing a page that feels messy.

# Gestalt Checks

- Proximity: related elements are close; unrelated groups are separated.
- Similarity: same semantic role gets same visual treatment.
- Continuity: the eye can follow the intended path.
- Figure/ground: foreground and background separate clearly.
- Closure: simplified marks remain recognizable.
- Common fate: elements that move or change together imply relationship.

# Composition Rules

- One primary focal point per page, screen, or graphic.
- Stable structure before expressive detail.
- Alignment should be intentional.
- Contrast should be strong enough to read as a choice.
- Whitespace is a structure tool, not leftover emptiness.
- Do not stack every emphasis technique on one element.
- Prefer spacing and hierarchy before adding borders or decorative containers.

# Reading Paths

Choose the path that matches the task:

- F pattern for scan-heavy content.
- Z pattern for simple marketing or hero flows.
- Center focus for a single decisive message.
- Modular grid for dashboards and dense product UI.
- Task flow path for forms, onboarding, and setup.

# Done Check

The composition pass is done when focal point, grouping, alignment, and reading path can be named in practical terms.
