Grids, Wires, and Web Design

I’m an information hound, you might say, and an intrinsically motivated learner. I routinely scan through Google Reader every morning looking for new material to devour. In Reader alone, I have 40 feed subscriptions. I also subscribe to about 15 podcasts, a handful of email newsletters, and my affinity for books is really more like an addiction.

Despite my best efforts to stay in touch with the design world and learn all I can, it seems I’ve missed the boat on a couple of (apparently fundamental) design techniques… grid-based design and wireframing. Those terms have been coming up a lot lately in my reading.

Suddenly I find myself a little panicky. How did I miss this? Having no formal design training (I don’t consider my stint at the local community college formal), I’m sure there are entire schools of thought I wasn’t exposed to. That said, I’ve never been one for embracing stoic theory or mathematical approaches to design anyway, so it’s probably just as well. I’d rather get a thought or feeling, and explore it to see what can come from it.

The idea of experimenting with these two analytical techniques has become a new fascination however, and I’m willing to try anything that will make my design process easier and the results of my work more effective. So yesterday I took a look at Photoshop’s grid view on a design I’ve been playing with, just out of curiosity. I couldn’t help being a little bit pleased with myself when I saw the comp against the overlay. The elements lined up surprisingly well. How did I do that? I began to wonder if the grid is really a benefit to design. If I had been using a grid, would I have come up with a concept that looked as nice?

Some might agree when I say grids could potentially stifle the creative process, because designers may have a tendency to align everything too precisely, rather than relying on their sense of what “feels balanced”. On the other hand, the underlying principle of grids (the Divine Proportion) has been used for centuries, and proven itself very effective in works of art such as the Last Supper, and ancient architecture such as the Parthenon. Pretty interesting huh?

Having at least done the occasional rudimentary sketch before opening Photoshop to create some designs, I can see how a grid-based approach would be helpful in determining proximity of elements in a layout, but a free-form approach lends nicely to asymmetrical design as well. I think depending on the individual designer, and the needs of the site… everything is variable.

Based on what I’ve learned so far, I can concede that using a grid during the planning stage of most projects (as in, beginning with a pencil and paper) is a good idea. I don’t think I’ll be constantly checking my designs against a grid once I’m in Photoshop, however. It’s just too tempting to set every element along a line where it doesn’t necessarily need to be.

As for wireframing, good grief! When I think of all the trouble I could’ve been spared if I had known how to how to wireframe a site four or five years ago, I can only shake my head. The bright side - at least I have more tools in the arsenal now than before. Didn’t someone once say “the journey is in discovery”? Well if not, I’ll claim it. ;)