THIS PAGE IS IN PROGRESS

Grids are systems of horizontal and vertical lines used to organize information on a page. A grid system is usually applied across multiple pages.

You’ve already created simple grids on single pages. Look back at the page you designed for XXX. In order to create rhythm and tension, you considered the relationship between multiple elements, created a strong vertical line, created a focal point, acknowledged the horizontal repetition of lines of text, and paid attention to the relationships between the elements on the page and edges of the page itself. These are exactly the things we think about when creating a grid (Figure 12.1, top).

 

Figure 12.1 Top: When you pay attention to relationships between elements and create a strong vertical line, a grid starts to develop. Composition by Chris Nelson. Bottom: The modular grid is usually based on an equal number of columns and rows. Here, the white spaces become too regular and the composition has less tension than the one above.

Now look back at the XXX you designed. Again, you considered the relationship between multiple elements and the edge of the page. In addition, you paid attention to vertical spacing and line length (column width)—the vertical and horizontal spaces—which are two basic elements in designing a grid.

The Modular Grid and Text

When learning (or teaching) about how to use a grid, we often start with a modular grid exercise. The modular grid is usually based on an equal number of columns and rows (Figure 12.1, bottom).

Students apply a small amount of text to the grid; the objective is to create multiple, varied solutions. This sensitizes students to the possibilities of the grid—to the idea that the typographer decides where to put elements on the grid.

But when working with large amounts of text, modular grids rarely work. If you find you cannot work within a strict modular grid, do not despair. Grids should be organic and respond to the needs of the text you are working with.

Web Grids and Reading

Figure 12.2 shows a common web “grid” used to show how content can be laid out on a web page. This layout is a practical approach. Most web pages need a top header/navigation bar and a footer. They also need a left or right column (or both) for navigation or support content.

A problem arises if you assume the template is the only possible design. Margins do not have to be equal all the way around. Content does not have to take up the entire width of a browser. The left and right columns do not have to be equal.

Line length affects the readability of the text. In Figure 12.3, the center column of the grid is too wide. Column widths—whether for navigation, main text, or an aside—should acknowledge what the text needs. To respect your readers and honor the content, you must negotiate space and content (Figure 12.4).

 

Figure 12.2 A practical web template is not the same as a grid, and should not be used for laying out text.

 

Figure 12.3 When the Film Series is applied to a web template, the line length gets too long. Equal left and right spaces undermine rhythm and tension.

 

Figure 12.4 Developing a grid based on line length, vertical spacing, and the relationship between elements creates a more readable text and a composition with more rhythm and tension. Film Series by Chris Nelson.

Grid Templates Aren’t ‘One Size Fits All’

Templates are available to streamline creating a grid. Most notable are Blueprint (www.blueprintcss.org/)and the 960 Grid System (www.designinfluences.com/fluid960gs/).

Templates offer a variety of solutions: fewer columns make a more traditional layout, while more columns mean more flexibility. But templates are not ‘one size fits all,’ and they are not organic. They don’t know if you are working with a narrow or wide font, small or large text, a list, prose, or a lot of images. They often dictate how much space you are allowed to put between elements, and how much space you are allowed to fill.

If you want to use a template in the future, go for it. But if you find your content doesn’t fit in a template, and if you find you’re not satisfied and are doing a lot of math (‘What if I use more or fewer columns?’ ‘What if I use a wider or narrower container div?’), then put aside the template and build your own grid.

How to Establish a Grid

Lay out the elements and move them around to discover the grid they need. Arrange them so they feel like individual parts of a whole. Web grids rely primarily on columns, because readers scroll down long texts. To make the composition most pleasing, strive for rhythm and tension. Rhythm and tension can be subtle (the space between the edge of the text and the edge of the page; the way the h2s and links create counterpoints to the text) and still be successful.

Start with What Your Text Needs

Set your text first (like you did in the last lesson). If you try to work with text elements before establishing size, line height, and line length, the grid won’t work. It’s like shopping for a refrigerator without measuring the space in your kitchen.

After you have the text set, you can move the pieces around, as described in the next sections.

Physically Move Things Around

Print out a page with your text elements. Draw a long, blank browser. Cut up the elements (Figure 12.5) and move them around until they create a strong vertical line, horizontal relationships between elements, a focal point, and spatial tension in the white space. Document layouts with a photocopier, camera, or scanner (Figure 12.6). Try dozens of ideas. Work quickly; don’t worry about perfection.

 

Figure 12.5 Cut your long column of web type up so each element (list, caption, memory, and so on) is on its own piece of paper.

 

Figure 12.6 Arrange the paper scraps in a hand-drawn border. Document your explorations with a scanner, photocopier, or digital camera. Work quickly; don’t worry about perfection.

Use Image Software to Move Things Around

If you don’t have a printer (or scissors, or tape, or even just the inclination to use your hands), create an image file of a blank browser. Cut and paste screenshots of the text and image elements on to different layers. Move them around until they create a strong vertical line, horizontal relationships between elements, a focal point, and spatial tension in the white space. Document layouts with screen shots or save multiple versions of the file (Figures 12.7 and 12.8).

 

Figure 12.7 Left: The section links get lost across the top, and the ads are too prominent. Elements do not feel cohesive. Right: Moving the section links to the left under the logo works much better. But the image isn’t in the right place. It should be with the directions, as it shows a step in the recipe.

 

Figure 12.8 Left: The section links work when on the right side, too. This layout could work, but to me, the elements feel scattered around the page, and the image might be too big. Right: This is the best one yet. The image is smaller. When I draw in “grid” lines, I can see this layout is more cohesive than the others. However, the image should shift over so it is on the grid. This will help the rhythm and tension on the page, because it will improve the vertical lines.

Be Willing to Make Modifications

As you move things around, you’ll realize that something doesn’t work (a color, a font size, a div width). Be willing to modify the text and image elements. You may have to settle for a less-than-perfect line length now and again, but at least you’ll have started with the reader in mind (not the width of the browser).

Hand Color Your Best Solutions

Whether you’ve documented your exploration with a camera, a scanner, or by saving multiple versions in the image software of your choice, print out the pictures so you can see all of them at once. Lay out the multiple versions and edit down to the best solutions. I recommend pulling out some color pencils and hand-coloring the layouts to explore possible color palettes (Figure 12.9). Again, try dozens of ideas. Work quickly; don’t worry about perfection.

 

Figure 12.9 Edit down your best explorations. Hand-color the layouts to explore color palettes. Make notes to yourself about what is working and what isn’t.

Sketching Is More Important than Ever

Why is sketching more important than ever? When you’re trying to lay out elements, you’re looking at syntax. It helps to work out the composition in advance. I recommend finding the grid by hand whenever possible. It allows you to develop more ideas in a shorter amount of time than sketching with image software. In addition, sketches done by hand feel impermanent; it’s okay to try new ideas and make mistakes when sketches take only a couple of minutes and can be thrown into the recycling bin.

Quick Tips

Grids are systems of horizontal and vertical lines.

• Grids organize information on a page.
• Grid systems are applied across pages.
• Grids should be organic and respond to the needs of the text.
• Web grids rely primarily on columns because readers scroll down long texts.
• Line length affects readability. Base column width on text, not available space.
• To discover a grid, move elements around on a page. Document possible solutions.
• When discovering the grid, work with text already set to a possible font, size, and so on.
• Continue to strive for a strong vertical line, a focal point, horizontal relationships between elements, and thoughtful relationships between elements on the page and the edge of the page itself.