Web Site Organization and White Space
"Thanks for all your help with our website and your
suggestions. We get so many comments on our web site.
Web reservations are going great. Your other marketing
advice is working well too!"
Thanks
-Kathy, Innkeeper
Inn at The Rostay, Bethel, Maine
How to Effectively Organize Your Pages
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.
Good food can be 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 is where principles of proximity comes in.
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 beginning a new
paragraph, one can tell by the physical separation
that a new thought has started. 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 we make effective use of proximity?
Here are some of the dos and don'ts:
1. DO use white space to separate
things that aren't related. When laying out a web
page, we put everything into groups (for example,
navigation, copy, contact info, news items, specials
sections, etc.). After everything is grouped, we
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 our 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.