Principles Of Good Design: Balance

Every layout begins with a blank page or empty space. When we add an element, its placement can be determine how successful the design will be. Effective design initiates communication and an interest from the viewer whether it’s in print or on the web.

In a typical web layout, a designer needs to place a logo, text, photographs or illustration. By making a conscious effort to work on the relationship between these elements to produce an eye catching design.

Balance in design is very much like balance in life. It tends to be a good thing. An often used example of real life balance is the see-saw (which I believe is also called the teeter-totter in distant lands). A see-saw is not much fun when only one person sits on it. Balance is achieved when two people of equal weight sit on each side. Balance can also be achieved when one heavier person sits on one side and two lighter people site on the other side. And balance can be achieved if a heavier person slides closer to the center of see saw, while a lighter person sits on the end of the other side.

As humans we’re balanced physically. We have an arm and a leg on each side of our spine and head that balances top center of that spine. We’re able to stand and move despite being different sizes and weights. In design we try to achieve a balance between elements because it is pleasing on the eye. But balance isn’t always achieved through symmetry. Take a look at the boxes below.

Balance

The white line in box 1 and 2 is symmetrically balanced while in boxes 3 and 4 the line is asymmetrically balanced.

Symmetry

Symmetrical balance is mirror image balance. If you draw a line through the centre of the page, the elements on one side of the line are mirrored on the other side. We can achieve it by placing elements fairly evenly in the design.

monarch-butterfly
Symmetry in nature

A typical example of this occurs on the web, where blocks of text mirror each other in buckets or columns. Symmetry can also be achieved using colors and typography.

Mobile Web Book – on this web site, the mobile phone image divides the page in two, with the blocks of text on either side balancing each other out.

MobileWebBook

On the poster for the movie The Day I Became A Woman, the block of large white text in the top right corner is mirrored in the bottom left corner both in terms of colour and shape.

day_i_became_a_woman_ver1
The very colorful Florida Flourish site could be almost be cut in half down the center. It has a very strong sense of symmetrical balance.

FloridaFlourish

The Havoc poster below is balanced left and right using similar shapes (and body parts). The red text above and below the title is balanced in color and size above and below the title.

havoc

Asymmetry

Asymmetrically balanced layouts have elements that don’t mirror each other across a centerline. These layouts can be more difficult to design but can be appealing to viewers. We can create an asymmetrically balanced layout by placing several small items on one side, and one large item on the other side. If you have one dark item on one side, you may place several light colored items on the other side. An asymmetrical balanced design can create tension, drawing the viewer in.

MattWeb has a large graphic filling the left side of the homepage. A sense of asymmetrical balance is achieved here using matching colors and a sans-serif font which is in keeping with the spirals in the graphic.

MattWebb

Dann Whitaker’s site has several elements that don’t reflect each other symmetrically, but do balance each other in terms of color, texture and content.

DannWhitaker

Off-Balance

Ok, so it could be boring if ALL of your design work involved balance. If you know the rules, then you can break them of course, and lack of balance can convey action and motion. It can make people feel a little uneasy or even disturbed. An off-balance design can make people think. Just don’t let it happen by accident.

KrugB

Poster by Barbara Kruger

Next week, we’ll take a look at Proximity. In the meantime have you come across any websites showing strong symmetrical or asymmetrical balance?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.deanclatworthy.com Dean C

    What you are explaining has direct correlation with Gestalt’s laws. You should read this, or at least reference it in this or a future article :)

    http://www.users.totalise.co.uk/~kbroom/Lectures/gestalt.htm

  • http://www.laughingliondesign.net Jennifer Farley

    Hi Dean
    Thanks for the link.

  • heyYou

    i love the article! thanks!

  • http://thejakefoyer.blogspot.com Childe Jake

    This is a great run down. Very helpful. Though, I’m failing to see how MatWebb’s choice of a sans serif font affected the balance. I understand why sans serif font would be appropriate for the page in terms of typography, but not how it contributes to spacial balance. Are you just referring to the font’s color as contributing to the balance? In any case, I really appreciated the article. Thanks!