Chapter 3: I Need to Design this Today

The Works-Every-Time Layout

The works-every-time layout allows us to describe Western layout in its most universal form while also teaching introductory rules for working with type, visuals and negative space. At the end of this chapter students have a working vocabulary of layout and can produce functional—if generally dull—layouts.

Key Student Takeaways

1. The WET layout works because of the order in which Westerners learn to read. We are taught to “enter” a page in the upper left-hand corner and to “exit” the page in the lower right-hand corner. This reading pattern or eye flow dictates the placement of visuals and type on a WET layout: Visual first at the top, headline next under—not over—the visual, body copy last under the headline.
2.  The 6 steps of the WET layout are:

• Step 1: Determine the outer boundaries of the design and lay in generous margins on all four sides of the layout.
• Step 2: Establish column guides.
• Step 3: Position the visual at the top of the page to function as the focal point that captures attention. If applicable, place the caption, known in news as a “cutline,” under the visual.
• Step 4: Position the headline under the cutline.
• Step 5: Position the body copy into columns under the headline
• Step 6: If applicable, place tags in the bottom right corner, as the last thing the eye sees before exiting the page.

3. Margins, sometimes called thumb space, frame the design with negative space and buffer it from surrounding visual clutter.
4. Because people are lazy readers, designing with columns tricks the eye into reading more than it might otherwise.
5. The visual at the top of the WET layout acts as the eye’s entry point and focal point into the layout. Make the visual a welcome sign to the layout.
6. In a WET layout, pairing two different fonts that play well together is best. Choose an interesting font for the headline and an easy-to-read font for the body copy. Then use one or the other font in the caption/cutline and/or tags.
7. In the WET layout, the caption or cutline typically appears directly beneath its photo or visual. Set cutline type somewhere between 9 and 11 points. Position the cutline to sit flush left/ragged right, and match the width of the cutline to the width of the photo or visual.
8. Headlines are the second most important visual component on a WET. Make the headline point size big so that it draws the eye down from the visual toward the body copy. Choose an interesting headline font to match the layout’s tone. Let the headline’s copy suggest where to break a long headline into multiple lines.
9. There are some basic rules for setting up and positioning body copy:

• Choose an easy-to-read font (a “transparent” font).
• Set body copy somewhere between 9 and 11 points.
• cKeep the headline and lead together.
• Never indent the lead paragraph.
• Lay body copy into columns wide enough to accommodate 6–12 words per line.
• Keep columns of type, called legs, taller than 2 inches but shorter than 10–12 inches.
• Size automatic paragraph indents proportionately to point size and line length.

10. If tags are required, as in advertising, be sure to include the logo and URL.
11. Just because the WET layout works every time, don’t assume you must or should use it every time.

Quiz Questions

The 5-minute Motivation to Read Quiz

Share three things you learned from the reading. Be specific.

Short Answer Quiz Questions

Name the 6 parts of the WET layout, in order.

Draw a thumbnail sketch of the WET layout and label its 6 parts.

Multiple Choice Quiz Questions

The visual at the top of the WET layout functions as

a.  The layout’s thumb space
b.  The layout’s tags
c.  The layout’s back door
d.  The layout’s welcome mat

The correct order of a WET layout is:

a.  Headline, body copy, visual
b.  Body copy, visual, headline
c.  Headline, visual, body copy
d.  Visual, headline, body copy

On a WET layout, a good number of fonts to use is:

a.  One
b.  Two
c.  Three
d.  It’s up to the designer.

Some type rules for body copy include:

a.  Keep the headline and lead together.
b.  Keep body copy column width at 6 inches.
c.  Keep alley width at 1 inch.
d.  Keep cutline and tags together.