Every good web design site will tell you that clarity is the key. Especially with the size of screens decreasing as more people start browsing on smartphones and tablets, the importance of getting information across clearly and succinctly continues to grow. Many web designers have found that grid-based designs are an effective means of portraying information. They didn’t figure this out on their own, though—designers from other fields have been using this method for years. Chris Brackmuller of Design Informer points out a city plan for Washington, DC drawn by Charles L’Enfant in 1792, in which the entire city is divided into blocks. Mark Boulton claims that the use of the grid in graphic design started in the 1930s as an off-shoot of Constructivist and Concrete-Geometrical art.
Many grids are based off of mathematical ratios. In fact, the first step of Boulton’s “Five simple steps to designing grid systems” is “Subdividing ratios.” While this may sound intimidating, all it means is that each grid square can continue to be proportionally-divided to create discrete sections with a pleasing mathematical relationship to each other. In turn, this creates an aesthetically-appealing design.
Even if you don’t sit down with a ruler while brainstorming a design for your next client (or for your own business), there’s no denying the ease when it comes to actually placing objects into your grid layout. Some CSS frameworks have already considered this and include default grid designs that you can easily modify. Otherwise, it’s easy to set up grids in editors like Fireworks and Photoshop. Simply go to the Preferences panel and select the Guides and Grids or Guides, Grid & Slices section, respectively.
When working with a grid, the actual grid square is only the most basic unit. A “column” is the vertical grouping of grid units, while a “gutter” is the blank space in between columns. The sizes of these groupings will depend on the importance of the graphics and text within them, just as in basic design. Brackmuller states that “gutters should be the same width throughout the layout, and items of equal hierarchical importance should reside within columns of the same width.”
Despite all of the mathematics associated with grid design, it should serve as an enhancement rather than a stifling of your creative energies. With that being said, there are some basic principles. Many people split grid systems into 9, 12, 16, or 20 columns. Never use more columns than are necessary for your design. If a pre-designed grid fits your needs, don’t hesitate to use it. In contrast, if you feel that a certain element would work better outside of the grid, don’t hesitate to break out of it.
Don’t worry about the grid system making all of your pages look the same. Instead, grids help create an underlying aesthetic design which will hopefully improve your pages. Apple’s website, often considered one of the best-designed in the world, is a perfect showcase of unified design (as is Apple’s product line).
