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 page
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.
In practice
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.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
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.
- CompositionUI foundation
- GridsUI foundation
- ProportionUI foundation
- Responsive LayoutUI foundation
- ScaleUI foundation
- Visual HierarchyUI foundation
- WhitespaceUI foundation