Visual balance is the distribution of perceived weight among the elements in a composition. It helps a page feel complete and cohesive rather than unproportioned or dominated by one heavy area. On a website, balance helps users move their eyes through content instead of repeatedly landing on one focal point. section 2.1.5 section 2.3
Weight begins with layout, then changes with visual choices. Dark colors generally feel heavier than light ones; large elements, photographs, and typography styles also add weight. A page can become unbalanced when these qualities collect in one area without enough counterweight elsewhere. section 2.1.5
Use balance as a practical layout check:
- Start with the overall layout before styling individual details, because layout provides the foundation for the rest of the page. section 2.0
- Check whether visual weight is distributed across the page, not merely whether columns have identical dimensions. section 2.1.5
- Use balance alongside proximity, alignment, repetition, and contrast to establish hierarchy and relationships between content. section 2.1 section 2.3
- Review the page for a single area that overwhelms the rest or leaves excessive empty space without a counterbalancing element. section 2.1.5
Symmetrical balance places equal visual weight on opposite sides of an axis. Exact mirror images are uncommon on the web because content lengths differ, but repeated, equally distributed layouts can still feel symmetrical. Asymmetrical balance uses unequal arrangements while allowing prominent elements to counter one another; it is often more interesting and common on web pages. section 2.1.5
Balancing unequal columns
A section can be asymmetrical when its first column takes 50% of the page width and two following columns take 25% each. The columns are not equal, yet their combined distribution can create balance. By contrast, a layout heavily weighted left with too much empty space on the right feels imbalanced. section 2.1.5
Figure 2.45 The asymmetry of this section is caused by the size of the first column, which consumes 50% of the page width. However, the page is balanced by the next two columns, each taking 25% of the page width. (Courtesy of Whitehead Institute, https://wi.mit.edu/)
Compare a wide first column with two narrower columns to see how unequal dimensions can still distribute visual weight across a section. section 2.1.5
