proximity

MSPTC_Logo_small.jpg


By Qingmin Zhang

Definition of Proximity

Proximity is one of the key principles within Composition and Layout. Proximity requires that items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

Very often in the work of new designers, the words and phrases and graphics are strung out all over the place, filling comers and taking up lots of room so there won't be any empty space. There seems to be a fear of empty space.

When pieces of a design are scattered all over, the page appears unorganized and the information may not be instantly accessible to the reader.
The Principle of Proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits.

Items or groups of information that are not related to each other should not be in close proximity (nearness) to the other elements, which gives the reader an instant visual clue to the organization and content of the page.

Example of Proximity

Postcard


The designer's intention with this dance postcard was probably to create something fun and energetic, but at first glance, can you tell when and where the classes are happening?

By using the principle of proximity to organize the information (as shown below), we can communicate immediately who, what, when, and where. We don't run the risk of losing potential customers because they give up searching through the vast field of slanted text.

Don't feel like you have to somehow portray "dancing" (in this case) through your design. At this point, if your choice is between clear communication or amateur design, choose clear communication. Upgrading your design skills is a gradual process and begins with clear communication.

example 23
example 23

example 23b
example 23b

Mini-Poster

You're probably already using the principle of proximity in your school work, but you may not be pushing it as far as you could to make it truly effective. Really look at those pages, at those elements, and see which items should be grouped together.

The person who designed this mini-poster typed two Returns after each headline and paragraph. Thus the headlines are each the same distance from the body copy above and below, making the heads and body copy pieces appear as separate, unconnected items. You can't tell if the headline belongs to the text above it or below it because the distances are the same.
There is lots of white space available here, but it's all broken up. And there is white space where it doesn't belong, like between the headlines and their related texts. When white space is "trapped" like this, it tends to visually push the elements apart.

Group the items that have relationships. If there are areas on the page where the organization is not perfectly clear, see if items are in proximity that shouldn't be. Use the simple design feature of space to make the page not only more organized, but nicer to look at.

If I do just one thing to this piece, if I move the headlines closer to their related paragraphs of text, several things happen:
  • The organization is clearer.
  • The white space is not trapped within elements.
  • There appears to be more room on the page.
I also put the phone and email address on separate lines - but grouped together and separated - so they'll stand out as important information.

And you probably noticed that I changed the centered alignment to flush left (that's the principle of alignment, as explained in the next section), which created more room so I could enlarge the graphic.

(outside content external websites)


  • example 24
    example 24
    example 25
    example 25


Illustration with Relevant Visual Elements


Proximity and Repetition


One of the most critical decisions of designer makes is where to place design elements. Proximity is the position and space given to the placement of elements in a composition. Proximity determines the placement of elements together and apart from one another. Controlling the relative size and distance from one element to another, based on common increments or shared attributes, also establishes visual continuity and aesthetic harmony. Proximity functions in two basic ways. First, repetition follows a regular pattern of related or juxtaposed elements. You also can repeat elements that vary in size, shape, color, texture, or orientation. Second, counterpoint placement of elements is a dynamic arrangement of differing elements. Most design is the art of achieving unity with a variety of different typographic and pictorial elements.
(content from coursework )

Summary of Proximity


When several items are in close proximity to each other, they become one visual unit rather than several separate units. Items relating to each other should be grouped together. Be conscious ofwhere your eye is going:

  • Where do you start looking?
  • What path do you follow?
  • Where do you end up?
  • After you've read it, where does your eye go next?

You should be able to follow a logical progression through the piece, from a definite beginning to a definite end.


The basic purpose


The basic purpose of proximity is to organize.

Other principles come into play as well, but simply grouping related elements together into closer proximity automatically creates organization. If the information is organized, it is more likely to be read and more likely to be remembered.

As a by-product of organizing the communication, you also create more appealing (more organized) white space (designers' favorite thing).

How to get it


  • Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops.
  • If there are more than three to five items on the page (of course it depends on the piece), see which of the separate elements can be grouped together into closer proximity to become one visual unit.

What to avoid


  • Don't stick things in the corners or in the middle just because the space is empty.
  • Avoid too many separate elements on a page.
  • Avoid leaving equal amounts of white space between elements unless each group is part of a subset.
  • Avoid even a split second of confusion over whether a headline, subhead, caption, graphic, etc., belongs with its related material. Create a relationship
    among elements with close proximity.
  • Don't create relationships with elements that don't belong together! If they are not related, move them apart from each other.

    (outside content external websites)


Resources:


Exploring the Elements of Design by Poppy Evans and Mark A Thomas

http://nhsdesigns.com/principles/proximity/page11.php