Better Design with the Swiss Grid System

By Gary David Bouton

Dateline: March 7, 2003
Read more Graphic Design articles

Whether it's for the Web or for web offset printing, good page layout is something we all strive for. However, precious little information on this essential topic is currently easily available. Want to know some stuff that I was taught in advertising class at Syracuse University that still applies after 30-odd years? If so, I can save you some serious bucks – college was expensive even back in the 1970s and that didn't include fast food and Led Zep records (Note for the young: a "record" is a piece of vinyl with a spiral groove and bumps in the groove that produces analog sound).

If there's a single thing worth passing on from those bygone days, it's the Swiss Grid System, something so simple that it's sophisticated (The seminal book on this topic is "Grid Systems in Graphic Design," by Joseph Müller-Brockman – Ed.). First, you take the dimensions of the layout (it's a 1.33:1 aspect ratio for designing Web pages), be it 8 ½ by 11" or whatever (portrait? landscape?). Then create the page borders in your favorite drawing, painting or layout app and decide how many rows and columns you want for the grid. Does this info alone constitute Swiss-gridness? Nope, although you're almost there.

In the first illustration, you can see a layout that abides by the Swiss grid system. It's also called a "checkerboard layout" and has proven so successful in advertising that many magazine ads are sold in this format. But (not to digress) it's also a Swiss grid of two columns and two rows, and the text blocks (cels in the grid) are alternated with images.

This is the simplest of grids. All the cels are full, which is not a requirement of a Swiss grid-based design, as you'll soon see. Let's spend a moment here on the virtues of good design (which means a design that accomplishes a goal, and doesn't just look spiffy). This grid leads the eye from one area to another, so the design is not static – that's a good thing. Also, it helps if a designer flexes his or her artistic chops and uses asymmetrical or opposing contents within the grid to make the layout "travel" for the viewer. The use of a "hot" cel and then a "cool" one directs the viewer's perception from hot (a psychologically attractive color) to cool (the cel with the pineapple) and (in chronological sequence) once you've attracted the reader, there are blocks of text to read. Again, the cel arrangement has made it easy to move the viewer from most to least important topic. If the text were to be read first, you could easily put some reversed text against a red background, and let the images take secondary importance by making them white against black. Or something else, following this logic.

There are four "unknown rules" that can add flexibility to your own grid layouts:

  1. All the grid cels do not have to be filled. In fact, it helps the design along if you use "white space" in your layout; again, to direct the viewer's eye.
  2. The rows and columns do not have to be equal in size. And, yes, it can actually help if they are unequal.
  3. The contents of a Swiss grid cel doesn't have to fit edge to edge, but you can compromise the quality of the layout if you place odd-sized content willy-nilly within cels. It defeats the purpose of the intrinsic structure of a grid.
  4. You can "span" two rows or two columns, or more, just as you compose tables in HTML. More on this in a moment.

Let's go from concept to layout with a more elaborate grid. Perhaps a really creative guy wants to take out a full page ad. So an exclamation mark in the middle of the page seems like a good idea. See the left panel in the illustration above. As you'll note, the top of the exclamation mark is a headline, a block of text and a phone number, and the bottom is a 3D sphere. As you can see in the right panel, the Swiss grid that supports the placement of all the elements is 3 wide and an uneven height of three rows. By the way, the treatment of the text is an homage to the opening screens of "Saturday Night Live". (To create this "wall-to-wall" text in Photoshop, first choose a bold font, type a line of type, choose the Move tool, press Ctrl[Cmd]+T to display the Free Transform box around the text, and then stretch or shrink the line of type to make it conform to your layout. Repeat these steps with each successive line of text).

Admittedly, it's hard to see the cleanliness and effectiveness of the layout with the guides showing, so check out the next illustration. In advertising, a million years ago, the phrase of praise we'd give each other for a clean, crisp design was, "Very Swiss, Marty!" But only if your name was Marty.

Remember rule 4? You can span two cells in a grid to create a landscape ad (which would work nicely as a Web page). In figure 4 you can see that the image spans two horizontal cels, while the text spans two vertical ones, and white space takes up the remainder of the ad. In terms of focus, the eye will go to the flower image first, then to the headline and then to the body copy. Time to remove the chalk marks. In figure 5 the result is again a clean, fool-proof design.

Finally, I'll show you how to use three  of the grid "rules" to mimic a famous ad style. In figure 6, you can see uneven columns and rows, cel spanning and the creative use of not completely filling in cells (and mixing single cel contents). The number of columns and rows is equal, but that was dictated by common design sense and not a rule. 

The way in which the contents align to the borders of a cel is your own artistic call, and contributes to (or detracts from) a design. Experiment! My personal taste – if you're going to leave space within a cel – is to align all elements in all cels toward the center of a design, as shown in figure 7. By doing this, you direct the viewer to the center of the page; where, ostensibly, the "meat" of the information-laden layout is located.

I tried to make this a "general to specific" article this month, because that's the way you create artwork – you rough out the basic shape, then chip away at the details until you think you're finished. Creating effective layouts is an art, and to this end you now have a new tool and, specifically, the rules that accompany the tool – how to align and shape the Swiss grid, how to place elements within cels, and so on.

Finally, every good artist will tell you this: once you understand "the rules" like the back of your hand; that is, once you've turned out art of award-winning recognition for a few years, then it's time to test, bend and then break the rules. You will see in the future many layouts that you will deem to be outstanding, and yet the layout breaks the Swiss grid rule. By taking the Swiss grid rule to heart, you'll understand why the layout works and then you can add the structure of the layout that breaks the rules to your own designer's bag of tricks.

My Best,
Gary David Bouton

Make sure you don't miss the next Graphic Design article. Get the free newsletter in your mailbox each week. Click here to subscribe.

Gary David Bouton is an author and artist who is largely responsible for the book "Inside Adobe Photoshop 7" and wouldn't mind at all if you bought a copy . Gary hosts a thread on the Photoshop Gurus site and is the moderator of a 3D modeling forum. His guide to Caligari's free trueSpace 3D app is available online. Besides being an educator/artist/all-around-nice-guy, Gary also knows how to get killer chords out of a Fender Stratocaster, so Bruce Springsteen should look out.