Proximity: Design Principles Part 2

Design Principles 2: Proximity
This article was originally written by me for Hubze, a former Social media news and tutorial source.

Welcome to lesson 2 of the Intro to Social Media Design: Proximity.

Proximity is a very simple principle to understand. The idea behind it is to position elements that are related on a page close together.

That’s it — if pieces of your design logically fit together, put them physically close to each other. If two elements don’t relate directly to each other, don’t put them close to each other. Can’t get any more straightforward than that.

When used correctly, proximity keeps your design organized, and drastically improves reader engagement and retention. Proximity can be the principle that determines whether or not your design is communicated effectively, so, yeah, it’s kind of important.

Proximity in action

We all use proximity in our daily lives. We group items on a shopping list close together, we put image captions directly under an image, and we separate to-dos on our calendar into day and night sections. We know how to use proximity like we know to put a period at the end of a sentence…that isĀ until we start designing on an empty canvas.

For some reason, new designers (myself included) have a fear of whitespace. Whitespace is simply the space on a page that is not occupied by an object, and apparently, comes with an “avoid at all costs” warning from our subconscious. Knowing how to embrace whitespace and logic is the key to using proximity effectively. Let’s see an example.

Example email header with bad use of proximity

Bad proximity email header

This may not look terrible at first, but it’s a bit scattered and unorganized. Examining this for proximity, we notice at least 3 issues.

  • Elements are distributed into all 4 corners of the design (an extremely common rookie mistake)
  • Related items like the individual avatarsĀ and descriptive information are spread out across the canvas
  • It takes about 6 or 7 eye movements to consume the entire message

bad email header explanation

Email header with better use of proximity

Now, let’s look at the same content, only this time we will group the related items together…

Good email header

The result is a cleaner design and fewer eye movements necessary to digest the information.

Good proximity explanation

Pretty Jewelry, ugly Proximity

Let’s take a look at a more in-depth example. Below is a screenshot from a jewelry website I found on the web. As you can see, there are some serious issues going on here.

Bad Proximity

Here are only some of the proximity issues above.

Bad proximity explained

Phew, what a mess!

Ok, now applying the proximity principle, let’s see how we can fix this up to be much more readable…

Better proximity example

Much better, right?

Once again, by simply grouping related items together, we automatically end up with a more organized and easy-to-digest design. Here’s what I did…

Better proximity explained

How to apply proximity

Be Aware

Now that you’re aware of the power of proximity, how can you use it in your own designs? The first step is simply being aware. We know what items should be grouped together, now we have to consciously reflect that in our designs. By double checking your designs for proximity, you’ll solve an overwhelming amount of your layout issues.

Give it the eye test

Design is still all about communication, and communication means conveying information in a specific way to your readers. Since our eyes are the tool that we use to take in information, our designs must guide our eyes in the correct direction.

Map out what the most important piece of information in your design is, followed by the second, then the third, and so on. These items should be placed in proximity to each other so that your eye follows the path from most important to least important.

To test, try squinting your eyes while looking at your design, and see where your eye wants to go. If it follows the correct progression, you’re good to go! If it continuously wanders around the page, then you probably need to work on your proximity.

Proximity is one of the most simple principles of design to understand, yet one of the most essential to communicating effectively. I hope after reading this, you notice many examples of the proximity principle in your daily routine. Whether you notice a good use of proximity or bad, as long as you’re aware of it, you’re on your way to mastering this principle.

Read part 3 of the series, Learning Alignment in Design

Read part 4 of the series, Learning Contrast in Design

Read part 5 of the series, Learning Repetition in Design