Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Balance & Tension

The word “balance” is used in many different contexts. Whether it’s used to describe your diet, the judicial system, or standing up on your own two feet; balance is normally considered a very good thing. In the vast majority of cases, nobody wants to lack balance in anything.

The same is true in design. Balance is desirable.

In the physical world, objects of the same physical weight will balance each other on a scale. In design, balance refers to the distribution of visual weight.

Visual Weight

Considering their relative size, a basketball and a bowling ball appear to weigh the same. However, our experience tells us otherwise. We know that the physical weight of a bowling ball is much heavier than a basketball.

In design, however, we are limited to our perception. Although they differ in physical weight, the image above remains visually balanced because both objects compete for our attention equally.

Visual weight is the perceived weight of an element in your design. It is a measure of how much an element stands out compared to those around it.

Factors of Visual Weight

Visual weight can be altered by the size, color, contrast and/or the density of an element. Assuming all else is equal, let’s see how each of these factors have an impact on visual weight.

Visual Weight by Size

Size is the most obvious factor that contributes to visual weight. In the image below, the left square carries more visual weight than the right square.

Visual Weight by Color

Color is a less obvious contributor to visual weight. Our perception of color is relative to the colors around it. In the example below, the red square demands our attention, giving it more visual weight than the yellow square. However, as we’ll see in the next example, this is not always true.

Visual Weight by Contrast

By using the same colored squares as the previous example, we can see how contrast can drastically change our perception of color. A darker red background reduces contrast for the left square and increases contrast for the right square. This effectively switches our focus to the yellow square. We talk about this phenomenon in more detail in the Advanced Color Theories course in the Color Relativity unit.

Visual Weight by Density

Despite both squares having the same overall size, color, and contrast, the right square has more visual weight due to its perceived density. This example illustrates how white space can play a role in creating balance.

In each of these examples, we can see how slight changes to the size, color, contrast, or density can affect the visual weight of an element on your page. As we’ll see below, these factors can be combined to help establish a sense of balance with your design.

Balance vs Tension

Without balance we create visual tension that can easily have a negative impact on how our designs are perceived by others.

The image above has been edited to appear unbalanced. The centered text establishes a symmetrical balance on a vertical axis. However, the left side of the page is visually “heavier,” which creates visual tension. This visual tension causes our brains to think “something seems off about this design.”

Most would agree that the second image is more preferable than the first because our brains desire balance over tension. This doesn’t mean you should avoid creating tension altogether, but it should be used with caution and intent.

Balance and tension are not mutually exclusive. Using the same example above, a designer may wish to draw more attention to the right button than the left, without upsetting the balance. This primary / secondary relationship between buttons is nothing new. We can avoid creating too much visual tension by combining the factors of visual weight.

In this case, Unbounce’s primary color is orange. A designer may go through the following decisions to establish both balance and tension simultaneously.

The first change results in an imbalance of contrast. Not only is it more difficult to read the primary button, but the secondary button seems to carry more visual weight. That’s not what we want.

In the second change we have fixed our contrast issue, but the primary button now feels far too heavy compared to the secondary button.

In the third change we have adjusted the density of the secondary button to match the primary button. This results in the right amount of balance and tension that we’re looking for.

Four Types of Balance

There are four ways to achieve balance with design. Most often, balance is established on two sides of an invisible axis, whether vertical or horizontal. This implies the visual direction of your design. While vertical and horizontal balance is more common, it can also be established with diagonal, or even multiple axes too.

Symmetrical / Formal Balance

We observe symmetry in many difference aspects of nature, such as in human faces or butterflies. Symmetrical (aka formal) balance is accomplished by mirroring objects on one or more axes. This is an example of reflective symmetry, in which two objects mirror each other on a vertical axis.

Symmetrical balance is often used to express a sense of grace, elegance, or formality. However, too much symmetry in a design can become dry and boring. In this example, Adham Dannaway utilizes symmetrical balance, while distinguishing both sides enough to keep things interesting.

Asymmetrical / Informal Balance

We experience asymmetry in nature too, such as with trees or rock formations. By definition, the word “asymmetry” suggests a lack of symmetry. However, balance can be created with asymmetrical elements as well.

In contrast to symmetry, which can be a bit monotonous, asymmetry can be used to make a design more dynamic and lively. In this example, Ricardo Mestre pulls off a pleasant and coherent design with asymmetrical balance.

Radial Balance

Radial balance is established when elements appear to radiate from a central focal point. This method can be used to draw attention to the center of your design.

In 1996, Space Jam launched their website, featuring a radial balanced design. The Space Jam logo is the center of attention with navigation radiating from it. Radial balance is less common in UI design today, but that shouldn’t stop you from attempting to master it!

Mosaic / Crystallographic Balance

Mosaic (aka crystallographic) balance can be described as “organized chaos.” It can present itself as pattern or repetition, in which no single element stands out more so than the rest.

Pinterest’s masonry layout is one such example of mosaic balance. A lack of vertical alignment between elements feels a bit chaotic, but the horizontal alignment and consistency between elements helps to organize that chaos.

Next, let’s talk about visual tension.

Understanding how visual tension works and how to control it is an important tool for designers to master.

Visual tension is a compositional technique that uses a variety of framing approaches to create dynamic elements in a design to draw in and stimulate the interest of the viewer.

One point to keep in mind is that like everything else hierarchy, we need to use tension sparingly. Too much visual tension everywhere will pull the eye in all directions at once and hurt your design.

Asymmetry

A good way to create tension using space is through the figure/ground relationship. If figure and ground each carry equal weight it can create tension as each threatens to overtake the other.

Juxtaposition can also be used. Juxtaposing conflicting elements is one of the stronger ways to visually show tension. An ice cube next to the sun for example. The greater the conflict, the greater the tension.

Contrast

Similarly contrast can be used to create tension. Light and dark, large and small, curves and straight lines. And again the greater the contrast, the greater the tension.

Angular lines typically carry more tension than either horizontal or vertical lines, because the are perceived as less stable.

Breaking rules, such as moving an element off the grid creates an uneasiness, an escape from order. This uneasiness creates tension and naturally draws the eye and adds visual interest.

Let’s look at a few examples that use tension to draw viewer’s attention to certain areas of the design.

This is a design from Jan Tschichoild. Tension is created through the asymmetrical balance of elements along with contrast of both tone and color.

The elements in the lower right are all pulled close to each other like the two dots we saw above. Additional tension is created through the contrast between the circle and the straight lines and the contrast between the horizontal text and vertical column of text.

This is the studio page from the Definium Design Group webs tie. Like Tschichoild’s design above it shows an asymmetrical balance of elements as well as contrasts in tone and color.

Additionally we see the use of a diagonal line running through the upper left corner and a diagonal flow through the logo and tagline.

There’s a nice tension and release at play here. If we start in the upper left, there are two dark shapes enclosing the logo. These elements are close together as though there’s an attractive force between them.

On the right a series of links are pulled closely together, yet pushed away from everything else. The text in the content section is also pulled closer to itself than anything else.

In between these areas there’s space for the eye to rest when traveling from one part of the design to another.

Tension and release is a very common pattern in all the arts. Visual tension creates visual interest. It’s more dynamic and leads to more complex relationships between elements. We can use this to evoke feelings of energy, vitality, forcefulness, and even modernism.

Scroll to Top