Page example

A balan­ced compo­si­tion feels right. It feels stable and aesthe­ti­cally plea­sing. While some of its elements might be focal points and attract your eye, no one area of the compo­si­tion draws your eye so much that you can’t see the other areas.

Balan­cing a compo­si­tion involves arran­ging both posi­tive elements and nega­tive space in such a way that no one area of the design over­po­wers other areas. Every­thing works toge­ther and fits toge­ther in a seam­less whole. The indi­vi­dual parts contri­bute to their sum but don’t try to become the sum.

An unba­lan­ced compo­si­tion can lead to tension. When a design is unba­lan­ced, the indi­vi­dual elements domi­nate the whole and the compo­si­tion becomes less than the sum of its parts. In some projects, unba­lan­ced might be right for the message you’re trying to commu­ni­cate, but gene­rally you want balan­ced compo­si­tions.

Note: This is the seventh and final post in a series on design prin­ciples. You can find the first six posts here:

Header 1

Balance is easy to unders­tand in the physi­cal world, because we expe­rience it all the time. When some­thing is unba­lan­ced, it tends to fall over. You’ve proba­bly been on a seesaw or a teeter-totter at some time in your life — you on one side and a friend on the other.

frock

Assu­ming you were both about the same size, you were able to easily balance on the seesaw. The follo­wing image appears to be in balance, with two equally sized people equally distant from the fulcrum on which the seesaw balances.

The person on the left makes the seesaw rotate coun­ter­clo­ck­wise, and the person on the right makes it rotate clock­wise by an equal amount. The force of each person acts in a different direc­tion, and their sum is zero.If one of the people was much bigger, though, the balance would be thrown off.

Here, the force of the larger person is redu­ced by being closer to the fulcrum on which the seesaw balances.

I’ll trust you’ve been on a seesaw before or at least watched others play on one and that you have a pretty good sense of what’s going on.

Visual balance is simi­lar. Physi­cal weight is repla­ced by visual weight. The direc­tion in which the physi­cal weight acts is repla­ced by visual direc­tion.

Header 2

As a remin­der, below are defi­ni­tions for visual weight and visual direc­tion, although I’ll refer you back to the fourth post in this series for more details.

  • visual weight
    This is the percei­ved weight of a visual element. It’s a measure of how much anything on the page attracts the eye of the viewer.
  • visual direc­tion
    This is the percei­ved direc­tion of a visual force. It’s the direc­tion in which we think an element should be moving if it were given a chance to move accor­ding to the forces acting on it.

You don’t use instru­ments to measure the forces. You don’t use formu­las to calcu­late whether every­thing is in balance. Rather, you use your eye to deter­mine whether a compo­si­tion is balan­ced.

9

Header 3

Just as in the physi­cal world, visual balance is a good thing. It’s desi­rable in and of itself. An unba­lan­ced compo­si­tion can feel uncom­for­table for the viewer. Look back at the second of the three seesaw images — it looks wrong because we can tell that the seesaw shouldn’t be in balance.

  1. visual weight
    This is the percei­ved weight of a visual element. It’s a measure of how much anything on the page attracts the eye of the viewer.
  2. visual direc­tion
    This is the percei­ved direc­tion of a visual force. It’s the direc­tion in which we think an element should be moving if it were given a chance to move accor­ding to the forces acting on it.

Visual weight is a measure of the visual inter­est of an element or area in a design. When a compo­si­tion is visually balan­ced, every part of it holds some inter­est. The visual inter­est is balan­ced, which keeps viewers enga­ged with the design.

Without visual balance, viewers might not see all areas of the design. They proba­bly won’t spend any time in areas with less visual weight or inter­est. Any infor­ma­tion in those areas could easily go unno­ti­ced.

Header 4

You would balance a design visually because you want to balance the points of inter­est in your compo­si­tion, so that viewers spend time with all of the infor­ma­tion you want to convey.