Webgalactic
Style Guide for Post-Modern Writers
Table of Contents
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Chapter 12 Layout Standards

In This Chapter
  1. The Grid
  2. Margins
  3. White Space
  4. Hierarchy of Messages
  5. Visual Contrast

The following guides are intended to aid you in creating layouts that engage the reader with clear communication.

1. The Grid

Layout grid systems allow for flexibility and creativity while maintaining a sense of organization that unites material. Divide pages into equal columns and give structure to your piece. Grids can be created with two to five columns. The more columns you add, the more flexible your layout.

Layout variations using a four-column grid

2. Margins

Margins offer people a place to hold the publication and act as a frame around the piece. Margins should be used in a consistent way throughout. Margins also offer a contrast to activity on the page. Margins should be ample when possible and more than .25 inches. Small margins create cramped text and heavy layouts that deter readers.

3. White Space

White space is an important factor in page layout. Congested pages become unreadable and confusing, while open and well-spaced pages allow readers to better focus on messages. Rather than being an accident that happens after the layout is assembled, white space is a deliberate active part of the layout that helps convey messages. White space can be as effective as an image, and gives readers room to “breathe.”

Using whitespace to avoid a cramped layout

4. Hierarchy of Messages

Most readers scan pages before reading them. Although their eyes start at the top left page, they are drawn in every direction, focusing on various prominent visual elements. This is why it is important that you carefully weight the importance of graphic elements on your page. Layouts need to communicate a sense of order in a coherent way so that readers can easily navigate them. By grouping major elements together in designated areas your reader can quickly scan pages and be drawn in to read further. Elements that relate to each other should be positioned in proximity, implying a relationship between pieces of information.

Examples of a well-organized page versus a cluttered page

5. Visual Contrast

Layouts need to hold text and images, but must also engage readers. Through design techniques, you can grab reader attention and provide helpful guides through your printed communication.

Use typography as signals to the importance of your messages. By employing different weights, sizes and italics, you can guide the reader through different levels of information on a page.

Horizontal elements within vertical structures of the grid capture viewer attention. By having typographic elements cut across vertical columns you create interesting and dynamic effects.

Avoid “centered” layouts. These can be boring and stiff. Asymmetrical layouts are dynamic and allow for greater freedom to organize information. Placing text to one side and balancing headlines creates space, interest and a rhythm.

Below are some examples of contrasting layouts.

Examples of contrasting page layout alternatives

Next Chapter

Copyright © 2004 by Web Galactic
Version: 1.0