The Art of the Layout

What makes the MAGNET design work? The designer used some classic principles to energize her two-page spreads: contrast, alignment, repetition, and proximity.

In the following section, we'll explore those principles in action on various well-designed magazine covers and articles. Once you've seen the examples, I invite you to reexamine the Tom Waits article and see how well the MAGNET designer implemented the ideas.

Contrast

Remember our discussion of negative space? The designer of the Tom Waits article created a strong contrast by using photographs that had large areas of empty space. Sometimes magazine pages are quite barren placesnegative space can be crucial to a well-designed page. At other times, the designer will use empty space for a heading or pull quote, breaking the conventional separation between text and image.

How else can a designer add contrast? Think of all the ways you experience contrast in your life. When something happens that is not a part of the daily routine, it creates contrast. Cold, gray days make you appreciate the warmth of summer. The same goes for layouts. The empty spaces in the photos may contrast with the detailed text below them. Photographic detail may contrast with the simplicity of text. Large elements contrast with small ones, loud elements with quiet ones, and so on.

tip

Space is seemingly at a premium in magazine designhow do you cram all the text and images into the given page layout and still leave some space empty? Take a tip from our MAGNET example and try using nearly blank areas of a photo or illustration as your negative areas.

Keep in mind that contrast is also about the content of the information that you are designing, not just the visual aspects of the material. An article about erupting volcanoes might appear alongside a witty heading and a nonchalant pull quote: "10,000 tons of lava was not that surprising, really." Like any good designer, a magazine designer will play with the reader's expectations.

Figure 9.11. In this cover of Bust magazine, the details in the upper two-thirds contrast with the more stark lower section, and the black-and-white photo contrasts with the colors of the logo and text as well as the common convention for full-color photos on magazine covers!

note

Contrast in magazine design is the attention getterthe ingredient that makes the reader say, "Hmm, this looks interesting." It doesn't have to communicate everything and give it all away, just make that initial spark.

Figure 9.12. Contrast makes this entire spread from Azure magazine bold and intriguing. The black and white lettering on the left is severe compared to the serene, colorful picture on the rightand yet they work together perfectly. Notice how the white of the left page continues into the building, and how the blocks of text are balanced.

Alignment

In our analysis of the Tom Waits spreads, we saw that while the grid provides a good deal of organization, none of the pages look exactly alike. The columns make the body text easy to read, photos are made bolder by stretching them over several columns, and horizontal guides keep photos and pull quotes aligned consistently with other page elements throughout the article.

The alignment of elements on an introductory spread creates a synergy between photo and text, with the goal of making it compelling and clear. Alignment keeps a balance throughout the composition so that the reader is psychologically comfortable. The images or text of articles might be used to cause a stir, but in most cases the layout should not aggravateor readers will not have the patience to delve further into the article.

Figure 9.13. In this introductory spread, a horizontal line is used to emphasize the relation between the text on the left and the frog photo on the right. Also notice how the clever treatment of the text mimics the frog's webbed feet. The result is a beautifully unified design.

Repetition and Proximity

The repetition of design elements imparts a subtle consistency to the MAGNET layout. Body text always flows neatly through all of the columns, photos all share a similar treatment, the same grid is used on all pages, and the special text areas are handled in the same style. This is no accident, and was not done to save design timeit was all to make the reader feel comfortable as he or she continues reading through several pages of the article.

Such internal consistency helps make the article a neat little package that is separate from all of the other articles in the magazine, and yet part of the whole.

You can create order by putting similar items together: captions with photos, heading with subheadings, and so on. Using proximity helps readers quickly see the relationships between elements rather than have to search for them.

Figure 9.14. Throughout this ReadyMade spread, proximity helps readers connect the descriptions to the photos quickly, forming a number of pockets of content.

Some Rules of Thumb

Newspapers and newsletters or other media that convey current information are mostly too packed and dense to give the designer any breathing room. Designing for these media is considered difficult and requires years of experience, even though it may look simpler and less creative on the surface.

However, the layout and design of magazines (both spreads and covers), as well as posters, advertisements, and brochures, allows you to play with drama and contrast in terms of content and spatial relationships. Here are some rules of thumb that designers find useful:

• Keep it simple. The number of main messages should be at a minimum. One large main image and one major headline normally work best, especially on a cover.

• Leave 30 to 40 percent of the opening page empty. This refers to multipage designs such as spreads and brochures. The more information you need to put on a page, the more space you should leave empty. Note that the continuation of a story on subsequent pages can be in a denser layout because the reader's attention is already there.

• Keep elements in as few groups as possible. Avoid a busy page by tying the elements together according to their relevance to one another.

• Maximize the contrast. Contrast is the basic foundation of all design and art. Commonly perceived as the relationship between black and white, contrast involves much more than just opposites. It appears whenever there is a tension created between two design elements.

The style or visual language of layout is always changing, perhaps because it makes an identity statement. Anything relating to fashion, for example, must live in flux. Thousands of magazines are currently published, and new ones are created every day. Who knowsas a designer, you may be tasked with creating a visual language for the next generation of readers.

Figure 9.15. The logo and the headline of this Venus cover stand out thanks to contrast, and the headline and photo are grouped to make the main story clear. Secondary stories are listed in a separate grouping, and there is lots of negative space used for balance.