Glossary/Visual weight

Visual weight

also: visual dominance

Visual weight is how much an element pulls the eye relative to its neighbors, driven by size, contrast, color, and isolation. The heaviest element on a page wins the first fixation — whether or not it carries your message.

Every element competes for attention with a 'weight' the eye computes automatically before any reading happens. A large, high-contrast image outweighs a small grey headline, which is why so many pages accidentally lead the eye to decoration instead of the value proposition.

Designing visual hierarchy is really about assigning weight deliberately: make the one thing that matters heaviest, and dim everything around it. A saliency model exposes the weight the eye actually perceives, which often differs from what the designer intended.

See it on your own page

Free score /100 · no signup · results in seconds