The secret to designing with grids

Page layout is chiefly about how objects on a page interact with each other, which is why grids play such a vital role in design. Here’s how they work…

Page design is seen as a bit of a black art by so many people. It is true that it isn’t a doddle, but there are certain things you can practise that will give you a decent start. Not to faking it as a graphic designer, but anyone who creates layouts shoud try to make them well, whatever they’re for – so ditch the templates and read on.

One of the fundamental keys to effective page layout design in any medium is the proper use of grids. The layout grid is what gives a page design meaningful structure, beyond the plain meaning of the content itself. When something is put onto a page one of the first questions you should ask yourself is “why there?” Not in a self-doubt kind of way, more as a way of making sure you don’t miss a trick.

How something sits in relation to other items on a page is pretty much what layout is all about. People theorise, write manifestoes, and produce sophisticated rationales for why an arrangement is done in a certain way, but the truth is really quite simple. The spatial relationship of objects in a layout is as much a part of the message as the words and images themselves. Okay, a lot more abstract, but they produce a hierarchy, a rhythm and pace that is ‘read’ from the moment the page is seen, even before actual words are absorbed. If you’re a trained designer this is probably old hat, but most of the world isn’t – so bear with me.

There really are no true hard and fast rules for design; it is more about what’s appropriate for the challenge at hand. For every simple ‘rule’ you can imagine scenarios that disprove it; don’t use low-res images… unless you want the pixellated effect; don’t mix fonts randomly… unless you are after a typographically chaotic feel. But it is still possible to boil some things down to get some fundamental ideas. I find this can be very helpful when talking about design to non-design students. (There’s nothing quite like explaining a subject from the ground up for making you get your head properly around it.) So, more as a set of discussion topics than anything, here’s how some of the bullet points go:

  • A good layout works. By this I mean it does what you need it to do; anything else is just gravy, as the saying goes. Pretty bloody obvious, hmm? The real point is that to achieve this you need to know, at the very least, what the purpose of the piece is, who it is for, and where it will be seen or how it will be distributed.
  • A good layout organises. It maps out a visual path for the reader to follow; it indicates in some way what comes first, second, third, and so on. There will be some kind of hierarchy to the things you’re juggling in your layout, so use this to present the information in an appropriate order to make the message as clear as is possible… or rather, as clear as appropriate.
  • A good layout attracts. I don’t mean it is attractive – sometimes something shocking is more effective than something elegant and aesthetically pleasing. It should catch the viewer’s attention and pull them into the page. It has to stand out from the crowd by being different from everything around it – unless it is important to fit into whatever crowd it might be in. Depending on the environment and it’s content this might mean being startling, subtle, surprising, entertaining, unusual, or simple and direct. In some ways the process of doing a good layout is similar to doing a jigsaw puzzle: you keep putting the pieces together in different ways until they fit.

What is one of the keys to achieving this? Yep, the proper use of grids. This doesn’t mean making everything painfully grid-bound and boring, although that’s all too possible if you’re not careful.

There are a couple of things that are common when someone first tries setting up columns in InDesign or QuarkXPress. One is using too few columns, so you’re left with little flexibility when you start assembling the page. Two or three columns is generally too restrictive even if that’s what you’re aiming for in the final product. This may be the reason for the next common thing: ignoring the grid and putting things vaguely ‘wherever’ on the page. This is pointless of course… but really quite common. Use the damn grid, that’s what it is for! But first, try setting up a more useful grid; five columns at least, but seven or more can make things even more flexible. Don’t feel you have to stick to single columns for most stuff; use two, three or more columns as you go. If you want a tip (not a rule of course), try sticking to odd numbers of columns. That will help avoid layouts that are too balanced and static.

That old chestnut ‘white space’ plays an important role here. Honestly, this isn’t just a phrase made up by designers to get away with doing less. This plays a vital part of creating the overall balance, tension and reading flow in a page. Try to see empty space as being as important as the objects themselves.

If you want to see how grid designs work in magazines just take a sheet of tracing paper and place it over a page. Draw a few lines where you think the grids fall, then put the paper over another page. Refine your drawn lines. Chances are there are only three or four different grid structures used through out the mag, it is just the variation of how a grid is used – the white space, the alignments, widths and so on – that keeps things feeling fresh. We’ve made life a little easier for you in this spread by showing the underlying grid. Note how the various items use the grid, then take your tracing paper and see how this grid works elsewhere. This underlying structure is vital for speedy production, vital in a fortnightly publication such a MacUser!

If you’re up for something different and have a one-off poster to make, try a grid-free style; place something on the page, then use that to help position other things. Use object edges as guides, and try matching the width of spaces or objects – basically, taking alignment, spacing and scaling cues from the objects themselves. Smart Guides make this easy in a growing number of applications, from Illustrator to Keynote. Mind you, I first saw this feature in Vellum, a CAD tool, back in the early 1990s. I thought it was a seriously good idea back then and I still can’t understand why it took so long to spread. Better late than never, I suppose.

Finally, remember that ‘any medium’ comment at the start? If you think all this just applies to print you’re sorely mistaken. Good layout needs structure whether it is for print or pixels. If you haven’t seen it already spend some time reading the info at gridder.andreehansson.se or 960.gs and install the bookmarklet. See how it fits existing sites – Facebook is worth a shot – then use as you make your own site designs. This approach works, by default, on the basis of having 940 pixels of working width, 12 columns with ten-pixel gutters, and a horizontal baseline-style grid spaced 16 pixels apart. You can adjust these values, but they’re not bad to be getting on with. Best of all, this number of columns practically forces people to play with multiple-column-spanning structures, which tends to push designs away from that tired newsletter look. Even newsletters don’t deserve that old fate.

Leave a Reply

Your email address will not be published. Required fields are marked *