How To Create Visual Tension in Your Designs

Posted: 10 Jan 2012 05:30 AM PST

The pattern of building tension and then releasing that tension is one of the most ingrained patterns on all human beings. Tension and release is at the heart of music, story, art, and pretty much all creative endeavors.

The tension and release pattern in music creates rhythm. In a mystery novel we call it suspense and resolution. In the visual arts, including design, it leads to things like hierarchy, focal points, and flow.

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

A circle placed against the side of a triangle

What is Visual Tension

Before we can get to how to create and release visual tension we need to understand what it is. Consider the following definitions of tension.

tension (n)

physical or mental strain or stress
a force created through stretching or pulling
the interplay of conflicting elements
a situation or condition of hostility, suspense, or uneasiness
a balance maintained in an artistic work between opposing forces or elements

Even though I’m sure you know what tension is, consider the nuances of the different definitions above. We’re concerned with all of them, but when it comes to graphic design it’s the last that’s probably most important to us.

Imagine the image above is of a ball on the side of a mountain. Our knowledge of round objects and gravity tells us the ball can’t possibly be stable where it is.

The image is perhaps a snapshot in time, that we know changed from the previous moment and has to change in the next moment.

Stability won’t be achieved until the ball stops rolling somewhere on the horizontal. The current unstable snapshot carries tension because it’s not stable.

When we’re looking at a web page, the visuals we see can also be thought of as a snapshot in time.

What we perceive visually is more than a series of shapes and colors, objects and movements. What we experience visually is more dynamic. We see the interplay of directed tensions.

About a year ago, I posted 19 factors that impact compositional balance. In that post I said visual balance had two components, weight and direction. Similarly we can say that visual dynamics is direction tension.

Why Visual Tension is Important

When we design a web page we’re looking to communicate something. You have several messages of differing importance you want to convey to your visitors.

Graphically we do this by creating a hierarchy of design elements.

You create a dominant element or dominant area in the design containing your most important message and then lead your visitors through a series of less dominant focal points that contain secondary and tertiary messages.

Tension adds visual interest and energy. It adds visual weight. Hierarchy is created entirely through scaling visual weights.

It makes sense then to learn how to create and release tension so we can better direct our audience around our designs.

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.

3 images of a single dot, placed in the center of a square space, placed off center, and close to the edge

How to Create Visual Tension

Consider the series of images above.

To the left is a dot placed in the center of a square background. There’s equal space (forces) around it and the dot sits quietly and statically in the center. No tension exists.

In the middle image I’ve moved the dot off center. The space is now active as the forces are no longer equal, setting up a state of tension. The greater space on the left seems to be exerting a force that pushes the dot to the right.

We feel as though the dot is struggling to regain the center and symmetry or perhaps moving to the right and off the page.

In the last image I’ve moved the dot closer to the right edge. As the space between the dot and the edge decreases the tension increases until the moment when the dot touches the edge.

A square shape showing its structural skeleton

The Structural Skeleton’s of Shapes

There’s something else beside the positive elements and negative space determining the forces at play.

In his book “Art and Visual Perception,” Rudolph Arnheim saw shapes as having a structural skeleton running through them. Above is his structural skeleton for a square.

Elements placed along any of the axis or in the center will appear more visually balanced, more stable. They’ll carry less tension. Elsewhere on the structure there’s a greater sense of tension.

Three images showing two dots placed with different amounts of space between them

Multiple Shapes

If we add a second element we introduce new forces and a new dynamic.

Each of the images above contains 2 dots. With this second dot the dynamic shifts from being about the location of each dot to the spatial relationship between them and to a lesser extent the location of the combined dot group.

As we move the dots closer together the space between them decreases and again tension is increased. This continues until the dots touch and overlap.

Overlapping the dots releases the tension in the space between them. However, it now sets up another tension.

We know the two dots can’t occupy the same space at the same time. This is the new tension that’s been created. To relieve it we perceive the 3 dimensional space between them.

The tension (and depth) here is further increased by increasing the size of one of the two dots.

Equal figure and ground

Additional Ways to Create Visual Tension

As we saw above asymmetrical space is one way to add tension as it creates unbalanced forces on elements.

Another 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.

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.

Examples

Above 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.

Below 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.

I think 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. I wonder though, if more tension/release would be present were the content are pushed lower down on the page creating more space between page title and the black bar above.

Summary

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.

More tension leads to more attention, because we feel something is off and we need it to resolve itself back to a more static state of rest. When tension is present we feel something is going to happen and we don’t want to miss it.

Varying visual tension throughout a design by creating contrasts in space, pulling some elements closer together and pushing others further apart, creates rhythm and flow through a design. Tension in one area, release in another.