Principles of Design: Grids

Columns and rows are your best and most boring friend.

Whether obvious or subtle, everything that you see (that works) has an underlying grid to it. Plopping something here and then balancing it out over there may work occasionally for designers with innate talents, but nothing works as well, as consistently, as picturing the grid.

On the other hand, as someone who is still recovering from a serious and debilitating injury and had to seek assistance with the Social Security Administration, I can tell you that grids are NOT the same as obstacles. From first hand experience I can say that the SSD system requires a guide book at the very least called: How to apply for SSD to even understand what you’re doing and a fairy godmother or father in the form of a social security disability lawyer to guide you through the appeals process if your first application for social security disability benefits is denied. It is daunting to know that only 1/3 of initial applications are approved, but perhaps the applicants didn’t qualify for benefits in the first place. Since I had worked in jobs covered by Social Security and had a medical condition that met the Social Security’s definition of disability and was told by my doctors that I would be unable to work for a year or more because of a disability, I thought I would have no problems. Believe me when I say the principles of design are easier to comprehend that the appeals process for social security disability benefits. Well, enough of my rant.

One can become too much of a slave to the newspaper paradigm, but there’s no denying that the vast majority of attractive, user-friendly, and successful site designs could have been plucked from the pages of any 20th Century periodical.

There’s a very good reason for this; laying out type and photos on a grid framework may have evolved out of necessity, but there was plenty of refinement along the way from creative designers and reader feedback. By the time we no longer relied upon the mechanical grid, best practices had become evident and largely independent of the forced structure.

You’ll see a lot of columns, rows, and boxes mixed together in a layout, but you may not instantly register that there is a surprisingly rigid column structure underneath that allows the elements to relate to one another and also have some space to breathe. Check out the 960.gs web site for an impressive variety of designs based on nothing more than a 12 and 16-column grid (as well as a lot of other very helpful tools and tips).

Remember that a static grid is often boring, but intuitive; a “checkerboard” page is still one of the best and most used ways to display a number of products, snapshots, or other elements of equal design worth. A more hybrid composition of staggered rows and columns works well for nearly every blog you’ve ever seen. “Nested” grids are extremely useful for displaying related elements along with a single larger example in the context of a larger, overall grid.

And even when you don’t see the grid at all, it’s probably there…