Each page on a blog holds a number of different sections. Each section has a distinct purpose, for example; the title gives a name, and the blogroll gives a list of links. For all of these goals to be fully achieved, each section must be clearly marked out, and then distinguished from its surrounding sections.

Often the most effective way of doing this, is simply through understanding the concept of proximity (closeness). In normal terms:

If a number of objects are physically close together, the brain will classify them as a single group.

To take an example, look at the following image of 4 copies of the Pro Blog Design logo:

Now if we rearrange those logos, so that they are in close proximity with each other, you will see that they no longer appear as 4 separate logos. Instead you see a single set of logos.

How Can You Use Proximity In Your Blog?

Proximity should be used to define the different sections of your blog. Elements of a certain section should all be positioned close to each other, and separate sections should have ample space between them. This applies to two areas in particlar, the sidebar and posts on a home/category page.

The Sidebar

Every blog sidebar is built up of distinct sections, e.g. different widgets and links. Proximity should be used to space out the different sections. For instance, on this blog, one area of the sidebar contains a search bar with Google adverts beneath it. The search has no relation to the adverts, and so I have added a line of empty space between the two, to show the distinction.

Another area contains 3 elements, all related to subscriptions. As they are all related, the elements have been placed close together, allowing the user to distinguish these 3 things as a single group.

Post Lists

Many blogs use excerpts to display posts on their homepages. The trouble with this is that in many designs, the list of excerpts blend into one another, producing a single group of posts, instead of drawing attention to the individuality of each post. A method of clearly distinguishing between where one post ends, and another begins is needed.

Graphical effects and extravagent headlines can be used to achieve this, but proximity is perhaps the best method. By adding a line or two of empty space between the end of one post/excerpt, and the beginning of the next, you can clearly break up your stream of posts into a list of individual entries.

Now look at your own blog's design. Can you clearly block out the different sections in your head? Or are they too close together, meaning that a little spacing might be needed?

PS - Proximity has been used in the formatting of this very post. Let me know if you can spot where!

Read something useful? Subscribe!

Find other posts tagged with: Design, Eye Movement, Proximity, Usability