I’m Chanpory, and this is my site on how to live and work better as a designer.

You should follow me on Twitter here.

For more, check out the archives.

grids.jpgThe brief, vague introduction to grid systems I received in school left me puzzled. These invisible “underlying structures” seemed more like arcane runes than rational design tools. Thirsty for understanding, I googled and found Mark Boulton’s fantastic series of articles on the basics of grid systems.

I had always thought that things looked nicer and were easier to understand when elements on a page lined up with each other, but I had (and still have) many questions about grids. How should I make them? Should I start with a grid first or begin laying out content and let the grid emerge? When and how can I violate a grid? Are there good and bad grids? How do I tell?

Mark answers these questions beginning with “Why use a grid?” The more in-depth five part “Five simple steps to designing grid systems” starts with basic grid construction for printed materials. He then goes on to show how to apply grids to web design.

Check out the complete series:

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid