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.

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…

And as someone who was recently injured and had to seek assistance with the Social Security Administration, I can tell you that grids are NOT the same as obstacles, whereas the SSD system requires a roadmap (How to apply for SSD) to even understand what you’re doing.