Adding balance and tension in your design

Adding balance and tension in your design

Whitespace and balance in design is kind of a vague and artsy subject. So don’t expect mathematic solutions on how to make your design look better. It’s about developing a way of looking at your design, seeing things differently, and then being able to make your design look better. That’s what you will hopefully learn today.

Weight & Balance

Balance in design is all about weight. Every element in your design has a certain weight. Some objects are heavier than others. Small white buttons, a dot, small thin type, thin lines and pale colours are examples of light objects. Heavy objects are bold type and bold coloured blocks for example. Pretent your design is a scale, where you distribute the different elements. You don’t want all weight to be on the left or on the right.

Balance and tension

In the example above all the elements are aligned to the left, without an image on the right the design feels out-balanced. And balance can be good. It’s not too exiting, just a calm and serene design. I removed some elements in the example below to show what I mean, it just doesn’t feel right anymore.

Balance and tension


2. Tension

Soooo, left and right should be equally heavy or light? Well, no, because there is also something called tension I would like to introduce.  It keeps the design from being boring. And while example 1 is balanced, it’s not boring. Because tension has been achieved in a different way.

2.1. Tension through type

One way I really like, is creating tension and excitement by combining bold type with thin light type. Big with small elements. This has been achieved in the examples above as well.

2.2 Tension by slightly outbalanced design

Balance and tension

The design above is slightly outbalanced. If you over do this, you get the effect of image 2, which looks bad. Image number 1 is balanced. And the image above is just in between. Which is perfect. Because it just looks great. Why? Because tension avoids boredom.


A short summary of this vague subject. Image #1 worked well, it was balanced, but tension was created by combining bold elements with light elements. Image #2 didn’t work, because it was out balanced, the weight on the left was too heavy. No tension, no balance, odd feeling. Image #3 was great as well. Slightly outbalanced (creating good tension) + tension between mutual elements.

Show Comments (0)


Related Articles

Visual Design

How to use and combine images in your webdesign

Using images in your webdesign can be really hard. Because beginners often face the problem that the images actually makes their design looks worse than without an image, but...

Posted on by Mark
Visual Design

Spend more time on choosing images

As James Chudley states in his book “The Usability of Web Photos”, some people find it strange to talk in term of usability if we talk about photos. But photo’s help us create a...

Posted on by Mark

Want to be notified when we have a new blogpost?