WEB STANDARDS CREATIVITY

132
What is a grid system?
A grid system is a framework. It’s a system used to create
compositions. Everywhere you look, you see grid systems:
city blocks, magazines, newspapers, building elevations.
It’s because we humans like to organize things, and, in
many western cultures, we understand them when they
are organized into straight lines. We know what to look at
next, what to push or click next, and what to do next
because of grid systems. Grid systems aren’t just functional
though; they can be beautiful.
A grid system can be designed using the Golden Section,
a ratio that has been linked to aesthetic beauty for centuries.
If something is perceived as beautiful, then
according to the Aesthetic Usability Effect, it is more
usable as well.
For more on the Golden Section, check out
http://en.wikipedia.org/wiki/Golden_section.
Grid systems are incredibly important in the design
process. Along with typography, they determine the visual
organization of information.
In this chapter, I’m going to show you how I designed a
simple grid system for a recent project. Before I launch
into that though, I feel it’s important to give a brief
overview of grid system design—how and where grid systems
came into being, and the changes they’ve gone
through over the decades.
Through the ages
No one really knows where grid systems originated. Some
would argue they’ve been around ever since man started
producing art. Others would say they started when man
developed written language. However, I think they started
when designers consciously began developing them to
solve compositional problems. This, I believe, began with
Villard’s diagram, which was in use since at least medieval
times.
Prior to World War II, grid systems were very formulaic,
straightforward affairs—rectangular structures built
around the proportions of devices such as Villard’s diagram.
They were often limited by the technology that
produced them, and involved columns of text occasionally
punctuated by an image. Grid systems of that era
rarely used whitespace as a design device, let alone more
than one typeface. That was until a few notable designers
came along, including Josef Müller-Brockmann, who challenged
the design conventions of the time. They
proposed a new system: a more flexible grid with more
tools at the designer’s disposal, called the modular grid.
The importance of these designers’ thinking shouldn’t be
underestimated. Much of what we understand as modern
typography and grid system design came from them. Evidence
of their work can be seen permeating graphic design
of everything from magazine design (see Figure 6-1) to
websites (see Figure 6-2).