The more I learn about how designers use the grid system and the different ways they construct their grids, the more free I feel to take my creativity to new heights! But how can using a complex, confusing, restrictive set of lines help me be free?
Glad you asked.
What is a Grid?
A grid is a series of lines that make up the structure or the foundation of a layout (for print or web). Grids are made up of columns, rows and margins.
Why a Grid?
A grid will make your life easier because much of the burden of figuring out the best placement for elements will be lifted.
How a Grid?
Ok, so that question doesn’t make much sense, but we’ve already asked what and why; how just seemed to follow.
Begin building your grid with margins, head and foot space. Then start building the columns. I like to use the option in InDesign that allows you to align the grid to the margins instead of the page (in CS2 it’s under Layout>Create Guides—not margins—and you select the radio button Fit Guides to Margins). You’ll want to make your alleys at least ¼ inch, or 1p6 (one pica, pronounced with a hard i, 6 points, aka “one and a half picas”), depending on the size of the page and the columns.
Now comes the fun part, figuring out how many columns you want your layout to have! There are so many options! You can have anywhere from two to seven (or more for larger spreads). Two columns will give the heavy, blocky feel of a textbook. Three columns is increasing in flexibility, but still a little rigid. Four is probably a better choice than two, again because of the options it opens up for placement of text and images. Five is good, too, though less common than the others (but maybe that’s what you want!). Six is probably the configuration I use the most; I find it flexible but still conventional. Seven is another underutilized structure that offers a lot of layout variety.
For even more structure (and less work placing elements), add horizontal guides, too. You can do this from the same dialog box, Layout>Create Guides. I don’t add any alleys to the horizontal guides. It is a good idea to use horizontal guides in multiples of three. I find that nine—which divides the space into thirds, and those thirds into thirds—works well for me.
Three is a magical number for composition; if you’ve ever taken a photography or cinematography class, you might remember this. Things look more balanced when in one of the thirds, and this way, you can put an element directly in the center.
When a Grid?
Every time! Don’t want to make your life easier?
Remember, a grid is a tool, not an unbreakable rule.
Make sure to also see the Creative Curio article on The Grid in Practice.
Further Reading
There are many great articles and books about using the grid system out there.
- Mark Boulton focuses on using a grid for web design
- Smiley Cat Web Design provides a helpful Web Page Layout Grid
- Tutorial blog has a strong selection of grid articles
How true. Yes certain rules make for more freedom. A designer without a grid is something like a painter without a canvas. The grid cannot be emphasised enough, so it’s great that you’ve taken the time (I guess some considerable time too) to feature it.
And you’re right about it making our lives easier. Time spent on a grid, will save one lots of time throughout the rest of the design process. Interestingly, I know some people who work backwards (and it appears to work for them): they design first, then create a grid based on the proportions of the design, then adjust the elements to that grid. I’ve not worked like this much, but it’s an interesting approach.
I just realized I never really talked about/showed actually using the grid with photos and text! Guess we’ll have to have a part 2. Explain “design first”? As in thumbnails or comps first and then a grid? That’s sort of how I do it, too. But I don’t start working on the digital file without a grid. I wish Photoshop had an easy way to make a grid like InDesign does.
Oh and I just got around to reading that interview with you, John, over at She Unlimted. How funny that you talked about the grid being such an important element!
That’s a curious approach mentioned there, John, working backwords, and placing the grid last. I’ve not done that before, and imagine it could lead to more work (if the publication is a large one).
I’m currently working on a 200 page art book, and using a 5 column grid. Looking forward to holding the tangible product (one thing I love about print).
David, who/what is the art book for? It sounds like a fun project. I love print work. I agree, it’s an incredible feeling to be able to hold the finish product in your hands—realizing you misspelled the title and it’s too late to fix it because 15,000 copies have already been run is the not so wonderful part about print!
What made you decide on a 5 column grid? Any particular reason?
It’s for a non-profit called Darbar. They’re based in England, and concentrate on Indian arts, culture and heritage.
Thankfully I’m not the one charged with proofing, although I’m always a little anxious when viewing print work I’ve designed.
The 5 column grid provides a nice amount of flexibility, and some pages show two columns of text spread across the middle three of five columns.
Yes, I forgot to talk about how to use the grid! I need to address that because it’s totally possible and probable that images and text are spread across multiple columns. I don’t want people who are new to using it to think that the text or images have to fit into those skinny little columns. I hope the art book will be a nice portfolio piece for you, David!