Layout in Web Design

Layout tools

You can use tools like contrast and spacing to help differentiate elements.

Other techniques are useful for visually associating similar elements.

These techniques are often used in combination – when you group a collection of links, for example, you also differentiate the group from the elements around it.

Techniques for creating associations

Associating elements implies a relationship of similarity, e.g. A, B, C are a group of equivalent ‘peer’ elements.

Groups can be created using any combination of the following mechanisms:

  • Grouping – creating association through placing similar elements together
  • Containment – making one or more elements literally part of another element
  • Alignment – aligning elements along visible or invisible lines
  • Rhythm – creates relationships through repeating stylistic features
About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally. In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at

Comments are closed