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.
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.
- 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.
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.
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.
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.
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.
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.
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.
Download a free sample from my book, Design Fundamentals.
this is an interesting topic to follow when designing a website..
this is first time I have seen Physics in Web Designing
thanx-very beautiful and clear… 🙂
Thanks Sarah. I’m gad you enjoyed the post.
Thank you for this fundamental information- great guidance for building attractive and engaging design.
Thanks Teresa. I’m glad I could help.
this is a great page and explanation of tension as a principle of design. As a high school art teacher I am going to use it to discuss the concept with my classes.
Steven, you are incredible. I’ve found this very helpful in introducing me to what I’ve been searching to learn more about for a long time.
Thanks for sharing; you’re an excellent teacher. Keep up the good work!
Thanks Yisroel. I’m glad I could help.
I make abstract photographs and my teacher said I need more visual tension in them. Your article has been helpful in understanding this concept. Thanks!
This was very interesting !! I’m wondering if you could point me in the direction of more art that has tension or isolation created w simple designs like these!
This has helped me a lot, now I know why some of my designs just look right and others are just missing something
Amazing understanding and explanation
You’ve taught me to pay attention to tension
There’s something else beside the positive elements and negative space determining the forces at play.
I think there’s a nice tension and release at play here
please what the mean of play above ?
I meant that there’s tension and release happening in the design. The phrase “at play” doesn’t mean anything more than that. Does that make sense?
You can buy the book by clicking on the “Books” link at the top or finding it on Amazon. Thanks for your interest. I don’t a channel on YouTube.
Is it possible to change the phrase sen (at play) so that I can better understand the meaning? . You are a great artist and how can I buy your book and do you have a special channel on YouTube?
This is great information, put in a basic manner. I’m a designer. I always thought there was some kind of uneasiness in ‘asymmetry’ and could not express it to others. Now i will be able to, confidently.
Thank you 🙂
Thanks Sanjana. I’m glad I could help. My preference is for asymmetry. I find it more interesting than symmetry.
I am currently working on a piece that needs to create tension could you help?
Do I have to have 4 black equalatiral triangles of the same size of white 8.5″x 11″ white paper???