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 can brands be more like comedians?

Developing a brand, like developing a comedy routine, requires time, effort, and a strong attention to detail. So, what can brands and marketers learn from the world of comedy?


"Most small businesses waste time and money and get nowhere fast" SEO with Marcus Miller: Part 2

This interview with SEO expert Marcus Miller provides useful tips and advice for small businesses who want to do Search Engine Optimisation well


Why Should Marketers Embrace Minimalism?

Minimalism presents marketers and content creators with a challenge. How can you condense what you're trying to say into as concise and singular an idea as possible?


The interactive future of content marketing

Beyond all of the thrill and novelty, what does interactive content have to offer to content marketers and their audiences?