Design 101: Spacing As A Clue

By Jan v. White

First, people glance at a printed page. They catch an impression in the blink of an eye. If it is alluring, they look at it again, now paying more attention and studying what they see more slowly. If, in turn, this second "take" promises something worthwhile, they decide to do the real work – reading the captions, if there are any, or the text, if that's all there is. This is not a series of consciously controlled reactions but a set of natural responses to human curiosity.

To attract and hold readers, we must manipulate those responses. But we must also take into account two vital factors: 1) all potential readers are in a hurry, and 2) we are in an intense battle for their attention, because they are screamed at from all sides.

That is why the first glance, which reveals the "WIIIFMSWSIB value" (What Is In It For Me So Why Should I Bother?), is absolutely crucial. Everything we put on the page must be welcoming, direct, and immediately comprehensible.

This need for simplicity and immediate accessibility affects both the editing as well as the design process. Certain elements must be highlighted so they attract the potential reader irresistibly. Editing picks out the element; designing shows them off.

Do not waste your efforts on fun-and-games for their own sake - startling images that say nothing but "look at me" aren't "clever" (or "different" or "creative"). Avoid puns in titles or pictures and resist inserting puzzles the reader will have to figure out. Concentrate instead on the relevance of your message to your target audience. The greatest service we can give our potential readers is to present them with clear information, so all the thinking-work is already done for them.

Use space to organize

Space is cheap and always available, ready to be utilized. Always keep in mind these truisms:

• Things that are close together belong together.
• Things that are far apart don't belong together.
• Equal space between things is neutral, therefore "clueless."

Pages – whether printed or online – are usually made up of a variety of elements (title, deck, text, subheads, pictures, captions, charts, pull-quotes, etc.). Often pages encompass several sets of such elements, in the form of separate "stories."

How the relationships of those elements are explained (presented) to the viewer makes the page appear welcoming...or repulsive. The blander the mosaic, the more regular the spacing between things, the more unhelpful (and, therefore, the more difficult) the message is perceived to be. On the other hand, the more varied the spaces-between are, the more obvious the individual clusters of information become. The viewer understands instinctively what belongs to what (which is always helpful); plus, the big mass is broken down into digestible component parts. Short, quick in-and-out segments are always read first as they demand the least effort. Size is also a major factor, but for more detail you should read our guide on design sizing.

Use space to define value

Screws are not very expensive. They are sold in bulk and there are drawers full of them in various sizes at the hardware store. Diamond rings, on the other hand, are very expensive. They are sold individually, even if there are also drawers full of them at the jewelers'. The canny salesman never shows you the whole drawer. Instead, he displays each ring individually, in the middle of a velvet-covered tray. The space around the ring separates it from the surroundings, frames it, focuses your attention on it, makes it alone special...and therefore worth more.

More truisms:

• Things that are crowded together are ordinary.
• Things that are isolated in space are special.

You don't need much space around an object to give importance. You just need a bit more than there is around all the others. The whole trick is in controlling the relationships, so you can contrast narrow versus wide.

Functional use of space helps you to clarify the structure of the page and emphasize those elements that are worthy of notice at the same time. Both are vital clues for the first-glancer.

Equal spacing, narrow

A group of a dozen units with equal spaces between them looks like a block. How do you read the units? From left-to-right in rows or up-and-down in columns? There is no clue in the geometry. You'd have to study the objects themselves to figure out any logic of sequence or relationships.

Equal spacing, wide

Here is the same group of units with equal (but wider) spaces between them. Has the added space made any difference to the understandability of the image? Absolutely not – other than making a looser conglomeration and forcing the units to be smaller. The block-as-a-whole is still the dominant element.

Unequal spacing

The magic of varied spacing is that, without thinking or analyzing it, you just know immediately that there are three rows of units and that you are to read them from left to right. Why? Because narrow spaces glue things together, while wider spaces separate. Obvious? Of course, but that's just what's useful about it.

Random spacing

The spaces-between need not be strictly geometric and parallel. The effects of similar spacing or different spacing are just as discernible in irregular relationships as in regular ones, though the regular ones are easier to control. In this example, there is no question that the group has been broken into four columns.

Crowding in space

The individual objects are not particularly valuable here. They can't be – look how many of them there are. No matter what the objects, their very number and agglomeration makes them common and unimportant. Remember: crowding devalues.

Isolation in space

The object is displayed in lonely splendor in a large empty area. It is The object here is displayed in lonely splendor in a large empty area. It is perceived as important because all competition has been pushed aside, beyond the confines of the frame that encloses the space. The object is perceived as valuable because of the investment in all that surrounding empty space.