About Us Services Advertising Support Join Now Sign In
Home
Contact Us
Web Links
News
Articles
FAQ
Headlines
Members
Calendar

«September 2010 »
Sun Mon Tue Wed Thu Fri Sat
   1234
567891011
12131415161718
19202122232425
2627282930

Proximity: 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.

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!



--------------------------------------------------------------------------------
About the Author:
There are 605.6 million people online. Can they find your business? Jamie Kiley creates powerful and engaging websites that make sure YOUR company gets noticed. Visit http://www.kianta.com for a free quote.
--------------------------------------------------------------------------------
Back
Website Designs
Take a look at what a professional looking website design can do for your company image. We offer custom designs and also offer several templates that fit your business.
More Information
Website Hosting
Check out our top of the line and affortable web hosting packages. They are packed with useful tools and our servers are super reliable.
More Information
Search Engine Optimization
Want to find out how to get the search engine placement you are looking for? We can get you the results at a budget you can afford.
More Information
Website Maintenance
Keep your website up to date when WeddingPros Online maintains your site. You'll neve have to wait a long time for you to update information on your site.
More Information
Enter email to subscribe:
Subscribe Now!
Join our newsletter and recieve valuable information and news about the wedding industry and how to market your business better online.
More Information
Privacy Statement | Terms of Use
Copyright 2004 WeddingProsOnline. All Rights Reserved.