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
Layout

The way elements are arranged on screen carries lots of meaning that we interpret subconsciously when decoding web pages.

The relative positions implies relationships on lots of different levels.

The key is to make sure you represent visually the correct relationships.

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:

  • Containment - making one or more elements literally part of another element
  • Grouping through Proximity - is like containment with invisible containers
  • Alignment - aligning elements along visible or invisible lines
  • Rhythm - creates relationships through repeating stylistic features
Top ^ Next topic »
Comments
The links you have under 'Techniques for creating associations' are confusing becuase it breaks the flow of how I've come to expect navigation for this site to be.

For instance, 'Containment' is the first link in the paragraph but isn't the next topic in the navigation. In the navigation 'Containment' is the third topic.

Right now as user I am thinking:

-Should I go to 'Containment' as the author seems to have placed some importance on it by putting a link, the first link, to it in the paragraph?

-Will I lose my train of thought by taking this detour?

-If I do ignore the link this time and just click on 'next' as I have been doing then wouldn't this diminish the effectness of future links in content? I'll just ignore them in the future at the risk of ignoring something that the author thought important.



James - 03:55 on 22 Mar 2005
i was expecting a site that would give me a practical experience on how 2 design a web page,and not just the basic guidelines..!!!
xyz - 06:28 on 11 May 2005
xyz, I created this site because there are already lots of tutorials available on the mechanics of building web pages, but a lack of instruction in how to think web design. I could add tutorials on the mechanics, and may do so in the near future.
Ben Hunt - 09:38 on 12 May 2005
On May 11, xyz complained that wdfs is 'just' the basic guidelines..!!!

Oh for goodness sakes! The word 'just' has no place in describing this excellent tool! WDFS not only teaches  how to think web design, it inspires us to communicate! Thank-you Ben! Wonderful stuff!  
Jodie Turner - 09:46 on 31 May 2005
Indeed, I've read every single page of this, and its filled with information that I've never found before! And I've been looking for a long time now.

Thanks for this Excellent resource, I will bookmark it for future reference, and hopefully development of my website will go smoothly, and it will be easy-to-use aswell.


-Fuzzy
Fuzzy - 10:22 on 28 Jun 2005
I also think this is a great tool. It has helped me to crystalize what I want to do in my website.
Thanks
vmc - 12:18 on 23 Sep 2005