Okay, so I got the following e-mail: Dear Mr. Sothy, how come whenever I let my enclave of monkeys design my websites for clients, I get really angry clients. I was so enthralled by this sort of experimentation and sheer enthusiasm that I thought I’d give explaining rationalism and design another try and instead of force-feeding you grid based design info, I’d more or less try to airplane it in (or choo-choo it in if that’s more fun for you).

There is a reason why the apes are enthralled by the monolith in the beginning of 2001. It’s because it was so angular and the constraints it represented were ripe with design possibility. Why stringing four of five monoliths in a row would yield some fine column like action in which to place content. Grid units could become more, content could extend in rational forms. Damn you apes you knew it all along. Now, a little history of the grid and why the ancients still know more about it than you and I.

A (very) Brief History of Grids & Systems

When you take a set of intersecting vertical, and horizontal axis, and slam them together in some form, you usually end up with a grid. If you don’t, you’re doing something terribly wrong. The grid you make should ideally make life easier for the person viewing content within the grid. You can see grid based design everywhere. It’s so prevalent that one may gloss over it and not realize that every sign, roadway (unless you’re in Rome…or Japan for that matter) or menu is designed to guide you with grace and ease. People orient themselves on grids. Grids create rhythm which guides how one passes over a set of content. There are different types of grid systems that have evolved over history. For example:

• Map grids & Roadways
• Building layouts
• Page Layout Grids
• Typography grids

Canons are awesome little tidbits of rules that will set you down the righteous path. You can’t mention grids without uttering the words ‘print and page design’. The page is a perfect example to think about grids because you have a set canvas size. When placing text, generally keep in mind placing everything in certain proportions that in relation to each other are pleasing….oh WAIT you don’t HAVE to. Looks like some folks way back have already done the majority of mathematical tinkering involved. Van de Graff (possibly the same guy responsible for making that generator thing that makes your hair frizz) has laid out some proportions on how to subdivide a page so it generally looks pretty. Other folks have taken this even further. For example, The Golden Ratio is one of these canons. We’ll send you to links that explain it far better. You don’t have to know these specially, but take heed to the roots. The mathematics behind these deserve their own post… For now, just understand that there are rules to building pleasing grids. These rules are never absolutes, but general guidelines that work in different mediums. Now websites are an entire different medium than paper. Our canvas changes…changes over the years, as monitors get cheaper, better, etc. We can go vertical, horizontal, or try and do something clever and just go with Flash…just kidding, don’t hurt.

Frameworks & Constraints

When developing something such a website or print-ad, brochure or letterhead, it’s very important to consider you canvas as the first set of constraints you have. Constraints are important because they help you define and build within your concept with rules. Generally one can take a canvas area and subdivide it subdivide into frames. Laying out a grid and understanding ratios can help you subdivide it in ways that will lead the eye, be aesthetically pleasing, and help form and function dance together merrily and not hold each other up in drunken stupor down some grimey alley.

Grids will act as a framework to prop up all your design

The importance of constraints in design can never be downplayed. Defining constraints, like grids, or what your client wants, helps you build a set of bounds from which you can design within. Without these bounds would be utter chaos if you don’t know how to restrain yourself. Luckily, several folks have already given some hardy information on these constraints. Next post: Okay already, show me some practical stuff