Proximity

PROXIMITY


The Principle: Group related items in close proximity. For example, group a header with its following paragraph more tightly than with the preceding paragraph. When you lay out numbered and bulleted lists, consider grouping them so that there is more space between the items than within elements. Think about how to bring related graphics objects together in ways that make them appear to be a group.

Common Mistakes: The number one beginner's mistake is to fill up all of the available space. Art historians say this is evidence of horror vacui, fear of negative space. If you're used to publishing in print, forget the old rules about cost; page space is cheap on the web. Make it your friend.

  • Proximity refers to the distance between elements on a Web page and ......
  • how the elements relate to one another.
  • These elements include text, navigation, headings, and so on.
  • Generally speaking, elements that are close together appear to have a stronger relationship than elements that farther apart.
  • Remember the Contrast rule when considering proximity.

Touch here to learn more Touch to learn more Touch to learn more Touch here to learn more Touch here to learn more Touch here to learn more

Fairly straightforward
Fairly straightforward
Much easier to follow
Proximity makes it much easier to follow.
This recipe card includes all the details that one might need to prepare the food, but the ingredients are set just above the preparation instructions, and the whole card is generally unappealing. By contrast, the use of alternate fonts and colors works to separate the headers from the rest of the document. Notice how the ingredients have been moved away from the instructions -- the blank space in the card is used to separate the directions from the ingredients.