Chapter Twenty TwoSpatial Relationships

Space is important in layout.

Space is important in layout. Space can be created by content – such as text, images, lists, logos etc. – or it can be created by the space in–between content, called negative space, or whitespace. Space can be passive; a by–product of the layout process. Or, it can be active; there for a reason, to guide the user's eye, or help them make a decision.

Size and Shape

Shapes are elements that can communicate ideas – for example, the BP logo I previously discussed in Part 2. Unusual shapes can attract attention, whilst conventional shapes – when combined with colour – convey meaning. Take a red triangle for example. From computer software, to road traffic signs, a red triangle means warning. Something's wrong. Whereas a green circle, means everything's good. Proceed.

In classical design, there are three types of shape: geometric, natural, and abstract. Geometric shapes are what you'd expect: circles, squares, triangles, rectangles and diamonds. Natural shapes are derived from what we see around us. Abstract shapes can be both representative – impressionistic – or they can be expressionistic. Like the art movements, impressionistic abstract shapes are meant to represent something else. Expressionistic shapes convey meaning, or emotion.

Shape and size are two of the basic elements of graphic design that determine space. If I change the shape of something, then I'm changing the space around it. If I increase the size of the shape, I decrease the space around it. Now, all of this is quite abstract at the moment. How can you apply this theory to your every day work? How will knowing the difference between abstract and geometric shapes make any difference to you? Well, it's about learning how to look.

Throughout art school, then through design school, my lecturers and professors would encourage me to view things differently. To simplify my environment into shapes. To look at the space in–between things. To have an appreciation of shape, size, and tone. By looking at the world this way, you can start to understand the richness and complexity of design all around us.

Typographic Colour

Typographic colour refers to the density of type on a page – either a physical page, or on screen. The ‘shade’ of typographic colour can have an impact on legibility – too dark, with no typographic hierarchy, and your content will be difficult to read. Too light a shade of typographic colour, and your content will also be difficult to read with readers finding it hard to read line to line. But there's plenty you can do to make things easier for your readers.

Let's look at some examples of dark typographic colour:

The first paragraph here is set in Helvetica. Clearly, the leading – or line–height – is set too small. The second paragraph uses correct leading but italic, serif typefaces generally have letterforms set too closely together.

To correct these two paragraphs, we need to add more leading to the first, and add some letter–spacing to the last. But remember, don't add too much. Type designers have carefully crafted the distances between letterforms. To disrupt that distance is to tamper with the very ‘feel’ of the typeface, and can have disastrous consequences.

Now, let's look at some examples of light typographic colour:

Using the same typefaces as before, this example shows that by setting a paragraph with too much leading, or too much letter–spacing, can also result in an uncomfortable reading experience. Typefaces themselves can also have a bearing on typographic colour. Some typefaces have wide, open counters, and large spaces between the letterforms, (called kerns). Whilst others have tight counters, with minimal open space in the letterforms. Even the choice of typeface can play a significant role in the typographic colour of your final design.

White Space

My first design job was based in a small studio in Manchester city centre in the UK. It was mostly a print design agency that produced work for various large and small clients alike, in varying media: packaging, publications, marketing support material etc. One of the avenues of output for the studio was Direct Mail. Designing for Direct Mail is actually quite tricky, for one simple reason: it goes against the fairly sophisticated graphic design principles, which is standard fare in college. Instead, designing Direct Mail is about as sophisticated as a small lump of concrete. Direct–Mail clients want to appear down–market, there is no getting away from the fact that it works as well: big, bold and brash design is the order of the day. And in the words of one client, words that I will never forget as long as I'm a practicing graphic designer; ‘White Space is empty space’. However, for the most part, he couldn't have been further from the truth.

Definition

White, or Negative Space is the space in–between elements in a composition; be that a web page, a web app or a spread in a magazine. Actually, that's only a part truth. The space between major elements in a composition is Macro White Space. Micro White space, is, yes you've guessed it, the White Space between elements such as list items, the space between a caption and an image, or the space between words and letters.

Legibility

A while ago I was lucky enough to go and see Erik Spiekermann give a lecture. Part of his talk was about his redesign of The Economist magazine. He mentioned one of the primary reasons for the redesign was the Economist thought their design was too heavy. The content was difficult to read. In newspaper design – which has so many parallels with web design – information is dense. Sometimes, as in web design, it's difficult to add white space because the content makes it hard to do so. Newspapers often deal with this by using a typeface for the body, which is quite light and has plenty of white space within, and around, the characters. This was part of Erik's solution for the redesign of the Economist.

He redesigned the typeface slightly, whilst retaining the quirkiness of the original. He added more whitespace to the individual characters. He set the type slightly smaller I believe, with more leading. All of this was adding Micro White Space to the design. The overall result was subtle. The content was more legible and the overall feeling of the magazine was lighter, yet there was still the same amount of content. I learnt from Erik that day that, in order to achieve a lightness and an increase in legibility in a design, and this especially applies to the web, you don't have to look at the design at a macro level. Looking at the space between the tiny stuff, at the micro level, can have a big impact on the effectiveness of a design.

White Space helps position brands

For years, designers have been using White Space in their designs to create a feeling of sophistication for upscale brands. This is where the Direct Mail client was actually correct in his view on white space for his product; adding white space to his design would position his product more upscale than it was. Coupled with a sensitive use of typography and photography, a careful use of White Space is seen all over certain brand markets to align themselves with their competitors. Take cosmetics for example, in fact most luxury goods, use white space in their marketing material to ‘tell’ the reader that they are sophisticated, of high quality and generally expensive. The opposite can be said of most Direct Mail you get through your letterbox; Red, white and black, bold typography and very little whitespace. The result is a down–market impression.

Take the following example.

The content is the same on both designs, as are the elements such as photography. The design elements differ however, to create two designs which are at opposite ends of the brand spectrum. Of course, this is a very simplified view of the world and there's a lot more that goes into brand recognition than simply White Space. But what I'm trying to get at is if a brief lands on your desk for a luxury brand, I'll bet the client and audience of that product expects white space in their marketing material and plenty of it to align it with their competitors.

Active and Passive White Space

White Space is often used to create a balanced, harmonious layout. One that just ‘feels’ right. It can also be used to take the reader on a journey through the design. In the same way a photographer leaves ‘looking room’ in a portrait shot, by positioning the subject off the centre of the frame and having them looking into the remaining space, a designer can do this to increase the effectiveness of their design.

Another way of looking at white space is by how a reader, or user, reacts to it. White space can not only be used by the designer to create harmony and balance in design, or to help position a brand, but it can be used to lead a reader from one element to another. This is called Active White Space.

Let's take the following example before any active white space is applied:

So, everything is pretty cramped here. We then need to add some white space to create the harmony and visual comfort in the design. Here, I'm adding margins, changing the type family and weight and also adding some leading, (or line–height as it's also known).

The white space that has been added here is Passive White Space. There is a theory that Passive White Space is white space that is present within a composition that is unconsidered. I disagree: that's just bad design. Passive Whitespace still has an important job to do; it's there to create breathing room and balance. Now, within this content is something that I want the reader to see, the second quote. I could highlight it with a different colour or make the type size larger. I could do all of those at the same time. In this instance however, I've added white space around the element to draw the users eye, in addition to reducing the white space of the type, not the tracking, but actually making the type bold. This is Active White Space. White Space that is added to a composition to better emphasise or structure information.

Practice, practice, practice

Sometimes, the only way to get to grips with a concept that can be as arbitrary and subjective as White Space, is to practice. In the same way martial artists have to spend hours upon hours of drilling simple techniques, graphic designers have to do the same. For many designers, this part of the craft is all but forgotten once you leave High School and replaced with classes on lateral thinking and design history. Working under the pressure of real clients demanding real work leaves little room for the time needed for these design ‘drills’. If you do find yourself with a spare hour or two though, I have a great place to start. Graphic design students have conducted these types of compositional exercises for decades and luckily for us, some of the design legends of past years have documented the process. One of my favourites has to be Emil Ruder. Emil Ruder was a Swiss typographer who died in 1970. After 21 years of teaching typography, he produced a book called ‘Typography: A Design Manual’ (ISBN: 3–7212–0043–8).

“The book is deliberately restricted to pure typography, to working with prefabricated types which are subordinated to a precise system of measurements. Its purpose is to make apparent the laws of typography and – in spite of certain common features – the contrast between it and graphic design which in both the selection and means of their application, is freer and more complex.”

So, in that sense, Ruder's teachings are fairly black and white. There is a focus on typography and the subtlety of designing with letterforms. Ruder takes you through the rights and wrongs, which is a great place to start learning the fundamental principles. There are some great exercises in there covering not only white space, but also other compositional devices. It's chock–a–block with drills. It's expensive, but I urge you to buy this book and follow the examples. White Space is not about the space in between things; the space ‘left over’. Knowing how to design and manipulate the space outside, in and around your content will not only give your readers a head start, or your product the right market positioning, but will perhaps make you see your content in a new light.

Download the book

Download your FREE copy of Designing for the Web.

ePub (4mb) Kindle (3mb) PDF singles (15mb) PDF spreads (14mb)