Visual Weight

A measure of the force that an element exerts to attract the eye

Why it matters

Every element pulls on the eye with a measurable force — bigger, darker, more saturated, more isolated all pull harder. Hierarchy is just the deliberate distribution of that force: the primary button should out-pull the secondary one, the headline should out-pull the caption. When users miss a critical action, do not ask why they did not look; weigh the screen and find what out-pulled it.

See it

Four ways to pull the eye harder — notice which one you read first, and in what order the rest followed.

Related terms

Affordance
Containment
Eye Tracking
Hierarchy
Line Length

Go deeper in Learn UX

Visual design principles Prototyping & Visual Design

Ask your assistant

Define "Visual Weight" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.