Grouping of Similar & Related Elements
What is grouping?
Grouping is when items are placed in close proximity to each-other to show a connection between them. The purpose of this is to clearly show relationships between different elements. In two important studies by Niemela (one with Saarinen in 2000, & one with Saariluoma in 2003) showed that grouping items can have an very real effect on user performance on an interface. In the later study it was particularly shown that when items are grouped semantically they it has an even larger effect on performance. To quote, "The main morale of these experiments is the importance of visual information chunking in interaction design."
How do we choose what to group?
One can look at studies like those done by Bernard or Di Nocera to indicate that there is some natural semantic grouping for some web elements. These groupings can most easily be classified as content, navigation, title banners, ads, and forms. With in content (due to the large amount of space and information that this can occupy) items can be grouped based on semantic categories suggested by the domain of the content. For instance, if I had a page about photography, I might choose to group my content by digital or analog, color or black & white, or maybe I'd divide into landscape, still-life, buildings, and people. What ever my choice it would be guided by what the content is and semantic categories that already exist with in that domain.
How do you actually group items?
This is done by using techniques such as proximity, similar color, borders, headings, etc. The farther two things are from each-other generally the less related people see them as being. The more different in terms of style two things are once again the more different they seem. If a section is blocked out in some why it is assumed that all the items in the block are related in some way. This is just a start, there are many design guidelines available to further explain these techniques.