Adding balance and tension in your design


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

Summary

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)

Comments

Related Articles

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
UX

Micro-Interactions: making people love your products

Dan Saffer says it is the way to create “The difference between products we love and products we tolerate”. Some say it is “The way to explain a lot without...

Posted on by Mark

Want to be notified when we have a new blogpost?