The Principles of Graphic Design: How to Use Proximity Effectively

proximity example
In this month’s design tutorial, we continue to explore the principles of graphic design. I have introduced you to the theories of hierarchy, emphasiscontrastbalance and repetition. This month we explore proximity. Let’s get started.

Featured Image: Galleri Tema by Daniel Siim licensed under CC BY-NC 3.0

What is Proximity

The principle of proximity is simply the process of ensuring related design elements are placed together. Any unrelated items, should be spaced apart. Close proximity indicates that items are connected or have a relationship to each other and become one visual unit which helps to organise or give structure to a layout.

White Space is Good

A very typical mistake beginner designer make is to scatter elements all over the page to ensure any gaps are filled. This often results in poor proximity as related items are not grouped — individual elements are usually spaced apart which makes it hard for the reader to determine relationships and connections of information. Don’t be scared to group related items together and then use large areas of space to add organisation and structure to the layout. Check out my earlier article on space for some ideas.

Examples

Probably the best way to get your head around using the principle of proximity is to review how it has been used in everyday designs. Let’s take a look.

Hype Type Studio

Hype Type Studio by Studio Network licensed under CC BY-NC-ND 3.0

Proximity Example

This is a very simple example which highlights great use of proximity and white space. Take note how the studio name (Hype Type Studio) and it’s descriptive text (Graphic Design + Art Direction) are grouped together. This makes perfect sense as these three lines all have a connection to each other — the name of the business and what the business does.

Now look at the second paragraph — this contains all the contact information about the business. Again, this is great use of proximity as this information is all related.

Finally, see how much white space is used in this layout? Works well, doesn’t it? Don’t be afraid of white space!

Galleri Tema

Galleri Tema by Daniel Siim licensed under CC BY-NC 3.0

proximity example

This is a great example of using the principle of proximity with both type and graphics. The type is well organised using relationships such as the name of the movie (A Clockwork Orange) and the director (Stanley Kubrick). In addition to this, take note how most of the graphical elements are grouped together and positioned on the same side of the layout.

Pure Magazine

Pure Magazine by Patrycja Dulnik licensed under CC BY-NC-ND 3.0

proximity example

In this magazine example, I wanted to showcase how images should be grouped together when working on a page layout. Many beginner designers will spread the images throughout the text; however, this only interrupts the flow of reading. Again, use the principle of proximity to group and separate both images and text.

Final Words

And that wraps up this month’s design tutorial regarding the principle of proximity.

Check out the other posts in this series:

The Principles of Graphic Design: How to Use Repetition Effectively
The Principles of Graphic Design: How to Use Balance Effectively
The Principles of Graphic Design: How to use Contrast Effectively
The Principles of Graphic Design: How to use Hierarchy and Emphasis Effectively