Navigation

The Principle of Proximity in Web Design

Design, How To, Web Design | Jan 26, 2010

Recently I picked up an old design book that I hadn’t touched in a while, and it reminded me of a design principle that many of us put into practice probably only subconsciously, if at all.

The book deals with designing for print, but I thought it would make a great topic to discuss in the context of web design.

The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.

I’ll discuss details and some ways in which this can be implemented effectively, but this definition should suffice for what we’ll discuss in this article.

The correct use of proximity, in conjunction with other design principles, has a big impact on the user experience and, ultimately, a website’s overall success.

 

Don’t Fear White Space

The first step to properly implementing the principle of proximity is understanding the importance of white space in design.

Lack of white space is a common problem in amateur designs. Design is a means of communicating information, and when amateurs attempt to convey a message through design, their natural inclination is to spread out the content evenly to fill the space, without giving much thought to the potential of well-organized white space.

White space can affect the user’s behavior as much, if not more, than the actual content on the page. White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

W3Avenue

Even though W3Avenue’s website above contains a considerable amount of content (with articles under numerous categories, like any design blog) and a series of sidebar ads, it doesn’t overwhelm the user visually.

The generous room in the header and appropriately spaced items in the content and sidebar areas contribute to this clean and organized look. W3Avenue is not doing anything particularly unique with its content, but its design probably contributes to the strong traffic it gets in a short period of time.

So don’t be insecure about empty space in your design. Properly using white space is the first step in implementing the principle of proximity and, thus, making a design more visually appealing.

 

Visually Group Related Elements

White space, however, is just one part of implementing proximity. A design can have a lot of white space, but if items are not grouped correctly, the white space will have little effect, as illustrated by the two business cards below:

Two Business Cards

The card on the left is not cluttered; it has some white space. But the elements are not logically grouped, so the effect is weak.

The reader is forced to scan the card multiple times. The card on the right, however, has a more pleasing visual effect. The reader simply has to glance at it to take in the information (more on this later).

The grouping of elements in the card on the right is also more logical. In the first set of elements we see the company name in large font with the location below it. The second set tells us how to get information on the services provided (i.e. phone number and website address).

This example illustrates the importance of proximity in print design, and a similar idea can be used for elements in web design, as shown in the screenshot below.

Arora Designs

Although Arora Designs’ website is not complex or information-heavy, its use of white space and visual separation of grouped elements are effective. It should be noted here that “white space” does not have to be white; it can be any empty space between elements, regardless of color.

In the case of Arora Designs, although the white space has color, it serves the same purpose of visually separating the header, navigation and content areas.

 

Creating Visual Hierarchy

Using white space effectively and grouping related elements are critical to giving your website a clear visual hierarchy. Of course, the website’s architecture and flow of information are the foundation of effective proximity.

Hierarchy is conveyed by the way in which elements are grouped and sub-grouped.

This hierarchy helps the user understand where they’ve been and where they want to go and, thus, helps to communicate the purpose of the website. A list is a good example of an element that has the potential to communicate visual hierarchy, as demonstrated in the image below:

Lists Show Visual Hierarchy

Just by glancing at the two lists above, without even examining the content, you’ll see that the list on the left has a clear visual hierarchy, showing the relationships between items (indented items are sub-categories of the primary items).

This hierarchy would not be possible without white space (including macro and micro white space). The list on the right is just a random grouping of elements with no seeming relationship or hierarchy.

Implementing this principle on a website with something as simple as an HTML list is easy. The challenge is to use this principle as a guiding factor in the website’s construction from the planning and wireframing stage through to the design.

 

Layouts That Are Easy to Scan and Read

Content that is organized into a hierarchy and logically grouped is easier to read and scan.

Headings, for example, should allow the user to scan by clearly indicating main points. Needless to say, content should be planned from the get-go to reflect an appropriate visual hierarchy; the list above with the indented items is a poor example, because the content does not match the visual hierarchy.

A website that uses proximity in its architecture and design does not overwhelm the user with information.

So, although it is relatively easy to implement the principles of proximity on websites that are light on content, proximity is much more important on content-rich websites.

News websites are good case studies of this principle. Below is a comparison of the Los Angeles Times and the Globe and Mail.

Los Angeles Times

Overall, the LA Times website has a pleasing design mainly because of color choice and typography. But it also has a clean and uncluttered look, especially in the header section.

The logo is big and stands out, contributing effectively to the website’s branding. The object nearest to the logo is the horizontal navigation bar below. Because the navigation bar is dark, it contrasts with the logo.

The text links above the logo are neatly arranged, with plenty of space between the two sections. Left alignment of the content in the header also contributes to the clean look.

Every bit of information in the LA Times header is grouped with related items, except for the logo, which stands alone. Nothing in the header confuses you or makes you wonder where it belongs.

What about the Globe and Mail website, shown below?

The Globe and Mail

The Globe and Mail website has a complex header section that fails to implement the principle of proximity.

The only significant amount of white space is in the center, beside the logo, which accomplishes nothing. Two ads appear in the header, contributing to the clutter. The ads may be necessary for financial reasons, so the problems are understandable.

The biggest problem is the messy section above the large banner ad. There is no clear distinction between elements in that section.

Three dotted vertical lines attempt to separate the area into four sections, but the first separator doesn’t make any sense. In fact, that section would probably look more inviting if those dotted separators were removed.

 

Grids Help With Proximity

One way to group items and use white space appropriately is to start with a grid.

From a cursory glance at both the LA Times and Globe and Mail websites, only the LA Times seems to have based its design on a grid, or at least used grid-based principles in the planning stage. The Globe and Mail’s website shows little evidence of a grid format.

A grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections, and in many cases it forces the designer to implement principles of proximity without even thinking about it.

Below are screenshots from two websites that have employed the 960 grid system. They’re both fairly simple (i.e. not content-heavy like the news websites discussed above), but they show that grids give page elements breathing room, affording each section its own visual home.

Anton Peck
Phil Coffman

 

Lead Users Down the Right Path

One other major benefit of proximity is that it help users navigate a website without unnecessary delays or obstacles. When the primary navigation is clearly separated from the other elements on the page, it will be found instantly and is less likely to be forgotten.

Proper visual hierarchy by way of proximity helps users delve deeper into your website without worrying about where they’ve been or where they’re going.

They’ll always feel comfortable, and they’ll get to the most important sections of your website quickly and efficiently.

Web designers with little or no experience in print design could benefit greatly from the principles that print designers have been putting into practice since years before the web boom.

Proximity is not the only design principle that will help a site be more usable and visually pleasing, but it is an important factor to consider for many of the reasons just discussed.

 

Further Reading


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.


Share this post
<
Comments (no login required)
  • http://www.contentcube.com Marlowe

    Great post. Knowing the basics is what good design is all about.

  • http://www.wearepixel8.com Erik Ford

    I have been doing this for quite some time and still have to remind myself to respect the white space! Whenever I step away from a design mock-up that seems unclear of its focus, I tend to find that the root problem is my lack of properly following an important design principle. White space, proximity, proper use of typography and respecting the grid is more important than gradients and drop shadows, in my opinion.

  • http://www.webbyfreebies.com Webby freebies

    That’s interesting. I stumbled it for you.

    • http://www.webdesignerdepot.com Walter

      Thanks…

  • http://www.sgdoeschwitz.de BigM75

    great stuff

  • http://www.wp-agent.com/ linko

    Excellent article and visuals thanks!

  • http://stephenli.ca Stephen

    weird, your examples are almost exactly like the examples in a design book i’m currently reading for school o_O

    anyways, i agree that understanding proximity and whitespace is one of the biggest downfalls of novice designers

  • Jason

    The Arora Designs site seems to be blatant rip-off of Rareview’s site.

    http://www.rareview.com/

    It could be the other way around, but judging on the quality of their respective portfolios, I doubt it.

    • http://www.impressivewebs.com Louis

      Yes, that is strange. And they both use Flash for the header sections.

      I wonder if it’s taken from a template. Would seem that way. Nonetheless, whoever designed the template did a good job.

      • Chris

        I would guess that Arora is the originator as the flash in the header and layout are more functional design for the idea of “Aurora”. Rareview’s has no functional meaning behind it whatsoever.

  • http://www.taptapdesign.com Igor Ivankovic

    Hey, excellent article, It really is the standard and core of designing with the best regard of usability. Keeping in mind that people can scan the site and make something of of it is very impostant! SO n1 article!

    I know I’m a bit boring, but have You ever seen someone do this kind of comics like I do? If You have tell me cause I want to see! : http://designerscouch.org/show_article/173/tap-tap-adventures-comes-to-designerscouch.html

  • http://www.size43.com Brian Artka

    Ah, yes, a principle from an excellent book.

    C.R.A.P. (Contrast Repetition Alignment Proximity)

    The basics never fail, thanks for reminding me of this gem.

  • Martyn

    Great read and explained very nicely easy to take in

  • http://www.pixmatstudios.com Susan

    Excellent article! Don’t Fear White Space … that phrase is for my =P

  • http://www.psdfan.com Tom Ross

    I think proximity is often underestimated by some designers. It’s one of the ultimate keys to great design.

  • http://www.brightnewmedia.co.uk Bright New Media

    If only our clients would read such books/articles…

  • http://www.stormforcesolutions.com/ Storm Force

    The principles of graphic design and web design are getting closer and closer. This article also has an impact for information architects and those involved in writing reports.

    Many thanks for putting out such a good article.

  • http://milos.milikic.info Milos Milikic

    Great stuff! I would like to see more articles like this! Cheers!

  • http://www.motorstop.asia toyota cars

    The principle of proximity is a basic and important part of website but often overlooked by many designers. great read!

  • http://pelfusion.com Pelfusion

    nice article…i never get fear of white space but my clients make me :)

    • http://gr8pixel.com gr8pixel

      exactly what I’m saying.. but we have to show them with examples how it will make an impact on the design.

  • http://www.weblogixesolutions.com web design India

    Nice analysis, Though the proximity concept is old but it is good for webdesign and much helpful for the website design.

  • http://www.sdc-software.com.mk/ SDC Software

    Great post. Thank you.

  • http://www.jordanwalker.net/index.php Jordan Walker

    It is easy to spot spatially pleasing designs, but for every great site there are 20 terribly claustrophobic pages somewhere else.

  • http://andysowards.com Andy Sowards

    Great read with good examples – I am becoming more and more a fan of white space lately – so definitely embrace it!

  • http://bswall.SYMBIANBLOG.INFO New York Web Design

    Great concept. Beautifully executed.
    Got it right away!

    Thanks for sharing.

  • madeo

    Fantastic!! That’s interesting

  • http://www.jasonagross.com Jason Gross

    Good article. To me the biggest factor in killing proper page spacing and needed negative space is advertising. So many people want to put ads everywhere they can fit them but it really clutters up your pages.

    Really I feel like the news paper websites are a good example of this because their content could be much cleaner if ad space was better placed.

  • http://www.webcertain.com Bryan S

    Good article.
    Though I find it another example of the blatantly obvious, designers should know this stuff subconsciously, hate to say it, would you buy a book on how to walk properly? If you finding yourself having to double check your design process for the likes of proximity all the time, you should consider another profession.

    • http://www.impressivewebs.com Louis

      I think proximity is one of those things that you just need to learn it, review it, and think about it early in your design career, then it becomes second nature. Even children have to “learn” to walk, but once they do, they never look back (literally!).

  • http://www.copyprint-adressen.de Ralf

    Best explanations on web. Thanks for that!

  • http://www.chrispierre.com Chris Pierre

    Great Post!

  • http://blueberrycheesecakebrowie.wordpress.com/ Alessandra

    Great article! It’s always good to remember basic principles.

  • http://goldennetwork.net usa cheap designer

    Great article ! keep up the good work !

  • http://www.greenandchic.com carla

    Remember the ‘white space’ is a great reminder for me. I recently had my website redone to include more white space and now I think I may be cluttering it up again though its hard to strike a balance when it comes to eCommerce sites and selling products. Ill get it right soon enough!

  • http://grafikguru.com grafikguru

    Nice guide you got here especially to newbies on web designing.
    http://grafikguru.com could use a makeover because of this

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Fantastic article, was a nice read. I agree with the LA website article as well.

    Thanks for sharing :)

  • http://gr8pixel.com gr8pixel

    Still there are people who think all the important content should be on the homepage and it shouldn’t have to scroll. I would like to know what would you guys do and how would you explain it to a client when they shoot this as a requirement…

  • http://zdesignstudios.com JP

    Nice collection

  • http://www.christinaleephoto.com Christina

    Great! I was JUST going over these again with my high school classes according to “CRAP” the other day. I was having a hard time finding web resources that accurately illustrated the principles. I can’t wait to show this to my students!

    Thanks!

  • http://www.philcoffman.com Phil Coffman

    Great article and thanks for highlighting my site!

  • http://www.theossi.com Felipe Theossi

    Nice post…
    Thanks

  • http://www.rezyde.com Rezyde

    Great Article! I love coming to your site and getting ideas for web and graphic design. Keep it up!

    • http://www.webdesignerdepot.com Walter

      Thanks!

  • http://www.dmaxonline.com Web design chennai

    I am very interested to make concept orient ads through the design services .. how it will be impliment it..??? reply me soon… meet again…

  • http://www.deshodes.net Web dizajn

    Very nice idea!

  • http://www.redesignyourbiz.com/ Maverick

    i definitely agree to these points and always try to follow these principles.

  • http://www.coffeerocket.com/Segafredo-Espresso-Coffee-s/712.htm Segafredo Espresso

    White space or negative space is a key element in all my designs. Allowing for the areas of interest to settle and live in.

  • http://www.ultimate-design.com Richard Roy

    It can be easy to fall into some design traps, especially when taking an original concept and coming up with a completely new design and layout. I find it’s often easiest to completely remove myself from the original. Copy + Paste text to a new document and trash everything else. It allows a chance to see the content fresh and build new ideas.

    You article is very concise and well covered. I use many of the techniques and ideas you’ve covered as I plan, design and complete projects.

  • http://www.ikandy.co.ug/ Perry

    Interesting article…only thing is “whitespace” seems to be becoming too much of a cliche in web design articles. I’d like to see a different dimension on this…

  • http://www.westfloridacomponents.com Crystal

    Great article – I don’t think that there can never be too much white space on a web site.

    The key point here: White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

    So true.

  • http://www.produktivzone.ch Dave Matter

    Great article. The white space rule should be more popular in today’s webdesign. KUTGW

  • http://carlfinity.com Carlfinity

    My first visit here and I’m already loving this website. Thanks for the helpful post.

  • http://www.designsoftstudios.com Web Designing Services UK

    In a simple way explained a very basic concept. Never thought before about this but must look in new designs thanks

  • http://designrjc.com RJC

    Same author I referenced on my way to understanding more about design. The book I used was Robin William’s Design Workshop 2nd edition. Its a good resource and introduction as well.

    The main underlining theme with design is following the principles of contrast, repetition, alignment and proximity, which you cover here. Glad you elaborated on it further.

  • http://www.absolute-design.co.uk Web Design Nottingham

    Wow. The Grids Help With Proximity section was most useful for me as thus far i have been freestyling. However grids have brought a lot more structure to how i do web design now.

    Thanks

  • http://www.logoinn.com/ Logo Design

    Thanks for sharing such a great stuff, i was just passing by to this post. This blog is really great, i love it.

  • http://www.maksansolutions.com Admin

    Great Analysis and thanks for sharing this wonderful information.

  • http://www.logo-genie.com Sam Pierce

    I agree with you white space guides the user’s eyes it creates contrast with different colors combination and really makes an ever-lasting impression.

    You are spreading designing sence to the industry, i like your designs, color scheme your designer used in it and your creative design are outstanding.

    I’ll appreciate if you can share your “Old Design Book” name.

  • http://www.strafecreative.co.uk/ Strafe Creative – Web Design

    You make a lot of good points in this, especially about the white space. cheers for this

  • http://www.americanlogodesigns.com/ Business Logo

    Web designers often concern themselves with optimizing websites for spiders from Google, Yahoo, and other search engines,

  • Hjonis Hanson

    Great post! I enjoyed the example sites.

  • http://www.bmbcommunicationsinc.com mike neilson

    Good post, I appreciate your post

  • http://interactivelogic.net/ Evan K. Stone | InteractiveLogic

    important principle to keep in mind! thanks for the reminder!

  • http://www.opticalparadox.co.uk Spiritual Web Design

    Effective article! I think I understand these things at a sub-conscious level but hearing them explained out-loud (so to speak) clarifies & reaffirms what I already know. Thanks – Jen

  • http://www.kreditvergleich.net/kredite/beamtenkredit/ Beamtendarlehen

    Very interesting post with good example sites. Lead the users through the website is one of the most important thing for building websites which converts.

  • http://www.logodesignnewzealand.co.nz/ linda logo design

    Very Creative post.It highlights the necessary aspects of good creative artwork

  • http://moobreak.blogspot.com adnan zulkarnain

    Amazing article for newbie like me. Thanks..

  • http://www.cd-key-kaufen.de Keys

    Very nice Post. thx