The Four Elements of Good Design for Beginners

by Robin Williams and Scott Tollett          

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 as to the organization and content of the page.

The very simple example below illustrates this concept.  In the list on the left, what do you assume about all these flowers?  Probably that they have something in common, right?  In the list on the right, what do you assume?  It appears that the last four flowers are somehow different from the others.  You understand this instantly.  And you understand it without even being conscious of it.  You know the last four flowers are somehow different because they are physically separated from the rest of the list.  That's the concept of proximity - on a page (as in life), physical closeness implies a relationship.

	In this example, how many separate elements are in the small space?  How many times does your eye have to 'stop' to look at something?
	A problem with the previous card is that not item on the card seems related to any other item.  It's not clear where you should begin reading the card, and not clear when you're finished.  If related elements are grouped together, into closer proximity, the card is organized both intellectually and visually.  And thus it communicates more clearly.

The two items on the top left are in close proximity to each other, implying a relationship.  But should these two have a relationship?  How about the date and the issue information? They should be closer together since they both identify this particular issue.

Notice a couple of other changes, besides establishing the proper relationships:

• changed everything from all caps to lowercase, which gave room to make the title stronger and bolder
• changed the corners from rounded to straight, giving the piece a cleaner, stronger look
• enlarged the airplane and let it break out of the boundary, a common graphic trick that opens up the space

In the first list, there is no way to see the relationships or the organization.  Everything is so close to everything else.  In the second list, visual groups have been formed, and contrast added.

Next