Balance is based on our perception of visual weight in a composition. Like visual hierarchy, visual weight is relative:

• Pale colors, empty space, centred objects, and small or thin typography typically feel聽lighter
• Dark or vibrant colors, high-contrast patterns, bold text, and elements near the edge of a composition usually feel聽heavier

Your arrangement of heavy and light elements in a layout can create a sense of balance. Or imbalance, as in this example:

Many different attributes contribute to an unbalanced feel:

• The short left-hand menu feels very light (due to its pale colors, small typography, and ample white space)
• The "Why Arts at 不良研究所?" box at lower right feels very heavy (the black background and vibrant photo add weight, and they contrast strongly with the white page and white lettering; there's very little empty space in and around the block; and it's stuck to the right edge of the layout)
• The differing column lengths and content formats (including the "University Awaits" image and overlay) don't provide a clear line around which to balance the varying elements of the layout

In contrast, here's a short, balanced composition:

The symmetry around the centre line (between the two blocks) makes this composition feel balanced. This is done with:

• Content that's similar length and height in both blocks
• Images that are the same size and shape聽
• A similar level of complexity and range of shades in both images

There's also a suggestion of vertical symmetry here: the visually heavier titles and dark buttons in each block make a neat "sandwich" with the small text descriptions. The overall effect is harmonious and balanced.

However, perfectly symmetrical layouts can sometimes feel boring or expected. Sometimes, we want an asymmetrical layout with a balanced composition:

In this example, the visual weight is evenly distributed on the horizontal axis. The naturally heavier photo and naturally lighter text are managed in a way that creates balance:

• The title, text, and button are aligned with the left edge of the block (making them heavier)
• The bold title and red button also add visual weight (which helps counterbalance the generous negative space around them)
• The portrait subject is centred in the image with a solid, pale background (making it feel lighter)
• The photo itself is uncluttered and not too colorful (lighter)

The division between the text and the photo is also off centre, making the text area a bit wider than the image. The division serves as a visual pivot point to give the text more leverage, balancing it better with the photo.

When working with balance, the easiest tools are typography and images. You can usually achieve balance in the WMS by adjusting these two attributes. A few ways to play with them:

• Choose larger (heavier) or smaller (lighter) heading styles
• Make text bold (heavier) or italic (lighter)
• Make text longer or shorter (be sure you maintain clear, plain language)
• Strategically select and crop images, which can help to...
  • Create consistent image shape/size
  • Change image composition and visual weight (e.g. move the subject to the centre of the image or crop out busy parts of an image for a lighter feel)
  • Manipulate color balance (desaturate an image to make it lighter; choose a darker or more colorful image to make it heavier)