Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

Principles of Design - Proximity

This is one of the Principles of Design.
by

Allison Longcrier

on 12 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Principles of Design - Proximity

Proximity
Proximity
Not only is this page visually boring (nothing pulls your eyes in to the body copy to take a look), but it 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.
Proximity
The designer's intention with this dance postcard was probably to create something fun and energetic.
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.
Proximity
If we move the headlines closer to their related paragraphs of text, several things happen:

1. The organization is clearer.
2. The white space is not trapped within elements.
3. There appears to be more room on the page.

We then 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 the alignment that was centered is now changed to flush left, which created more room so we could enlarge the graphic.
Proximity
Proximity is really just a matter of being a little more conscious of doing what you do naturally, but pushing the concept a little further. Once you become aware of the importance of the relationships between lines of type, you will start noticing its effect.

Once you start noticing the effect, you own it, you have power over it, you are in control.
Proximity
Principles of Design
is nearness in space,
time, or relationship.
Very often in the work of new designers, the words and phrases and graphics are strung out all over the place, filling corners and taking up lots of room so there won’t be any empty space.
When pieces of a design are scatted all over, the page appears unorganized and the information may not be instantly accessible to the reader.
Proximity
Would you like to look at a menu like this?
Proximity
In the previous example, we still have a little bit of a problem separating the "Starters" and the "Entrees". Let's indent each section - watch how the extra space defines these two groups even further, yet clearly communicates that they are still similar groups.
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.
Proximity
Rarely is the principle of proximity the only answer to a design. The other principles are intrinsic to the design process and you will eventually find yourself using all of them.



In this example, you can imagine how all of the other principles would mean nothing if I didn't first apply the appropriate spacing.

Before
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:

1. Where do you start looking?
2. What path do you follow?
3. 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.
Group related items together.
Move them physically close to each other.
This makes the items into ONE cohesive group.
The items on the top are close in proximity to each other, implying a relationship.
Now does the text make sense? Notice we did a couple of other thing along the way. We grouped the info that goes together, and changed the font to help draw the eye, etc.
CD ROMs
CD ROMs
Children’s CDs
Educational CDs
Entertainment CDs
Laser Discs
Educational
Early Learning
Language Arts
Science
Math Teachers Tools
Books
Teacher Tools
Videos
Proximity
Proximity
Hardware & Accessories
Cables
Input Devices
Mass Storage
Memory
Modems
Printers & Supplies
Video & Sound
Items not related should not be
close to each other.
By looking at this list you would assume that everything goes together even if they are NOT supposed to be together.
Proximity
In a design (as in life),
The proximity, or physical closeness implies a relationship.
CD ROMs
Children’s CDs
Educational CDs
Entertainment CDs
Laser Discs

CD ROMs
Teachers Tools
Books
Teacher Tools
Videos
Early Learning
Language Arts
Science
Math

Educational
Hardware & Accessories
Cables
Input Devices
Mass Storage
Memory
Modems
Printers & Supplies
Video & Sound
Now, you can see what parts of the list are supposed to be together. It is so much easier to make sense of the information.
For instance, how many
readings are in the series?
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.
Proximity
In this example, the biggest problem, of course, is that all the information is one big chunk.

Before trying to design with this information, write out the separate pieces of information that belong together; group the elements.

Once you have the groups of information, you can play with them on the page.
What else could we do to make it easier to read and understand?
But take them one at a time-
ALWAYS start with proximity.
All the principles applied…
After
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 (a designers' favorite thing).
The basic purpose of proximity is to organize
Definition:
Full transcript