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!

Grouping Elements
Grouping similar elements helps the brain quickly decode a page layout. Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping...
Designing for Content
We
Social Bookmarking: What is it?
Social bookmarks are a way for internet users to store, organize, search, share and manage web pages on the internet that they find of interest....
Organizing Your Website With Folders
Why Organize?
Your Website will get out of hand fast if you dont organize your pages. I know because Ive tried to design Websites without organizing. It was all fun until I had to find a page to make changes later. Quickly, I realized that a site without organization can become very clut....
Title Tags Optimization
An HTML tag that is used to define the top line of a web browser, the search engine considers this as the most important part of text on the web page, as they base their natural results here.
How To Manage SEO
When it comes time to start an SEO program, companies should be sure to consider the types of training and knowledge it takes SEO specialists to perform SEO services for their web site, whether it is done through outsourcing or completed in-house.
Colour Theory
The colour wheel below consists of 20 basic web safe colours, and is a helpful tool that shows the basic organization and relationships between colours. By choosing the colour opposite a particular colour you can match colours more effectively...
How To Use Color Effectively When You Create A Web Site
Colors are powerful, and create strong feelings. They can also make your web site look professional or look like a circus. Here are some powerful tips you should use every time you create a web site...
Design An Eye Catching Website
We all know that these days every one can design a website but the question remains how to design eye catching website . I have read many books ,articles and tutorials about web design and have realized that every web designer has his own way of designing websites.
Choosing A CMS (Content Management System)
The article offers comprehensive advice on choosing a CMS that would be both search-engine friendly and suit your personal needs. Learn how to choose the right stuff!