What Is Proximity in Web Design?

Items don't have to be touching to be in proximity to each other.

Proximity refers to how close two items or elements are to each other within the entire page. Web page designers place items in proximity to each other if they are related or need to be grouped together for visual reasons. Reasons for doing this include increasing the readability of the Web page, emphasizing the connection between items or helping an item to stand out..

Grouping

In your Web page design, group things together that go together in some way. Many designers will group several display ads together rather than spreading ads out all over the page. Small, short items are grouped into a sidebar, leaving the main column free for longer content.

Minimalist Design

A minimalist design is simple and basic. It uses lots of white space and has an uncluttered look about it. Use proximity in such a design to reinforce the relationship between certain elements. Group all of the data related to a blog post in one location, such as author's name, date posted, tags and categories. Use similar fonts and colors to further emphasize the similarity of this information.

Separation

The opposite of proximity is separation, and the two go hand-in-hand when it comes to designing Web pages. Use white space or other graphic elements to separate items that don't belong together. Put more white space above a headline, to separate it from what's above it. Isolate a single item in the middle of lots of white space to draw attention to it. When you separate a group or series of items from other elements on the page, you draw attention to these items because of their proximity to each other.

Examples

Examples of the effective use of proximity in Web design include: Put less space below a heading to bring it close to the text under it; place a caption and photo close together so it's clear they are related; organize your navigation menu so that categories that are related are close together compared with those that are unrelated; consider using a hierarchical menu to reinforce the relationship between various categories and sub-categories.

References

• Sitepoint: Principles of Design: Proximity. Jennifer Farley. November 2009.
• University at Albany: Basic Web Page Layout & Design.
• Web Design Library: Proximity: How to Effectively Organize Your Pages. Jamie Kiley. November 2004.
• Webdesigner Depot: The Principle of Proximity in Web Design. Louis Lazaris.