arrow arrow-2 arrow-2-right LinkedIn Behance Treehouse cv Email Options Share Twitter

A balanced composition is pleasing to the eye; it feels stable, with no one part overwhelming any of the other parts. In this post, we will explore what balance is, why it is important, and two different ways to achieve balance in a design: symmetrically, and asymmetrically.

What is Balance?

Visual balance is the perceived stability of a composition. Our understanding of visual balance stems from our sense of physical balance in the real world. Just as an unbalanced scale tips over to the heavier side, so does an unbalanced design feel unstable and cause discomfort.

balance-scales-balanced.png

balance-scales-unbalanced.png

A composition's balance is determined by the position and the visual weight of the objects inside it.

The visual weight is how heavy we perceive an object to be. It is influenced by the object's colour, shape and size relative to the objects around it. For example, a larger circle would appear heavier when placed next to a smaller circle.

In the first example, the two identical circles are positioned symmetrically about the centre of the rectangle they are inside. They are both the same shape, size and colour, and so appear to have the same "weight" to our eyes. Just as with the balanced scale, as the 2 identical circles are positioned equidistant from the centre of the rectangle, their perceived downward forces cancel each other out, creating balance.

A composition's balance is an important consideration when designing the layout for a website, booklet, poster, document, blog post, or any other kind of visual media which someone can interact with. It dictates how accessible and intuitive the design is, and prevents the design from being distracting or overwhelming to the person accessing it. It also gives equal weighting to the information on the page, so that viewers explore each of the different points of interest without missing any of them.

Achieving Balance through Symmetry

Symmetry is ubiquitous throughout the natural world: for example, the majority of animal species (including humans, birds, and butterflies) have symmetric bodies, and leaves grow in a symmetric shape. Symmetry is extensively used in architecture as well. Symmetric compositions tend to feel harmonious, formal, and orderly.

Symmetrical balance can be created when there is one or more mirror planes present in the composition. Other types of symmetry, including rotational symmetry and inversion, can also be used.

balance-snowboards.png

Andreas Preis' snowboard designs use reflection symmetry along both the vertical and horizontal axes. This creates a very uniform and well-ordered design, instantly creating a strong sense of balance. The individual animal motifs are also symmetric themselves, adding to the harmonious feel of the design.

balance-de-correspondent.jpg

De Correspondent Festival of Progress' logo invokes radial symmetry through the white 8-pointed star shape. The graphics within each individual hollow exhibit approximate reflection symmetry in the vertical axis too. This use of pseudo-symmetry is an effective middle-ground between symmetric and asymmetric balance: it maintains an orderly, harmonious form whilst adding lots of visual variety.

balance-kikk.png

The website for Kikk Festival 2016 showcases strong vertical reflection symmetry. This is made more prominent by the large vertical text going down the centre of the page, which explicitly marks out the vertical mirror plane which is present.

Elements on the left-hand side of the page, such as the logo and the festival dates, are mirrored on the right-hand side by information which has an equivalent visual weight, such as the bold call-to-action button and the social media icons. Furthermore, the background image is also symmetric, adding to the powerful sense of structure and order which is present in this design.

balance-conker.png

Lastly, Conker Events' website utilises reflection symmetry along the vertical axis from top to bottom throughout every page. This creates a professional and organised feel. Image grids within the website and the navigation links also exhibit their own internal symmetry, as each block inside these elements is the same width and height and is organised in a grid. This adds to the sense of structure and formality of the website.

Achieving Balance through Asymmetry

Asymmetry is also frequently observed in day-to-day life: for example, tree branches grow in different directions and clouds form in irregular shapes. Asymmetry creates more energetic, dynamic designs. The lack of symmetry means that the composition is less predictable. The intricate balance of its visual elements makes it more difficult to achieve, however the end result may be more visually engaging.

balance-pavilion.png

Non-Verbal Club's brochure for the art exhibition "Pavilion of Angola" does not contain any mirror planes in its overall composition. However, the striking band of colour on the right-hand side complements the black and white text and pattern present on the bulk of the cover. The combination of its colour and its greater whitespace provides a stark contrast to the achromatic, crowded left-hand side, which creates balance.

In addition, the majority of the heavy text and pattern lies in the lower half of the cover. This makes the composition feel grounded and solid.

balance-ville.png

The town website for Ville de Val-d'Or is another example of asymmetric design. The text overlapping the background image acts as a central focal point, with other links and information arranges around the periphery. The heavy, contrasting navigation on the right is balanced by the floating image link on the left and the left-aligned image in the content further down the page.

balance-melville.png

On Melville Lighting & Furniture Design's website, a large, dark image of 2 lamps has been placed on the left-hand side of the page. The size and the contrast of this image compared with the objects around it gives it a heavy visual weight. The designer here has opted to balance this image with 2 smaller, lower-contrast images and a light block of text on the right-hand side of the page.

Furthermore, the logo in the top-left is balanced by the rotated link in the top-right, with the navigation button sitting flush with the left of the page as a separate entity.

Conclusion

Visual balance is the perceived stability of a composition, and is determined by the position and the visual weight of the objects which it is composed of. A well-balanced composition creates a pleasing, stable impression and gives equal weighting to the different pieces of information contained within it, making it more accessible.

Balance can be achieved either symmetrically or asymmetrically, to give the feeling of either formalism or dynamism.

By keeping balance in mind when designing your next piece of work, you can improve its accessibility and make sure that the message you are communicating gets across effectively.

Sources & Additional Reading

Design Principles: Compositional Balance, Symmetry and Asymmetry by Steven Bradley

Principles of Design by Charlotte Jirousek

Balance by Scott Owen

Design Notes: Balance and Symmetry by James Saw