Key principles of effective graphic design
Part 1: Proximity
by Jamie Kiley

Back to design tips | Reprint info

Designing a website without intentional and effective white (or blank) space is like throwing your dinner into the blender and then drinking it through a straw. Pretty unappetizing. Otherwise-good food is ruined because you're not able to appreciate each taste and texture.

In the same way, it's impossible to enjoy a website where all the content is mixed up and you can't digest individual elements.

That's where the principle of proximity comes in. It states:

Elements that are related should be visually connected. Likewise, elements that are not related should be visually separated.

It's basically the same concept as the use of paragraphs in an article. When I begin a new paragraph, you can tell by the physical separation that I am starting a new thought. By the same token, the closeness in proximity means each sentence in the paragraph should relate to the others in that same paragraph.

So how do you make effective use of proximity? Here are the dos and don'ts:

1. DO use white space to separate things that aren't related. When you're laying out a web page, put everything into groups (for example, navigation, copy, contact/copyright info, news items, ads, special focus sections, etc.). After you've grouped everything, make sure the groups are adequately separated from each other.
   
   
2. DON'T use white space to break up items that belong together. For example, don't put space between your heading and the first line of your copy. Don't put space between a picture and its caption, or between a product description and the order button. Closeness in proximity should be used to help the eye recognize when certain things should be understood together.
   
   Instead of separating related items, put white space AROUND these groupings. This will emphasize the fact that the information contained in the framed area goes together.
   
   
3. DON'T feel obligated to fill every nook and cranny of your site. Having some empty space is a good thing, because it gives your site breathing room. Focus on an open, airy layout. Again, empty space between elements helps your eye focus more easily on the groups.
   
   
4. DON'T confuse white space with dead space. White space is intentional; dead space is not. Dead space is merely empty pockets of space without a purpose. If your site is filled with dead space, no relationships will be emphasized, and it won't be visually obvious what items should be understood together. This makes your page look cluttered.
   
   Work hard to make sure you're actually using space (or lack of it) to emphasize which elements go together and which do not.
   
   
5. DO use white space to create a dramatic effect. The eye is drawn to isolated objects. The more isolated an object is, the more pull power it has on your eyes. So if you want a big effect, use a lot of space. Take this for an example:

 

Isolated

If your eye jumped to the word in the sea of white space, you just proved my point. That's the power of space to visually emphasize an object.

6. Step back, take a look at your site, and make sure you've used space to effectively organize your site. Check specifically to ensure there's breathing room. Remember the principle of proximity:

Elements that are related should be visually connected. Elements that are not related should be visually separated.

Now, put the principle to use!

Back to design tips | Reprint info