From, Graphic Design Fundamentals

By Kaitlin Hanger

Chapter 21: Multiple-Page DocumentsLEARNING OBJECTIVES: 

Address the principles of designing for multi-page documents

Learn the critical importance of establishing a visual vocabulary in multi-page documents

Understand the importance of brand identity in multi-page documents and about creating style

manuals

Obtain basic knowledge of annual report design

Discuss brochure design

Learn to think in terms of User Experience

Understand the importance of unity from page to page

Consider how grids are used effectively in multi-page documents

Define the different types of grids

Learn about mock-ups, flatplans, and wireframing

Learn to edit your own work

Review the importance of readability and how to achieve it

WORKING WITH MULTIPLE PAGES:

So far, the concepts of unity and composition in your reading here have been primarily focused on self-contained images and have addressed principles that go into single page or single image designs. Things do start to get a little more complicated design-wise when you start working with more body text and with multiple-page or multiple-panel documents like brochures, booklets, magazines, annual reports, catalogs and websites. Your layout has to flow across the pages (or screens for web work) and so eye path becomes multi-faceted. There needs to be consistency using tools like grids to “teach” your viewer HOW to read each page as the document progresses. They will expect information that is the same or similar to appear in the same place on each page, or to follow some form of visual logic that facilitates clear navigation through the document.

Unity and balance become crucial when a project is made up of multiple pages or screens. Part of your job as the designer is to make different elements of your multi-component work seem to just naturally go together visually. Multiple-page documents need to have a consistency of appearance, arrangement, typography, and type-to-image relationship. 

Continuity is what helps hold the entire package together visually; it also aids your audience in navigating through several pages or screens as they learn the visual language or vocabulary being used in your composition and helps with “branding” the book or website as a unified message that suits the subject matter, product, or service

To accomplish an effective visual vocabulary in the work, think of the entire project as a single unit of design and treat separate pages and elements as if they are all part of the one story, look or series. When you approach the job this way, the principles of design you’ve learned while designing individual pieces will work just as well.

COVER

PICTURED LEFT & BELOW, PAGES FROM AN ANNUAL REPORT FOR THE FROST MUSIC SCHOOL AT THE UNIVERSITY OF MIAMI'S MUSICREACH MENTORING PROGRAM SHOWS CONTINUITY OF COLOR AND EYE PATH AND REFLECTS THE VISUAL IDENTITY ESTABLISHED BY THE LOGO COLORS AND HEART MOTIF (USING SHAPES BASED ON CROPPED HEARTS--IN OTHER WORDS, CIRCLES AND TRIANGLES.

[2]BUILD ON BRAND IDENTITY:

You should familiarize yourself with the visual identity program of the company or brand you are working with if one exists. Ask for their style manual (or style guide). A style manual is a set of standards, usually presented in booklet form, developed by creative professionals for establishing consistency in the writing and design of documents that come from one entity or promote one product line. Style manuals establish and enforce consistent visual style to improve communication and to keep the brand story and visual identity unified. Typically, companies like to stick to one or two typefaces, one color scheme, one arrangement of negative/positive space, one type of imagery, and other forms of consistent visual branding. Know this before you begin! If your client is local or a small business without an existing branding program, ask them to show you work they like from other companies. Look at what their competitors are doing. Then do it differently (or at least better!). Your document needs its own distinct voice but still has to reflect the personality of the particular business you are representing, even if a formal branding program isn’t in place.

Multiple-page documents are a terrific opportunity to use text and imagery effectively to help expand upon the brand’s visual story—and to do it in just a few pages. If a brochure or booklet is part of a series each component also needs to look like it is “of a set.” You accomplish this by applying the same rules of continuity, arrangement, style, and layout. Use the same grid, typefaces, and type of imagery for all the brochures in a series.

Annual reports and catalogs can be major graphic design projects involving both promotional and informational content. Conceptual development toward promoting the brand story and grabbing attention becomes very important in such publications. Often, a concept or a motif is used, in a metaphoric sense, to reflect an organization’s values, make a dynamic statement, or enhance a sophisticated image. A metaphor can also provide a visual structure around which the entire design hangs. Web designers are particularly fans of the metaphor. It is often written into their original concept and brief for a client.

Book-format presentations such as annual reports and catalogs can be major graphic design projects involving both promotional and informational content. Conceptual development toward promoting the brand story and grabbing attention becomes very important in such publications. Often, a concept or a motif is used, in a metaphoric sense, to reflect an organization’s values, make a dynamic statement, or enhance a sophisticated image. Metaphors or motifs can also provide a visual structure around which the entire design hangs. (Website designers are particularly fans of the metaphor. It is often written into their original concept and brief for a client.)

Don't be afraid in book-style and brochure design to leave areas of the page blank, Robin Landa reminds us. Cramming everything plus the kitchen sink on one page visually overwhelms the reader and results in reader anxiety. Experiment with leaving one column of white space in your new multi-column layout. Run text in two of the columns with a photo or display text covering the other column. Or, try starting your article halfway down the page with the top half being reserved for a photo or typography. White space suggests sophistication (Landa, 2013).

Unfortunately, white space will also mean a higher cost in printing. Generous negative space requires more pages to fit all the copy across the booklet. That means more paper, thus more money. Budget also becomes more of a concern with print formats, because size, quantity, and things like bleeds and reverses or special folds can additionally raise the cost of production. Cost-conscious designers learn the standard sizes of flat sheet paper so they can work with smart measurements to get the most pages out of a single piece. Know what your client can afford. Ask them what their budget is so you know how creative you can get.

FOLDING ISSUES:

BROCHURE FORMATS: Part of the tactile nature of a brochure is the way it folds and opens up, Landa suggests. Folding is dimensional. It helps organize information by literally letting the content unfold in a logical order. A well designed fold "...can help pace a story, direct the reader's attention to key points...[and]...even introduce an element of surprise. There are certain brochure folds that printers’ machines are able to handle at lower cost because they have become standardized (Landa 2013). For instance:

Book Formats: remember when designing a saddle-stitched (stapled or stitched) booklet that, due to the way spreads are printed in codex format (by folding and stacking folded pages into a book) on both sides of a large flat of paper, then folded, collated and bound, you must design with a page count that is a multiple of four. Pages of a booklet are typically created by printing four pages (2 on the front and 2 on the back) on one sheet of paper and then folding that sheet in half and stacking them with other "codices." Because of the way the booklet is produced, therefore, you can’t have a random number of pages. It has to be a multiple of four. Printers sometimes refer to these loosely as signatures (which in actuality is technically 16 pages). A perfect bound (glued) spine can make for more flexible page counts, but always ask your printer to be sure. When designing for the internet or creating an interactive PDF of single pages in a book, of course, you can make your document any number of pages you wish.

DESIGN FROM THE POINT OF THE USER'S EXPERIENCE:

[4]

With booklets and magazines, you should always, for print at least, design your document in spreads, that is, left and facing right page together, because that is how the viewer will see the final document. Your eye path should be built to keep readers moving left to right, turning the page and wanting to see what comes next. Images or elements that run across the fold or gutter help draw the eye forward to the adjacent page and toward written content.

[5]

Multiple-page documents are typically meant to be informative and include generous paragraph (or body) text. The purpose of such content marketing differs from single-page design in that strategic objectives involve frequently complex topics, how-to instructions, or editorial content. Chunking and visual hierarchy becomes crucial to comprehension in these cases. And cleanliness of design or use of a clear design logic that is easily interpreted improves the message effectiveness as well.

You will remember from an earlier chapter that we discussed the Z-pattern or Gutenberg Diagram. In the West, people tend to scan a page according to how they read—left to right and top to bottom. This knowledge can help you organize and prioritize your information to make a multi-page design a quicker read for people. There are other useful standards that apply to user experience that James Gordon Bennett explains below:

People look for a title near the top of a page or screen. The exception to this rule is when the

title exists on a page separated from the rest of the text. In this case, it is often placed near the

center of the page. Items near the top or on upper layers are simply read more often. Of course

these “rules” can be broken with effective use of eye path but every page should not have its

own eye path. Repeat the movement or arrangement you create on one spread onto other

spreads with variations.

Items that have more significance should typically be larger so they attract the attention of the

viewer. (Another technique is to put generous negative space around the elements you want to

grab attention.)

Captions should be close to the images they describe.

Readers look for the less important content, such as a “continued” lines or “read more,” page

numbers, or telephone/web info at the bottom of the format. Again, good eye path can allow that

rule to be broken as long as it is broken in a consistent manner on each spread. (Bennett, 2012)

UNIFY THE LOOK FROM COVER TO COVER:

You have already learned many principles that can be applied to creating visual unity in a multi-component document. Here is a review of some important thoughts about using design elements effectively in a series from James Gordon Bennett’s chapter on Composition:

Space: Create unity by grouping objects together in space or by arranging them in a pattern that repeats throughout.

Line: Use similar line quality in on your graphic elements to bring unity to a book format document or a series. Line used as a directional device also helps bring separate pages together by creating an ongoing flow.

Shape: Arrange objects in a design so that they form groups of similar shapes. For example, an illustration that contains several objects could be arranged so that the objects are grouped into triangles. Repetition of the triangle throughout the image can be used so the viewer associates the objects with each other.

Value: Use similar value and contrast throughout an entire document. Even use of a consistent light source (for example for drop shadows) can help provide unity from page to page.

Texture: Textures or patterns that repeat or are similar when repeated on various spreads can help establish unity.

Color: Choose a color palette with similar hues and repeat those same colors, saturation levels, or tonal values throughout.

LEARN TO USE GRIDS EFFECTIVELY:

Column grids

Modular grids work well for brochures because they provide a logical arrangement of elements while still providing wide flexibility. Column grids, however, are more common in magazine and book design. You can design your own grids by sketching your spreads out first as thumbnails, or borrow someone else’s grid from a composition you like. InDesign grid templates are available online if you take the time to look for them. It’s a particularly good idea to use a template for something like a brochure where you may not understand the importance of having slightly different sized panels as the brochure folds inward. 

Typical panel measurements for a trifold brochure.

Templates are built to be easily altered to suit your own needs, but beware of using fully templated documents that include typography, photo placement, color and geometric shapes that will make your work look like everybody else’s. You want your design to stand out and have its own personality.

Non-grid design in particular benefits from using a visual metaphor to communicate the functions of an “interface” or layout. Examples of this might be simulating a television or tablet-defined layout or other familiar content documents such as maps, subway routes, board games, highway signs, magazine genres, instruction manuals and much much more. The advantage of using common metaphors in this way is that the viewer already understands the meaning of the elements in the layout and is used to navigating that particular format.

WHERE DO YOU START?:

One of the first steps in creating a multi-page or multi-panel document is to analyze the amount of content you’re going to need to juggle inside. How much body text must you fit in there and how much white space do you want to use to get attention and produce a “clean” and sophisticated design? Actually reading the copy not only helps you understand the philosophy and voice behind the product, service or brand, but helps you, as the designer, decide if the composition will be text or image driven. Also know how the document will be used—if it’s a self-mailer, that constrains your back or front cover design to accommodate postal regulations. If it’s going to be displayed on a rack, how do you stand out from other pieces on the same rack? and what part of the document might be hidden

from view by the structure of the shelving or display? If it’s a booklet that’s to be handled a lot, dark colors will pick up fingerprints and a printer's varnish  may be called for. What information is most important to stand out, what is less so? You should, of course, also know the psychographics of the audience. What look will appeal to them most on an emotive level?

With brochures, it helps to fold a mockup before you start designing—determine what will go on each panel and sketch content very roughly onto the mockup(s). This also helps you remember when setting up the flat 2-page InDesign file, what has to go on the front, the back, the inside flap, and the interior—and to visualize the flow of information once the brochure is folded. For multiple-page documents like catalogs and magazines, designers (or editors/creative directors) set up what is called a flatplan—a sort of storyboard that shows your entire book in spreads using thumbnail 

A typical flatplan

sketches. Website designers do this with wireframing (creating a page schematic or screen blueprint that serves as a visual guide for the “skeleton” of a website). Then create roughs and noodle over what images will represent the content on each panel well. How big should the logo be? Should it appear more than once? Where should contact information go? How can you make selling points stand out and become readable with a quick scan?

Then create roughs and noodle over what images will represent the content on each panel well. How big should the logo be? Should it appear more than once? Where should contact information go? How can you make selling points stand out and become readable with a quick scan?

[6]

There are several useful videos on Lynda.com for creating effective booklets, magazines and brochures in InDesign. Now is the time to learn.

[7]

The final step in creating book-style or multiple-panel projects is always tweaking. Making sure type kerning and leading is consistent and elegant, for example. And edit yourself. Take out the extraneous visuals that are only adding clutter. This is where the adages “less is more” and “when in doubt, take it out” can be helpful. Ask yourself

if each element is really adding to the sophistication and ease of use of the design and don’t be queasy about losing some of it if it doesn’t. Your fondness for an element you spent a lot of time creating can get in the way of improving your design. Don’t let it. Be brave and cut where it helps. Bennett suggests that every element of a design should be able to pass the following test:

1. Does the element fit with the rest of the piece?

2. Does the element enhance the other parts of the design?

3. Does the element help move the viewer's eye around the entire piece?

4. Does the element make the design more interesting?

“If you apply this test to any part of a design and come up with a negative answer to any of the questions,” he warns, “it is probable that the element should be altered to better fit the composition or maybe removed altogether.”

[8]

Your job is to arrange the elements, but also to make sure the elements—such as photo resolution—are top notch. Don’t neglect Photoshopping images for similarity of style, color, and crispness. Always check the resolution. Make sure you’re dropping it in the right color format—RGB, CMYK, Pantone, or Grayscale, according to the presentation format or production process.

As a last note, be aware that the size you choose for your layout will affect cost. Print publications (books, magazines, newspapers, brochures, catalogs, etc.) use format sizes and measurements based on standard flat sheet paper size before it is trimmed and folded, bound, or saddle-stitched (stapled). For example, 11 x 17 sheets double-folded create a common 4 or 8-page newsletter. Magazines and catalogs are sized according to flat paper sizes and trimmed after printing and collated into signatures (groups of 8 pages) or codices (16 pages). You can only, in a folded publication, add pages in multiples of 4 because of the way the publication gets assembled. Brochures are often designed and folded according to standard US letter or legal size paper. Decisions made about size affect cost; good planning avoids wasting paper that will be trimmed away.

Finally, it is your job to train yourself to use desktop publishing software more effectively. Learn to use paragraph and character styles to build in consistency (and save time). Learn about baseline grids for aligning text and grid systems for achieving continuity. Lynda.com provides a lot of very useful training in this area for SPECIFIC types of documents. As a wise professor once said to me, the course is NEVER over. There is always more to learn.

_________________________________________________

DEFINITIONS:

Codex: book  format (of 4 page-multiples) created by folding and then stacking the folded pages into a book 

Flatplan: A working diagram of the content of a booklet. A flatbplan looks like a storyboard and is basically the page plan (or pagination) of a publication showing how the content will be laid out.

Gutter:  the "blank" space between textual content or columns that crosses the fold of a booklet.

Mockup:  in brochure design, a folded "dummy" that shows the order in which the panels will be viewed and red and what goes on each panel.

Modular Grid: a design grid based on a structural principle that subdiveds a page into manageable (and often equally sized) rectangular units and zones. The rectangles are created by the intersection of vertical and horizontal lines. This "zone philosophy" provides more flexibility for variations within the formatting than with the typical column grid.

Perfect Bound: a booklet that has a glue spine.

Style Manual (also called Style Guide): a set of standards, usually presented in booklet form, developed by creative professionals for establishing consistency in the writing and design of documents that come from one entity or promote one product line. Style manuals establish and enforce consistent visual style to improve communication and to keep the brand story and visual identity unified.

Saddle-stitch:   binding a booklet with stapling or actual stitching.

Signature:   Officially, 16 pages; in colloquial printers' terms any multiple of 4 pages.

Visual Vocabulary: Creating a visual consistency that facilitates message interpretation. The designer draws on your cognitive tendency to read images according to what is already familiar to you, using repetition of form and motif and the repeated placement or alignment of common elements. Helps the viewer predict where to find specific information on subsequent pages.

Wireframing: Creating a page schematic or screen blueprint that serves as a visual guide representing the “skeleton” of a website.

________________________

IMAGE RESOURCES

[1] Images used with permission of Yming Zhou. All rights reserved.

[2] Images by Kaitlin Hanger. Used with permission of the Frost School of Music at the University of Miami. All rights reserved.

[3] Images by Government Office for Science under CC BY-ND 2.0 via Flickr.

[4] Image by Aamir Raza under CC BY-ND 2.0 via Flickr.

[5] Image by Mark Olson under CC BY-ND 2.0 via Flickr.

[6] Image under CC BY-ND 2.0 via Flickr.

[7] Image under CC BY-ND 2.0 via nps.gov. 

[8] Image under CC BY-ND 2.0 via media.defense.gov.

_________________________

REFERENCES

Bennett, James Gordon. Design Fundamentals for New Media, 2nd ed. Course Technology: 2012.

Landa, Robin. Graphic Design Solutions, 5th ed. Wadsworth: 2013.

Samara, Timothy. Making and Breaking the Grid. Kindle ed. Rockport Publishers: 2005.