Layout Essentials: 100 Design Principles for Using Grids

Beth Tondreau is the founder and principal of BTD, a small design firm that works with publishers to design books and book jackets and small businesses to develop their identities. She currently teaches in the Communication Design Department of New York City College of Technology in New York. Tondreau has been involved as a mentor in the AIGA/NY Mentoring Program and has served on the board of directors of AIGA/NYC. Excerpt. © Reprinted by permission. All rights reserved. Layout Essentials 100 Design Principles for Using Grids By Beth Tondreau The Quarto Group Copyright © 2019 Quarto Publishing Group USA Inc.All rights reserved.ISBN: 978-1-59253-472-2 Contents Introduction, 8, GETTING STARTED, Elements of a Grid, 10, Basic Grid Diagrams, 11, Determine the Appropriate Grid, 12, Formatting Text, 13, Hierarchy of Information, 14, Grid and Image, 15, Combining Grid, Type, and Image, 16, Color, 17, Space, 18, Rhythm and Flow, 19, GRIDS AT WORK, Single column, 22, Two column, 28, Three column, 42, Multicolumn, 52, Modular, 62, Tables, Charts, and Infographics, 72, Color as Key Component, 82, Color as Organizing Element, 90, Horizontal Hierarchy, 102, Type and Grids, 112, Dense Information, 122, Breathing Space, 134, Imperceptible Grid, 140, Organic Shapes, 148, Swiss Grid, 156, Grid, Disrupted, 166, Grid, Refashioned, 174, Layered Grid, 180, Grids and Motion, 186, Breaking the Grid, 194, Glossary, 202, Recommended Reading and Listening, 203, Contributors, 204, Quick Start Guide, 206, Acknowledgments, 208, CHAPTER 1 GETTING STARTED ELEMENTS OF A GRID 1. Know the Components The main components of a grid are margins, columns, markers, flowlines, spatial zones, and modules. Starting a new project can be hard. Begin with your content, then set up your margins and columns. You'll need to make adjustments. Just start. COLUMNS [A] are vertical containers that hold type or images. The width and number of columns on a page or screen can vary, depending on the content. MODULES [B] are individual divisions separated by consistent space, providing a repeating, ordered grid. Combining modules can create columns and rows of varying sizes. MARGINS [C] are buffer zones. They represent the amount of space between the trim size, including gutter, and the page content. Margins can also house secondary information, such as notes and captions. SPATIAL ZONES [D] are groups of modules or columns that can form specific areas for type, ads, images, or other information. FLOWLINES [E] are alignments that break space into horizontal bands. Not actual lines, flowlines are a method for using space and elements to guide a reader across a page. MARKERS [X] help a reader navigate a document. Indicating placement for material that appears in the same location, markers include page numbers, running heads and feet (headers and footers), and icons. BASIC GRID DIAGRAMS 2. Learn the Basic Structures Although the diagrams below show common structures, there are additional variations on the basic configurations. The multicolumn grids of newspapers and their sites extend beyond three columns to five or more. A SINGLE-COLUMN GRID is generally used for continuous running text, such as essays, reports, or books. The block of text is the main feature on the page, spread, or device screen. A TWO-COLUMN GRID can be used to control a lot of text or to present different kinds of information in separate columns. A double- column grid can be arranged with columns of equal or unequal width. In ideal proportions, when one column is wider than the other, the wider column is double the width of the narrow column. MULTICOLUMN GRIDS afford greater flexibility than single- or two-column grids, combine multiple columns of varying widths and are useful for magazines and websites. MODULAR GRIDS are best for controlling the kind of complex information seen in newspapers, calendars, charts, and tables. They combine vertical and horizontal columns, which arrange the structure into smaller chunks of space. HIERARCHICAL GRIDS break the page into zones. Many hierarchical grids are composed of horizontal columns. Some magazines organize contents pages horizontally. L For ease and efficiency, many devices break material into horizontal bands. START BY ASKING • What is the material? Is it complicated? • How much of it is there? • What is the goal? • Who is the reader/browser/user? DETERMINE THE APPROPRIATE GRID 3. Assess the Material Content, margins, amount of imagery, desired number of pages, screens, and panels all factor into deciding how to set up a grid. Above all, the content determines the structure of the grid. The grid you use depends on each specific design problem, but below are some general guidelines: • Use a SINGLE-COLUMN GRID when working with continuous text, such as an essay or a book. A single column of text can seem less intimidating and more luxurious than multiple columns, making it suitable for art books or catalogs. • For more complicated material, TWO-COLUMN or MULTICOLUMN grids afford flexibility. Columns that can be further broken into two provide the greatest number of variations. Multicolumn grids are used for websites to manage a huge range of information that includes stories, videos, and ads. • For a lot of information, such as that in a calendar or schedule, a MODULAR grid helps to arrange units of information into manageable chunks. A mocular grid can also be applied to newspapers, which have many zones of information. • HIERARCHICAL grids divide pages or screens HORIZONTALLY andaré often useful for simple websites, in which chunks of information are ordered, to provide easier reading while scrolling down a page. All grids create order, and all involve planning and math. Whether a designer is working in pixels, picas, or millimeters, the key to the rational order of a grid is making sure the numbers add up. FORMATTING TEXT 4. Do the Math Consider the main text first and analyze the project's complexity — most projects have restrictions, such as size, number of pages, and colors. When paying attention to the content, also factor in any project criteria. Once you know the sizes of the page or screen and your basic text, figure out how the elements fit on the page. If you're working wit ft text only, you can fit your text into the allotted number of pages. If you also need to include images, headings, boxes, or charts, first determine the amount of space needed for the text. The remainder is the amount of space left for imagery, charts, and other information. Often, you will need to simultaneously calculate numbers for all elements. When you have determined the basic approach to the material and its fit, you can dive into the details of headings and hierarchies. See next principle.) TYPOGRAPHY TIPS Type's texture springs from size, space, width, and line breaks. Consistent color of running copy is easy for the reader to follow. If the text is lengthy, it must be large enough, with enough leading (space between the lines), to support an easy reading experience. If the columns are narrow, avoid gappy word spaces, by either setting type small or, alternatively, flush left, unjustified right. Because different typefaces set differently, there is no perfect criterion for type sizes For instance, 10 pt. Helvetica looks a lot bigger than 1 Opt. Garamond. With the exception of the words Helvetic and Garamonhe, the bulk of this paragraph is set in 8 point Interstate with 4.5 points of space between lines. It's worth studying typefaces. HIERARCHY OF INFORMATION 5. Go Easy on the Reader Does the material have headings? Subheadings? Lists? Bullets? If not, does it need any or all of the above? Make the most important information larger or bolder, or set it in another face to distinguish it from less-important text. Varying fonts as well as text size and weight can also help set apart different types of material, out keep it simple. If each style doesn't have a clear purpose, many different styles can be confusing. Although size matters, space matters just as much. The location of a head and the amount of space surrounding it can also convey importance. To make a lot of disparate or varied material easy to parse, break it into segments for easy reading. Pull quotes are the visual equivalents of sound bites. Use sidebars and boxes to break information into chunks that can be easily skimmed. Typography can help a user immediately understand the content. GRID AND IMAGE 6. Determine an Order Rarely are all images in a piece used at the same size. Just as text conveys information, image size indicates the importance of an event or subject. Some companies rank images in size order prior to proceding to layout. Others rely upon the designer to define an order or bring drama to a piece by varying size. Of course, some complex images need to be larger simply for readability's sake. In addition to function and dynamics through size, projects also need variation to keep the reader engaged. COMBINING GRID, TYPE, AND IMAGE 7. Consider All Elements Depending on the medium or project, grids can isolate elements, by presenting type in one column or zone and images in another. Most grids integrate type and image, giving each enough emphasis to clarify information for the reader. COLOR 8. Define Space with Color Color is a way to make modules or sections stand out. Color defines space as well as helps to organize elements within a space. Color also enlivens a page and provides a psychological signal for the kind of message that's being conveyed. When setting up colors, consider the audience. Saturated colors attract attention, while desaturated colors support the material in a more understated way. Too many colors can cause a piece to be busy and hard to navigate. COLOR ON SCREEN VS. ON PAPER We live in an RGB world, in which both clients and designers view almost everything on screen. Colors on screen are luminous, saturated, beautiful, and RGB. However, there is a big difference between color on screen and on paper. Traditional four-color printing requires the careful choice of paper and rounds of color correcting to approximate onscreen luminosity. SPACE 9. Use Space as a Graphic Element Space communicates volumes. Although a grid must be strong and clear enough to hold rafts of information, it's not necessary to fill every part of it. Space sets off the message, giving appropriate room for reading and understanding text. By design, a large amount of space creates drama and focus. Space can signal luxury or importance, and the absence of anything else on the page transmits a definite aesthetic. RHYTHM AND FLOW 10. Maintain Interest With Pacing Some grids include mechanical, clear, repeated, or marching columns of images or information to catalog as much material as possible. However, most grids also allow for lyrical movement from one block of information to the next, from spread to spread, or from screen to screen. The pacing of material on the page makes a difference in attracting or sustaining interest. Pacing can stem from variation in sizes and positions of images and typography as well as the amount of margin around each image. CHAPTER 2 SINGLE COLUMN 11. Give the Subject a Face When choosing an appropriate typeface for a page or spread of a single-column grid, consider the subject matter. Some faces are classic and neutral and work with most material, while other faces give a point of view and nearly mimic the topic. A typeface can help set an attitude or it can recede discreetly. Do historical research to give a sense of a time period. Conversely, work against type-ie. overturn typographical clichés. Type width, type size, and leading (interlinear space) all affect the overall fit and feel. SINGLE COLUMN 12. Determine Margins If a printed project has a long page count, there's a danger that material could get lost in the gutter. Therefore, a good practice is to leave a gutter margin large enough to keep the text from disappearing into binding. When the project is a book, a spread that looks proportionate on screen or in laser printouts can change radically once the book is printed and bound. The amount of spatial loss in the gutter depends on the length of the book or brochure as well as the binding method. Whether the piece is perfect bound, sewn, or saddle stitched, it's a good idea to make certain that nothing goes missing. BINDING METHODS AND MARGINS Depending on the number of pages in a project, some binding methods cause type to get lost in the gutters more than others. A project with a sewn or notch binding can be opened flatter than a perfect-bound (glued) project. Type may get lost in the gutter of a perfect-bound project and readers may be reluctant to crack the binding when pulling the book open. If the project is spiral bound, leave enough space in the gutter for the spiral holes. Generous margins ensure that important recipe instructions remain easy to read, without text slipping into the gutter. In addition, wide margins take into account elements such as subheads and charts, which may appear outside of the text block. Generous margins for markers such as running feet and folios also give a sense of calm and leisure. On the other hand — and this works for situations that are not solely single column — certain margins may be intentionally tight in order to add a sense of tension and of history on the edge. Page numbers and section information designed dangerously near the head or foot trim contrast with white space in the case of this spread or, in the case of the spreads on page 85, heighten awareness of the material's importance. RULE OF THUMB A common question is what the rule of thumb for print margins is. There is no magic solution, but I suggest starting with .5" (1.25cm) and adding or subtracting from there. Less than a .25" (6mm) outside marging can mean flirting with something called bounce on press. The final decisions depends on the proportion of your page and your material and, if a print project, your output provider. A common error in print is too large a text for too small a margin. On the web, tablet, or device, margins are important as well, but less margin can lose less information. Although this is technically a single-column layout, the principle of smaller margins applies throughout the issue of this magazine. For a trim size of 7¾" x 10 7/16" (19.5 x 26.4 cm), the outside margins of 7/32" (5 mm) from top trim down to running head and bottom trim up to the base of the folios and running feet push the limits of printing and trimming. It works. SINGLE COLUMN 13. Work in Proportion Keep proportions in mind, including for the foot margin. Even a seemingly simple page involves a deliberate use of space that will set off material on a printed page and, ideally, a screen. The foot margin (the margin at the bottom of the page) Is slightly larger than the head margin. The screened, patterned art delicately presents the title type, set in bold for a strong texture but in a small size for an understated look. A centered page number, or folio, is a signal of a classical design. Bold, letterspaced running heads (headers) and folios (page numbers) give texture to a full page of type. Reading is easier with generous margins and ample leading. THE GOLDEN RATIO The golden ratio has been used in art and architecture for thousands of years. Also called the golden section, the golden ratio describes a ratio of elements, such as height to width. The ratio is approximately 0.618 or 1:1.618. In other words, the smaller segment, for example, the width or (a), is to the larger segment, the height or (b), as the larger segment is to the sum of both segments. So, a designer could have a measure that is 22 picas wide with a height of 35 picas 6 points. The diagram to the right shows two different rectangles that mathematically work out to the golden ration. Designers often work by eye and instinct instead of using exact numbers, but they achieve pleasing proportions. TWO COLUMN 14. Consider Equality A grid with two even columns can control a large amount of material on a page. Symmetrical columns give a sense of great order and can support variations in image sizes and amouns of space. Perfect for publications with international audiences, two even columns can present the same information in two different languages, coexisting equally. Traditional justified columns provide a sense of order and comfort for conservative editors and readers. If the column width is wide enough and the text small enough, each of the two columns will present a uniform and readable texture. A tidy text setup can support all sorts of otner information, such as boxes, charts, or images. TWO COLUMN 15. Design for Function Although a typical approach to a two-column grid employs columns of equal widths, a two-column grid can consist of two unequal columns. When the purpose of an information-rich piece is to be open, readable, and accessible, an option is to construct a grid containing a narrow column and a wider column. The wider column works well for running text and enables the author(s) to deliver a coherent running narrative, while the narrow column can hold material such as captions, images, or tables. TWO COLUMN 16. Regulate Rules Sometimes, instructional material includes so many discrete chunks of information that a page needs more than mere space between the columns for readability. In such cases, a vertical rule can function as a dividing line between columns. Horizontal rules can separate information within columns by dividing running text from boxed material, or by separating the overall text area from the running feet and folios by means of another horizontal rule. Caution: Too many rules can dull a page. (Continues...) Excerpted from Layout Essentials by Beth Tondreau . Copyright © 2019 Quarto Publishing Group USA Inc.. Excerpted by permission of The Quarto Group. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.