Balance
Distributing visual weight so a composition feels stable, whether or not it is symmetrical.
Definition
Balance is the perceived equilibrium of a composition. Symmetrical balance mirrors weight across an axis; asymmetrical balance offsets a large quiet area against a smaller dense one.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Composing marketing and editorial pages.
- Reviewing a layout that feels lopsided.
Common mistakes
- Forcing symmetry on content of unequal weight.
- Ignoring how weight redistributes at other breakpoints.
- Filling space because it is empty, which adds weight without adding meaning.
What carries visual weight
- Size, most obviously.
- Contrast against the background, which is why a small dark element can balance a large pale one.
- Colour saturation.
- Density of detail, so a dense paragraph outweighs a sparse one of the same area.
- Isolation, since a lone element in whitespace carries more weight than its size suggests.
Symmetry is calm, asymmetry is dynamic
Symmetrical layouts read as formal and stable, which suits documents, confirmations and content pages. Asymmetric layouts read as active and are better for marketing and editorial surfaces where direction and movement help.
Product interfaces are usually asymmetric by necessity, because navigation, content and inspectors have different weights. The goal there is not symmetry but stability: no region should feel like it is about to fall off the screen.
Distributing weight
Do
- Count weight by area multiplied by contrast, not by element count.
- Give a heavy element room, so it reads as deliberate rather than crowded.
- Let asymmetry carry hierarchy, with the heavier side holding the more important content.
Do not
- Centre everything to avoid deciding what matters.
- Balance a page by adding decoration to the lighter side.
- Assume a symmetrical grid produces a balanced page. Content weight is what decides.
In practice
- i.
Three-column application shell
Product UIA narrow navigation rail, a wide content area and a medium inspector are unequal by design. Balance comes from consistent gutters and from the content area carrying the visual weight.
- ii.
The empty right column
Weight, not widthA two-column layout with a dense table on the left and three short links on the right is balanced by grid and unbalanced by eye. Narrowing the right column was what made it settle.
Local chart
FND·011 · Region II · Grid D1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Art and Visual Perception
R. Arnheim, University of California Press, 1954
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Related concept
Connected closely enough to change how you apply this.
- CompositionFND·014 · UI foundation
- GridsFND·039 · UI foundation
- ProportionFND·013 · UI foundation
- Responsive LayoutFND·043 · UI foundation
- ScaleFND·012 · UI foundation
- Visual HierarchyFND·001 · UI foundation
- WhitespaceFND·015 · UI foundation