Using tension to improve your UI design skills

Are you looking for the next step in becoming a better UI designer? Do you feel like you’ve learned all the basics and are ready for the next step? Starting to think about tension in your designs might be just the thing.

Does this sound familiar? You’re working on a design that has all the right design elements, but it isn’t quite there yet? Could be that it’s lacking tension.

I consider this a somewhat advanced trick to improve your UI design skills, but definitely worth adding to your skill portfolio.

For me, it’s definitely a way to separate simple from professional designs.

Here’s an analogy I often use to explain the importance of good design to clients. Just like with cooking you can make many different things with the same ingredients. You can make something delicious, or something awful.

The same is true for design: even if you pick all the right design ingredients, it doesn’t mean your design is pretty, aesthetically pleasing, and interesting to look at.

You might be happy with all the individual elements, but when not used correctly, it becomes dull and boring. That’s where tension comes into play.

What is tension? What does it do? And how do we achieve it?

What is Tension? A design philosophy on symmetry.

Tension is navigating the fine line between balance and imbalance.

A design that is perfectly symmetrical and balanced can be boring and predictable.
A design that’s leaning too much to one side can feel imbalanced, and therefore broken and unprofessional.
Somewhere in the middle is where we find tension.

Why do you need tension your design?

I came across this saying the other day: “symmetry is the aesthetic of the common man”. In other words: even though symmetry can be attractive and sometimes a necessary design choice, “it’s simple, superficial and easy. It lacks complexity, originality and creativity.”

We introduce tension to fix these boring layouts. With the use of contrast or a-symmetry we can stay away from the ordinary, from the well-known and common choices.

The effect of tension in your design

Before looking at the how, what’s the result of tension?

We can look at it from a rational (UX) and emotional (UI) perspective.

UX: When you’re clearly giving one element more focus than the other, and provide for clear visual hierarchy, tension is often a by product. An important title or important block might be drawing major attention with size of color, for example. While all other elements are clearly secondary and don’t draw the attention at all. The contrasts that emerges, that’s what we call tension.
UI: From a purely visual design perspective, tension makes a design less boring, increasing the chances it grabs & keeps attention.

Imagine a poster that has little contrast, elements are all equally sized, colours lack contrast, and is perfectly in balance and symmetrical. These words might sound positive, but here’s an example of what that looks like.

How do we achieve tension?

There’s two design choices we can make to increase tension:

Contrast (Design element choices)
A-symmetry (Composition)

Increasing those often leads to a more interesting design. Don’t over-do it though, because that will make the design feel imbalanced. How do you tell the difference? Unfortunately that’s a matter of taste and developing an eye for this kinda stuff.

Contrast can be increased in many things, making it the easiest to implement:

Contrast in size
Contrast in color

Contrast

Two simple questions that can help you create more contrast

Is there one design element that is most important or should grab the attention first? A title perhaps?
What design elements are actually very secondary and not that important? Can you make them smaller and blend in with the background more?

Symmetry

As mentioned before, perfect balance and symmetry can be boring. Sometimes this is exactly what you want! Sometimes you want to trigger, visually communicate your brand or more a statement.

Consider this design I’ve made a few years ago. There was one element that clearly needed to grab the first bit of attention. By placing a large orange block on the right side, we create an a-symmetrical look. We add a few elements on the far left to counter balance everything, and we end up with a design that is not symmetrical, but still in balance.

That last sentence is perhaps key to this entire story. A-symmetrical, but still in balance.

Here’s a few more examples that hopefully provide some inspiration.