The Art of the Layout
What makes the
design work? The designer used some classic principles to energize her
: 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
designer implemented the ideas.
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.
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
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
magazine, the details in the upper two-
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-
photos on magazine covers!
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
magazine bold and intriguing. The black and white lettering on the left is severe compared to the serene,
picture on the rightand yet they work together
. Notice how the white of the left page continues into the building, and how the blocks of text are balanced.
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
, 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
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
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
, 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
similar items together: captions with photos, heading with
, 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
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
current information are mostly too packed and dense to give the designer any
room. Designing for these media is
difficult and requires
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
, advertisements, and
, 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,
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
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
generation of readers.
Figure 9.15. The logo and the headline of this
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.