BALANCE: COMPOSITION + VALUES

Balance is an interesting, and somewhat abstract term in graphic design. Basically, balance looks at the whole of a design and asks whether it’s in harmony.

If you remember from our color article, harmony is a nice term for something that’s very subjective, basically asking whether something works, in your opinion. 

What feels harmonious to me might not feel harmonious to you. This is okay, of course, but makes it a bit harder to teach and explain, if we can’t readily classify something as ‘right’ or ‘wrong’, or ‘correct’ or ‘incorrect’.

Luckily for us, there are many ‘rules’ regarding several aspects of balance, especially as it relates to composition, which is a big part of balance. 

Balance looks at all of the visual elements of a design - images, text, shape elements, color, etc - simultaneously to determine if the whole of the design is or isn’t in balance. Of course we could also look at each of these element categories separately to determine if they’re individually in balance, too.

The gist of balance is to determine whether the visual weight of a design is evenly distributed, or whether the design feels heavier, or unbalanced, in a certain area than others.

Like all other design decisions, the principles of balance can be used to either ensure that your design has balance to create a comfortable viewing experience, or manipulated with purpose to offset the balance, creating a tense - perhaps dramatic - viewing experience.

Per usual, understanding balance is the key to controlling balance.

COMPOSITION + VALUES

You could look at balance in innumerable ways, but many of these are more closely related than others.

For me, I think it makes sense to break balance down into two distinct categories: composition and values.

COMPOSITION

We can approach composition in design in a similar way to how we would in photography or cinematography.

In short, we’re balancing visual elements and negative space.

VISUAL ELEMENTS (POSITIVE SPACE)

Visual elements, in this context, includes everything from logos to images, text, shape elements, and whatever else we might view that occupies the positive space.

Positive space, in general, is simply the area of a design or artwork that our eye is meant to be drawn to. 

If we think of it like magnetism, then our negatively-charged, electron eyes are drawn to the positive charge of anything occupying the positive space.

Not all visual elements are equal, of course. Elements that are larger, brighter, and/or a contrasting color stand out more visually. These elements are considered to have more visual weight. 

In our magnetism analogy, these elements would have even more of a positive charge, and thus our eyes are more strongly attracted to these elements. 

NEGATIVE SPACE

If positive space is where we’re meant to look, negative space is where we’re supposed to ignore. Or at least our eyes aren’t meant to be drawn to the negative space.

Negative space is oftentimes a solid white, black, or color background, but it can also include textures, patterns, etc. Basically, anything that isn’t meant to visually stand out is probably negative space.

Even so, not all negative space feels the same.

PASSIVE NEGATIVE SPACE

When negative space is distributed evenly throughout a design, it’s considered passive negative space. The negative space itself is balanced, and thus has no visual weight on any side or in any direction. 

In other words, passive negative space doesn’t significantly affect or interact with the visual weight of the composition in any way.

ACTIVE NEGATIVE SPACE

In contrast, negative space that more heavily occupies a significant portion of the design - in a way that isn’t symmetrical or is otherwise unbalanced - has a certain visual weight to it.

This is called active negative space because it actively affects the visual weight of the composition, and thus the overall balance.

In fact, this is a major consideration in basically all forms of asymmetrical composition. More on that below.

COMPOSITIONAL CONVENTIONS

Composition can seem like a complicated thing, but there are really just two major conventions of composition: symmetry and asymmetry.

SYMMETRY

The term symmetry can take a few forms, as we’ll discuss, but in general the term refers to an even distribution of visual elements and negative space within a canvas or frame.

Symmetry is inherently, totally balanced. The positive space is balanced. The negative space is balanced.

For that reason, symmetry is seen as aesthetically beautiful.

That said, symmetry can also become predictable, or even boring. 

There are two main kinds of symmetry: bilateral and radial.

BILATERAL (REFLECTION) SYMMETRY

When most people think of symmetry, they are thinking of bilateral symmetry. This kind of symmetry is also known as reflection symmetry, which might be a bit more of an intuitive term for it. 

Basically, bilateral symmetry is when elements are distributed evenly on the two halves of the design. Not only that, but the elements on one side might appear to be arranged invertedly from the elements on the other side. 

Imagine if the design is bisected by a vertical or horizontal line, dividing the design into two equal halves. In bilateral symmetry, the halves will be visually equal and opposite of one another. 

Now, if you imagine that the dividing line is a mirror or the surface of a reflective pool, then the term reflection symmetry makes perfect sense.

In photography, the most common type of bilateral symmetry involves left and right halves that are equal and opposite. This is partly because it’s easier to find repetition among a background than it is to find a floor that looks just like a ceiling, or land that looks just like the sky. 

Also, humans are left-right bilateral! If you bisect our bodies with a vertical line right down the middle, we’re pretty symmetrical and fleshy. Most other critters are bilateral, too. 

In bilateral symmetry, a singular subject will be along the bisecting line, whereas two subjects will be equally spaced away from the bisecting line.

RADIAL SYMMETRY

A much less common form of symmetry is radial symmetry. This is where visual elements are distributed evenly out from a central point, or axis, where the subject is.

The most common visual example of this is a clock or watch. While not perfectly symmetrical, the design elements typically radiate out from the center.

In nature, you’ll find radial symmetry in many types of flowers, as well as sea creatures like starfish and polyps. 

ASYMMETRY

Any compositional approach that is not symmetrical in nature falls under the umbrella of asymmetry.

The ‘a’ in asymmetry represents a negation, so as to say ‘not symmetry’, ‘no symmetry’, or ‘without symmetry’.

While this means that most compositions are asymmetrical, people are simple and require guidance. This results in the vast majority of asymmetrical compositions following the rule-of-thirds. 

RULE-OF-THIRDS

Divide the canvas or frame into three columns and/or three rows. That’s the rule-of-thirds.

While it’s not quite as simple as that, it’s not that far off.

Following the rule-of-thirds, you might place a visual element on one of the (probably) invisible dividing lines. Or you might place an element over one of the four points that the dividing lines intersect, sometimes referred to as the ‘points of interest’.

With the positive space situated over one of the dividing lines, the negative space becomes active. The surplus negative space over ~2/3 of the frame has visual weight that can create a feeling of balance with the positive space.

The rule-of-thirds is not a true rule of any sorts, but is more of a convention that many people follow, if for no other reason than to know where to put their subject in the frame.

GOLDEN RATIO + Fibonacci Sequence

While there’s a lot to it, the gist of the golden ratio is that it’s an arc that spiral shapes supposedly take in nature, and that arc can be reduced down to a ratio of ~1.618:1 and, interestingly enough, an inverse ratio of ~1:0.618.

The golden ratio is related to the Fibonacci sequence, which adds two sequential numbers together, and then adds the sum to the greater of the two numbers, and repeats indefinitely. The ratio of the sum to the greater of the two numbers is essentially the same, and as the numbers become larger, the ratio balances out to approximately the golden ratio.

If (a) is the smaller number, and (b) is the larger number, then the Fibonacci sequence - and the golden ratio - follow that the ratio of (b) to (a) is approximately the same as the ratio of (a+b) to (b). That ratio is ~1.618:1.

The Fibonacci sequence starts like this:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89…

So if (a) is 5, (b) is 8, and (a+b) is 13, their ratios are roughly in line with the golden ratio.

8:5 is 1.6:1.

13:8 is 1.625:1.

As we continue with the Fibonacci sequence, the ratios converge even closer to the golden ratio. Try it with some of the higher numbers, like 34, 55, and 89.

What number comes after 89?

While the golden ratio and all the things associated with it are really quite interesting and neat, there’s a problem.

Many people become obsessive about the golden ratio and the Fibonacci sequence, and try to find it in places where it isn’t. People are curious creatures that are really good at finding patterns where there aren’t any.

I, myself, have been there and back again a few times. While I admit that there is some sort of romantic allure about a theoretically perfect ratio - whether applied to an arc or rectangular aspect ratio - in practice, it’s just not all that different from 3:2 (1.5:1) as a shape, or from the rule-of-thirds as a compositional rule (~1:.666).

I, and many others, believe that the rule-of-thirds convention was actually designed to be a simplified, more symmetrical golden ratio. While the truth is surely out there, it’s hard to find the origin of the rule-of-thirds to confirm or deny.

Either way, some people will actually use the golden ratio instead of the rule-of-thirds as a guide for composition, whether in design software or in photography.

In my opinion, it’s just not worth the extra hassle for something that’s going to look like it just follows the rule-of-thirds, which every other photographer and designer follows. But you do you.

DISCORDANT COMPOSITION (OFF-BALANCE)

If your design not only lacks symmetry, but also compositional balance, then you’re utilizing a discordant composition.

In discordant compositions, the visual weight of the elements is so off-balance that it pulls us in a certain direction, usually creating tension in the viewer. 

But why would we do that?

To create tension in the viewer! Sometimes that’s exactly what we want to do.

Keep in mind that tension isn’t inherently bad. Sometimes tension just means creating a feeling of movement in a static design.

Even ‘this makes me feel uncomfortable’ kind of tension is good if the goal of your design is to make the viewer feel a bit of the uncomfortable tension that’s central to your design’s story (or the story that your design is based on). 

VALUES

Balance isn’t just about composition, however. We should also (probably) strive for balance in other aspects of a design, too. 

Many of these other aspects I categorize as values, which include: luminance, color, weight, and movement. 

LUMINANCE 

Specifically, luminance is a measurement of light reflecting off of something, such as the moon, as opposed to radiance, which is light emanating from something, such as the sun. 

The more general use of the term, however, is simply as a measure of brightness. In other words, any color’s proximity to black or white. In photographic terms, this is related to the exposure of the image.

As it relates to balance, are the values of your design generally darker, brighter, or somewhere in between?

If it’s darker or brighter, is that appropriate?

Are elements of similar luminance values distributed evenly?

All of these considerations affect the overall luminance balance of a design.

COLOR

In the color article, we discuss how some of the primary considerations for a color scheme are color balance, contrast, and harmony. In that context, color balance was concerned more with the dominant colors used in a scheme, and their proximity on the color wheel.

While we’re using both ‘balance’ and ‘color’ here, too, the context is a bit different. Here, we’re also concerned with where and how colors are used. In many ways, we’re looking at the distribution (composition) of color.

Where this can get tricky is it’s not always about having certain amounts of color, but the individual colors can, and often do matter, too.

For example, if the dominant color of a design is yellow, then blue elements will carry more visual weight than red elements. This is because blue contrasts with yellow much more than red does. Also, yellow is a warm color, so another warm color won’t contrast as much as a very cool color, like blue.

WEIGHT

Any design that features several text elements should strive for some sort of weight balance. To have weight balance, though, we first need to have weight variance. 

Weight variance is a difference in font weights over a design. It’s common to see variation in weights used in a title-subtitle relationship, or to emphasize the importance of some text over others.

Achieving balance in this regard then becomes about consistency of use and the distribution of similar weights over a design.

MOVEMENT

Not all designs feature directional vectors and other stylistic cues that give the sense of movement, but those that do should consider the final balance of those directional vectors. 

Most designs that feature directional vectors have resolution within the borders of the canvas. Leading lines take us to a specific visual element, where the directional vector feels like it resolves. Or perhaps the directional vector is opposed by an equal and opposite directional vector, canceling out each other’s visual momentum.

But the momentum of some directional vectors carries on outside of the frame, leaving the viewer with a visual push in that direction.

Movement balance is about making the choice as to whether directional vectors should resolve within the design or not, and whether any final, directional push is appropriate or desirable.

BALANCE = CONTROL

While certain compositional conventions, such as the rule-of-thirds, are so prevalent that many people instinctively use them without knowing why, balance in design rarely happens by accident. There’s just too much to consider.

But by taking the time to think about and control the various categories and aspects of balance, we can come closer to achieving that comfortable, pleasant balance in our designs.

Or not! Sometimes we want to create certain feelings of tension, disorientation, or movement in our designs. And the only way to accomplish this is to understand how to control the balance to result in designs that feel dramatic or that leave us feeling like we’re falling.