Keith Martin
Page layout is chiefly about how objects on a page interact with each other, which is why grids play such a vital role is design. Here’s how they work…
Page design is seen as a bit of a black art by so many people. It’s 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 should 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 manifestos, and produce sophisticated rationales for why an arrangement is done in a certain way, but the truth is 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 for most of the world it isn’t – so bear with me.
There are no true hard and fast rules for design – it’s 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’re after a typographically chaotic feel. But it’s 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. 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’s 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 possible – or, rather, as clear as appropriate.
A good layout attracts I don’t mean it’s attractive – sometimes a design that’s shocking is more effective than something aesthetically pleasing. It should catch the viewer’s attention and pull them into the page. It has to stand out by being different from everything around it – unless it’s important to fit into whatever crowd it might be in. Depending on the environment and its 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’s 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 too restrictive even if that’s what you’re aiming for. 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 quite common. Use the grid – that’s what it’s for. 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, 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. This isn’t just a phrase made up by designers to get away with doing less. It plays a vital part of creating the balance, tension and flow in a page. Empty space is 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 throughout the mag, it’s 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, which is important 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. 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.
If you think all this just applies to print, you’re sorely mistaken. Good layout needs structure whether it’s 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 then use it 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 10-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.
See the next issue of MacUser to find out how to create your own grids using InDesign.
