Symmetrical balance arranges corresponding elements or equivalent visual weight on opposite sides of an axis. On a webpage, equal distribution can make content easier to scan and move through, though the result may feel predictable. section 2.1.5
Build symmetrical balance by checking:
- A clear central axis or grid division. section 2.1.5
- Equivalent visual weight on both sides, including color, element size, imagery, typography, and white space. section 2.1.5
- Alternating image-and-text rows when identical content lengths prevent perfect symmetry. section 2.1.5
Figure 2.41 This page is split into two equal-width sections, and while the right-hand side has more text, the white space helps counter the full image on the left. (Courtesy of ENSEMBL, https://getensembl.com/)
Compare equal-width sections where white space counterbalances a fuller image against longer text. section 2.1.5
