Key insights
- Closure — the eye completes incomplete shapes, so icons and outlines still read even with gaps; you don't need every line drawn for a shape to register.
- Similarity — elements sharing a property (color, shape, size) read as one group; recoloring rows instantly splits a flat grid into Navigation, Content, and Actions.
- Continuity — the eye follows the smoothest path, so aligning items on a shared axis lets it flow, while scattered placement forces it to jump around erratically.
- Figure-Ground — blurring and dimming the background pushes a modal forward as the focal 'figure', which is what makes a dialog feel deliberate instead of floating.
- Common Region — a shared border or container groups elements even when they sit far apart; wrapping settings in cards signals belonging without moving them closer.
- These laws are pre-attentive: the brain groups and completes automatically, so working with them makes a layout feel instantly organized rather than busy.
Do / Don't
- Do: Give related items a shared property — color, shape, or size — so they read as one group at a glance.
- Do: Align related controls on a common axis so the eye flows down a single clean path.
- Do: Wrap loosely-placed elements in a bordered card when proximity alone can't group them.
- Don't: Scatter navigation or list items at varied angles and positions — the eye jumps and nothing reads as connected.
- Don't: Lean on a modal alone without dimming what's behind it; it competes with the background instead of standing out.
