Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles
Grouping

Grouping similar elements helps the brain quickly decode a page layout.

Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping.

The power of proximity

The simplest way to associate a number of elements is to group them together.

What grouping does is make similar things appear similar.

That way, the scanning eye can decipher a title (for example) and immediately associate that title with all the objects around it. By making similar things similar, grouping makes different things appear different. "Why are the objects in that group instead of the other group..? They must be different."

2D design uses a range of grouping techniques, from paragraphs and margins to navigation bars and clustered form elements.

As with other design tools, grouping with proximity relies on contrasting forces, in this case whitespace. If all elements are closely-spaced, proximity becomes less effective.

Simple example

Jakub Steiner icons These icons on designer Jakub "Jimmac" Steiner's site are clearly grouped into 2 sets using proximity, and subtle containment.


Grouping problem

Buttons grouped too closely

Grouping needs whitespace, its opposing force, to exist. These navigation buttons are grouped so closely together, that the buttons and labels are equidistant, which would definitely confuse users.

Grouping in form elements

Example of grouping in form elements
In this form, it's clear what each of the 2 radio buttons means ('Normal' & 'Simplified'), due to the proximity of each button with its label.

It's also obvious which field has the error in it, because of proximity.

Compare with what happens when I mess up the proximity.

Same form with grouping all messed up

All that has changed is the spacing between elements, and the form is suddenly really hard to interpret.

Several groupings on a page

This example uses grouping and whitespace very effectively to identify related elements:

California Oak Mortality

Here's the same screenshot, with groups marked on

Top navigation works in an unusual 3x3 grid (also linked by style and alignment)

Left column shows 'other useful links'. They are grouped because there is more white space above and below the group than there is between the elements

The bulleted list is naturally grouped, as lists are normally padded with white space (also benefits from stylistic and alignment grouping)

Top ^ Next topic »
Comments
Nice work
Nick W - 08:30 on 13 Aug 2004
This is a wonderful series. I am not a designer, but I feel like I understand a lot more about the why of design now. This concept, especially, has proven incredibly helpful to grasp.
Meitar Moscovitz - 08:54 on 10 Sep 2004
good examples..perhaps mentioning the gestalt principles at begining will be a good idea.
ashutosh - 12:05 on 12 Oct 2004
Thanks ashutosh. What gestalt principles are you referring to?
Ben Hunt - 12:25 on 12 Oct 2004
Gestalt Laws of Perceptual Organisation:1) Law of Closeness. Elements that are close to each other are related.2) Law of Enclosure. Elements that are framed together are related.3) Law of Similarity. Elements that look the same (say, in a similar color to each other) are related.4) Law of Connectivity. Elements connected together (by a line, maybe) are related.You already outlined laws one and two above. And great series, it's helped me smooth out some of the kinks in my information architecture.
Desi - 01:56 on 22 Oct 2004
Great info Desi! I'd say that 'Rhythm & Repetition' is in line with your #3. The repeated feature could be spatial, colour, style etc.. Connectivity - yes, I get that. Of course, alignment is connectivity with an invisible line or axis, isn't it?
Ben Hunt - 02:33 on 22 Oct 2004