Grouping elements for clear web page design
Grouping similar design elements on your web page helps the user quickly decode a web page layout.
Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping.
Grouping similar design elements on your web page helps the user quickly decode a web page layout.
Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping.
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.
These icons on designer Jakub “Jimmac” Steiner’s site are clearly grouped into 2 sets using proximity, and subtle containment.
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.
All that has changed is the spacing between elements, and the form is suddenly really hard to interpret.
This example uses grouping and whitespace very effectively to identify related elements:
Top navigation works in an unusual 3×3 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)
Do you love our approach to crafting simple & effective web sites that just work for people?
We'd love to hear about your web strategy.
Contact one of our team today!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
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.