Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Principles of Design: Proximity

This is developed for an introduction to Proximity as a principle of design. It was created by David Navis @ AISG.

David Navis

on 7 June 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Principles of Design: Proximity

Principles of Design: Proximity
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 pieces. what do you see? That's the concept of proximity-on a page (as in life), physical closeness implies a relationship. With that one simple concept, this card is now organized both intellectually and visually.

And thus it communicates more clearly. Does your eye stop five times? Of course - there are five separate items on this little card.
* Where do you begin reading? In the middle, probably, because that phrase is boldest.
* What do you read next-left to right (because it's in English)?
* What happens when you get to the bottom-right corner? *Where does your eye go?
* Do you wander around making sure you didn't miss any corners?
Now that there are two bold phrases, where do you begin?
* Do you start in the upper left? Do you start in the center?
*After you read those two items, where do you go? Perhaps you bounce back and forth between the wards in bold, nervously trying to also catch the words in the corners.

* Do you know when you're finished?

Does your friend follow the same pattern you did? Now is there any question about where you begin to read the card?

Where do your eyes go next?

Do you know when you're finished?
Notice a couple of other changes along the way:
* Everything from all caps to lowercase with appropriate capitals, which gave me room to make the title bigger and stronger.
* Change the corners from rounded to straight, giving the piece a cleaner, stronger look.
* Enlarge the swan and overlapped the edge with it.
* Don't be a wimp. Be purposeful and conscious
about grouping items together this page is visually boring and is difficult to find the information - exactly what is going on, where is it happening, what time is it at, etc. It doesn't help that the information is presented inconsistently. For instance, how many readings are in the series? Group the information together (in your head or sketched onto paper), then physically set the text in groups on the page.

Notice the spacing between the three readings is the same, indicating that these three groups are somehow related.

The subsidiary information is farther away - you instantly know it is not one of the readings, even if you can't see it clearly. It's really amazing how much information we get from a quick glance at a page. Thus it becomes your responsibility to make sure the reader gets the correct information.

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. Source: The Non-Designer's Design Book by Robin Williams 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. If we change just one thing to this piece, 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.

Put the phone and email address on separate lines - but grouped together and separated - so they'll stand out as important information.

The centered alignment was changed to flush left which created more room so I could enlarge the graphic. Observe the changes! Put more space between the separate menu items. One should almost never use all caps because they are so hard to read, change it to caps and lowercase. Make the type a couple of point sizes smaller, both of which give a lot more room to work with so you could put more space between the elements. The biggest problem with the original menu is that there is no separation of information. We really don't have enough room to add more space before "Starters" and "Entrees", but we do have room to make an indent. That extra space under the heading helps to separate these two groups of information. It's all about space.

In the example to the right, you can imagine how all of the other principles would mean nothing if we didn't first apply the appropriate spacing. Chose a more interesting typeface than Times New Roman. Experiment with indenting the descriptions of the menu items, which helped to clarify each item a little further. The simple principle of proximity can make web pages easier to navigate by collecting information into logical groups. Check any web site that you feel is easy to get around in - you'll find information grouped into
logical clumps.

The information on this page is muddled.
Look at the site links just under the title. Are they all equal in importance? In the arrangement above, they appear to be equal in importance - but realistically they're not. Use space to define groups of elements.
Move all the site links into one column to show their relationships to one another.

Set the quotation farther away from the main body copy since it's not directly related.
Use flush-left alignment and made sure each element lined up with something else. Here they are side - by - side The 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 of where 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 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.
Full transcript