Principles of design and animation, part 3: Space

Principles of design and animation, part 3: Space

Posted on: 1 February 2017

So far, we’ve looked at how different shapes, and their sizes, can communicate various messages. However, these shapes can’t exist without somewhere to put them. Where an object is positioned in space, the space between objects, and how an object interacts with its surrounding space all have just as much ability to communicate as the objects themselves.

The surface on which objects are placed is often referred to as the “plane”. This could be a web page, a printed page, or a video frame. The location of one or more objects on this plane can create meaning, for example, a central placement is very strong. It can suggest that the object is very important or maybe the source of a power or quality.

Vertical, horizontal and diagonal arrangements of circles create different meanings

The alignment of multiple objects can describe the relationship they share. Repeating shapes aligned vertically denote a list, demonstrating their decreasing importance/priority from top to bottom. Aligning these shapes horizontally instead begins to emphasise their order, as they are read from left-to-right.

A diagonal alignment combines the previous two meanings, creating a set of steps. Now, the emphasis is placed on the effect this list has, the difference between the first and last step. Steps going upwards denote success; steps going downwards, failure.

Distance between shapes implies meaning about their relationship

Similarly, the distance between objects can make them look closely related, or complete opposites.

An Escher painting showing the effects of negative space

Another effective design principle is negative space. Negative, or “white”, space is the space surrounding an object – the space it doesn’t occupy. Many illusions, especially those by M. C. Escher, use this technique with artistic genius.

Hiding part of an object with negative space can create depth

Negative space should be thought of as just as useful as the main objects in a design, as it can be very powerful. For example, hiding part of an object with negative space can create depth, making it seem behind another plane.

When utilising any of the principles in the series, it’s important to recognise how differently they may be perceived by other audiences. Most languages and cultures subscribe to the left-to-right way of thinking. Text is read from left to right, left-to-right movement of an object equates to forward movement, and time is thought of as going from left-to-right. But, in Arabic and Hebrew for example, reading is performed right-to-left, and the directional meanings of objects swap around too.

Therefore, the principles shown here (especially that of object alignment) are still valid, but must be inverted to reflect this cultural difference.

You’ll notice that so far, we’ve only been looking at black and white examples of objects. Next time however, we’ll see how colour can create meaning in objects.

You're over halfway through the series — Read more or catch up

Part 1: Shape

Part 2: Size

Part 4: Colour

Part 5: Movement


 gravatar avitar
Principles of design and animation, part 3: Space



How to choose the right web designer

These tips on how to choose the right web designer aim to help you have a more stress free and cost effective experience when building a new bespoke website.


How best to tell your story?

In a world so saturated with stories, how you tell yours is more important than ever. So, what inspiration can marketers take from the narrative techniques of TV, film, and literature?


When does it make sense to use paid social?

Algorithm changes have made organic social media less effective. For reluctant businesses then, the question is: when does it make sense to use paid social?


Content marketing and advertising: what’s the difference?

Content marketing and advertising have a lot in common. But there are key differences between these two strategies that raise the question: what does content marketing offer to brands that traditional advertising does not?