id33b1: The hubze Blog

miercuri, 15 august 2012

The hubze Blog

Posted: 14 Aug 2012 06:19 PM PDT

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

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

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…

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

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.

Here are only some of the proximity issues above..

Phew, what a mess!

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

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…

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 with 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.

Get this textbook!

The Non-Designers Design Book, by Robin Williams

If you want to get the most from the Hubze Hangout Design Courses, I highly suggest you purchase this book. This is the basis of where I derive my lesson plans, and it’s just an all out awesome book, written for exactly this type of audience.