Looking back, I realize that, yes, much of it was essentially chance. Or trying to make the columns the same height. Or what the designer had eaten that morning. But not all sites were done this way, and the sites that had other reasons for grouping were usually better.
Then I looked at the code for one of my favorite sites, and I was shown The Way: describe semantic containers.
By describing the containers semantically, instead of geographically (ie:
#user_context instead of
#left_gutter) you can give yourself a map and create a layout that’s both easy and logical.
For example, on my site, I wanted to break the footer into sections. But where to put the copyright notice, which had previously been centered on the bottom? Easy: put it in the
#footer_legal section, with the other legalese.
Another one of the four footer columns was described as
#footer_standards, but then I wanted to add a link to an "about the site" page, which is not a coding standard. Instead I changed the column to
#footer_techy and included all the technical links, including standards and site-information, divided into sub-sections.
logical design is ease of use
By describing semantically, you not only make your own design choices easier, you make navigation easier for your users.
Of course, this isn’t limited to design elements within a page. On a larger scale, you can use semantic groupings to make user-interaction easier. As Eric at Internet Duct Tape suggested, you can use mind-maps to model user interaction, and also to model site organization.
So pay attention to your content. Use semantic
classes to your, and your users’, advantage.