Principles of Design: Proximity

Ballerina Proximity in design simply means that objects near each other are seen as a unit. It really is that simple and it’s something you see every day. On your web page or your business card, related information is placed closely together and it forms a visual unit.

Often when people are getting started with design, there is a temptation to throw everything on the page and fill up every square centimeter of space with type and images. However, it makes information difficult to digest and really doesn’t look good.

Using the principle of proximity, you’ll find as you group those items that have something in common, and separate those items that don’t, a clear visual hierarchy stands out on the page. And that’s what proximity is all about. Let’s look at a few examples.

A practical example is a list, for example a sidebar in a blog. Blog sidebars generally consist of lists such as categories, links, and recent posts.

The image below shows two lists of the same items. On the left, it’s difficult to wade through all the items as they are equally close together, while on the right you see instantly that certain items fit together logically.

Proximity1
We can take our list further with the law of proximity and create more logical groupings and put space between the items that shouldn’t be grouped together.

Proximity2

You can now easily see that within each section of the list there are sub-sections. Even if you knew absolutely nothing about the contents of this list, you can see that some items are in close proximity to each other, implying that they are related somehow.

I’ve applied another design principle, contrast, in order to make the headings stand out and attract the eye. Even from that simple example you can see that proximity makes a page become more organized. The white space in between the sections is part of the design and organization too.

To give you another example of how your design can be improved, let’s take a look at a home-made flier for the Bolshoi Ballet. We’ve all seen fliers that look a little bit like this one.

Flier1
There is a lot of text on the page, there is some terrible clipart which really doesn’t help and there are bits of text floating diagonally at the top of the bottom desperate trying to catch an eye. It’s hard to see at a glance information such as where it’s on, what it’s about and the small images are distractions rather than useful design elements.

To improve this design I first of all separated out the information into logical groups.
1. Name of event and artist
2. General info about the event
3. Where it’s on and how much?

Then I searched for an appropriate eye catching image to add to the design. No one design principle works alone and here I’ve applied the alignment principle so all the text runs the same width from left to right as the ballerina’s outstretched legs. There is a strong margin on each side of the flier. The dark blue in “Swan Lake” and the ticket information was sampled from the ballerina’s dress.

Flier2

Ballerina Image Credit: Ballet.co.uk

This flier won’t set the design world alight, but it is an improvement on the original using proximity, alignment and contrast. It’s easy to find the information and it’s certainly a little more appealing to the eye. 

To sum up, the main purpose of proximity is to organize information. You should allow plenty of white space around text and other elements so that you can really see the effect of grouping items together. Keep your eyes peeled when reading magazines, fliers and websites and look at how other designers use proximity and please feel free to share links to designs you like.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Wardrop

    Cool little article. Design principles are always useful things to know. No matter how good a designer you are, sometimes just being able to label certain design principles and patterns, can make designing that much easier. I know that sometimes when I design something, I often get scenarios where an element just doesn’t quite look right. By referring to check list of common design principles, I imagine it would save me quite a lot of time in fixing the visual quirk.

  • Disgruntled

    This article is a little basic – who is it aimed at?
    Gestalt psychology theory (of which the principle of proximity is a part) is one of the first things you are taught in an art foundation course (based on the original Bauhaus model). I can’t believe anyone calling themselvs a designer would need to follow a checklist – this is design by numbers! Surely proper training negates the need for that.
    And the re-designed flyer isn’t much of an improvement: the grouping is not significantly clearer; and the text has been made smaller, set white-on-black and force-justified, thereby making it less readable. The author said in their introduction to the series that no design principle works alone, so it would be good to demonstrate that in the examples.
    Take a look at Gestaltism here, if you’re interested in a more detailed description of what occurs in natural perception – http://ow.ly/FO3G

  • php_penguin

    The flier misses out the information regarding how to order – the first may look horrid but it’s going to get more sales just by virtue of telling people how to actually buy the damn tickets!

  • http://www.laughingliondesign.net Jennifer Farley

    Hi Wardrop, thanks for the comments. I’m glad you found it useful and that is exactly what I was aiming for, just for people to be able to put terms and think a little bit about how the information goes together.

  • http://www.webdesign-gm.co.uk/cheltenham-web-design.php TomBradshaw

    I always take great care over how much white space and leading I use on my websites – even measuring it to the pixel in photoshop so it is perfect. Maybe I’m going over the top – I just think it makes a real difference!

    • http://www.laughingliondesign.net Jennifer Farley

      Hi Tom. Yes I’m exactly the same way over pixels!

  • Henk Wijnholds

    Gestalt laws of proximity and good continuity are both really underestimated tools to organize information and at the same time keeping designs simple. Often designers start with the wrong tools to organize data, with cluttered and complex designs as a result.

    You can’t mention these basic theories too many times, so a big hurray for this piece. :-) Perhaps my piece is a nice addition to this yours: Proximity and continuity laws for simpler designs’.

  • http://www.magain.com/ Matthew Magain

    Really great stuff Jennifer, an excellent example of well-explained theory backed it up with a real world practical example. Not sure why Disgruntled thinks that SitePoint readers have all attended an art foundation course?!

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks Matt.

    Thanks Henk. I enjoyed your article and I’m with you 100% on the idea of simplicity. Keep it simple is my mantra!

  • SEO India

    nice web design blog, this website color theme is more attractive.
    I Like it

    Thanks
    Spink ITES

  • http://www.lbrbsolutions.com Dorsey

    I’m an engineer, so my graphical and artistic skills are limited, to say the least. However, applying Robin Williams’ (the author, not the actor) CRAP principals have gotten me out of many tight situations. CRAP is her acronym for: Contrast, Repetition, Alignment, and Proximity. You could also use CARP, but the former is funnier and easier for an engineer to remember.

    After reading her books and recalling the acronym, I can usually create something that doesn’t fully betray my engineering background even if it won’t pass artistic review. I just can’t seem to master the color wheel, but there are plenty of people who have and are also very gracious in offering help when I need it.

  • http://www.laughingliondesign.net Jennifer Farley

    Hi Dorsey
    Yes, I love Robin Williams books and I use them in the classroom. She’s a brilliant teacher and really simplifies terminology (such as CRAP!!).

  • ChrisR

    Good piece, but I do have to point out that your example with the lists actually doesn’t use proximity to its best: You have the large heads floating equally between each list. By that I mean that there is the same vertical distance above and below the heads. To truly draw on the strength of proximity, the head should be vertically closer to the list it heads (the list below it) than to the preceding list.

    I find this “floating heads” problem quite often all over the web, so it’s not just you.

  • summer

    I actually liked your post! I’ll look forward to your next blog entry! good job!