Graphic Design

by Ellen Lupton

  Modularity is a special kind of constraint. A module is a fixed element used within a larger system or structure. For example, a pixel is a module that builds a digital image. A pixel is so small, we rarely stop to notice it, but when designers create pixel-based typefaces, they use a grid of pixels to invent letterforms that are consistent from one to the next while giving each one a distinctive shape.

  A nine-by-nine grid of pixels can yield an infinite number of different typefaces. Likewise, a tiny handful of LEGO bricks contains an astonishing number of possible combinations.1 The endless variety of forms occurs, however, within the strict parameters of the system, which permits just one basic kind of connection.

  Building materials—from bricks to lumber to plumbing parts— are manufactured in standard sizes. By working with ready-made materials, an architect helps control construction costs while also streamlining the design process.

  Designers are constantly making decisions about size, color, placement, proportion, relationships, and materials as well as about subject matter, style, and imagery. Sometimes, the decision-making process can be so overwhelming, it’s hard to know how to begin and when to stop. When a few factors are determined in advance, the designer is free to think about other parts of the problem. A well-defined constraint can free up the thought process by taking some decisions off the table. In creating a page of typography, for example, a designer can choose to work within the constraints of one or two type families, and then explore different combinations of size, weight, and placement within that family of elements.

  The book you are reading is organized around a typographic grid whose basic module is a square. By accepting the square unit as a given, we were able to mix and match images while creating a feeling of continuity across the book. The square units vary in size, however (keeping the layouts from getting dull), and some pictures stretch across more than one module (or ignore the grid altogether). Rules are helpful, but it’s fun to break them.

  Working with Constraints

  In the projects shown here, graphic designers have used modular elements to produce unpredictable results. Try looking at familiar systems from a fresh angle. Given the constraints of any system, how can you play with the rules to make something new?

  A child’s set of alphabet blocks looks a certain way, for example, because the blocks are made from perfect cubes. But what if alphabet blocks were made from rectangles instead of cubes? The oddly proportioned faces of the blocks at left provided a framework for designing new letterforms in response to the constraints provided by the blocks of wood.

  Standard materials such as laser paper are often used in generic ways. A standard sheet of office paper can be very dull indeed. Yet with creative thinking, an ordinary piece of paper can be used for dramatic effect. The temporary signage program shown on the opposite page employs economical processes and everyday materials to produce graphics at a lavish scale— at a very low cost.

  Alphabet Blocks These rectangular wooden blocks have a different alphabet painted on each side. Nolen Strals and Bruce Willen, Post Typography.

  Stedlijk Museum CS Signage System This sign system was created for the temporary headquarters of a major museum in the Netherlands. The basic module is a plastic document holder, into which standard sheets of A4 letter paper are inserted. Large-scale graphics are tiled across multiple plastic envelopes. Experimental Jetset.

  Kristen Bennett

  Clean and Dirty Systems Working with a nine-by-nine-square grid of circles, students created four letterforms with common characteristics such as weight, proportion, and density. Designers then introduced decay, degradation, distortion, randomness, or physicality into the design. The underlying structure becomes an armature for new and unexpected processes. Designers employed digital techniques, such as applying a filter to the source image or systematically varying the elements, as well as using physical processes such as painting, stitching, or assembling. Typography I. Ellen Lupton, faculty.

  Emily Goldfarb

  Nicolette Cornelius

  Austin Roesberg

  Andy Bonner

  Zachary Richter

  Modular Alphabet In these examples, designers created systems of characters using three basic shapes: a square (each side equals one unit), a rectangle (one unit by two units), and a quarter-circle (radius equals one unit). Shapes could be assembled in any way, but their relative scale could not change.

  Some forms are dense and solid, while others are split apart. Some use the curved elements to shape the outer edge, while others use curves to cut away the interior. Most have a simple profile, but it is also possible to build a detailed texture out of smaller-scaled elements. Experimental Typography. Nolen Strals and Bruce Willen, faculty.

  Architectural Alphabet The three-dimensional design software AutoCAD has been used to spell out the phrase “word book” in buildings. The rectilinear modules of architecture become the building blocks for letterforms. Johanna Barthmaier, Typography I. Ellen Lupton, faculty.

  Jennifer Baghieri

  Ready-made Alphabet The challenge here was to create a set of characters using objects from the environment rather than drawing them digitally or by hand. The designers discovered letterforms hidden in the things around them. Experimental Typography. Nolen Strals and Bruce Willen, faculty.

  Oliver Munday

  Kirby Matherne

  Kirsten Young

  Rob McConnell

  Rotini Type Modular type can be made from anything: from digital circles and squares, scraps of paper, even bits of pasta assembled by the dozens into familiar letter shapes. Alex Jacque, Lettering & Type. Bruce Willen and Nolen Strals, faculty.

  Manual Type In this project, designers use everyday objects, such as candy, nails, and hair pins, as modular units to build a word or phrase. Group cooperation yields large-scale results. Sarah Clement, Beth Cole, Kaveh Haerian, Jessica Pavone, Qianfei Wang (top); Teresa Bonaddio, Nikki Eastman, Chelsea Maymon, Storm Sebastian, Rachel Ventura (bottom), Post-Baccalaureate Studio. Jason Gottlieb, Ann Liu Alcasabas, and Sandra Maxa, faculty.

  Sheena Crawley, Nick Emrich, Shuyi Meng, Kelly Nealon, Tiffany Small

  Becca Friedman, Daniel Khang, Bonnie Silverberg, Mina Radojevic, Meena Yi

  Min Bae, Shiraz Gallab, Anne Marie Jasinowski, Hadley Robin, Alejandro Salinas

  Type as Tool This type family, called Teip, is designed with several styles and weights that users can remix into endless combinations. Elements appear to pass over and behind each other, creating a feeling of depth. Uppercase letters are stressed vertically, while lowercase letters are stressed horizontally. Alex Jacque, Graduate Type Design. Tal Leming, faculty.

  Interlocking Forms Called Barin, this typeface was inspired by the geometric kufi calligraphy prevalent in Islamic culture, especially by the work of Persian calligraphers Hassan Massoudy and Emin. A calligrapher can freely adjust a character in relation to the marks coming before and after. In contrast, a typeface designer makes each glyph function with any other glyph in any order, compromising freedom in exchange for standardization. Barin explores the line between lettering and type design. Several alternates for every glyph allow letters to interlock. Barin has more than 5,800 glyphs. Open Type features created by Tal Leming enable Barin to automatically choose among thousands of ligatures based on context. This allows the typeface to interlock and maintain the balance between negative and positive space. Shiva Nallaperumal, Graduate Type Design. Tal Leming, faculty.

  Symbol Systems

  A symbol stands for or represents objects, functions, and processes. Many familiar symbols, such as McDonald’s golden arches, are highly distilled, stripped of extraneous detail, delivering just enough information to convey meaning. Symbol systems are often based on geometric modules that come together to create myriad forms and functions.

  Modular Hairdos Geometrically derived forms combine to shape myriad hair styles. Yue Tuo, MFA Studio.

  Counterform Pictures Counters extracted from letters in
a title cohere into visual narratives. Nolen Strals and Bruce Willen, Post Typography.

  Symbolscape This landscape is built and described by a series of modularly structured symbols stacked and layered to denote fauna, flora, and form. Yue Tuo, MFA Studio.

  A City of Cubes An urban landscape teems with people, planes, clouds, automobiles, skyscrapers, and trees—all built from cubes in Adobe Illustrator. Yong Seuk Lee, MFA Studio.

  Extrapolations in Excel These elaborate drawings utilize the gridded compartments of an Excel spreadsheet as a catalyst and a constraint. Danielle Aubert, MFA thesis, Yale University School of Art.

  1. The Ultimate LEGO Book (New York: DK Publishing, 1999).

  Social Order The designer has used a strict grid to organize the content, while employing a gradient tone and skewed geometry to give the piece motion. Chen Yu, Typography II.

  Grid

  Typography is mostly an act of

  dividing a limited surface. Willi Baumeister

  A grid is a network of lines. The lines in a grid typically run horizontally and vertically in evenly spaced increments, but grids can be angled, irregular, or even circular as well.

  When you write notes on a pad of lined paper, or sketch out a floor plan on graph paper, or practice handwriting or calligraphy on ruled pages, the lines serve to guide the hand and eye as you work.

  Grids function similarly in the design of printed matter. Guidelines help the designer align elements in relation to each other. Consistent margins and columns create an underlying structure that unifies the pages of a document and makes the layout process more efficient. In addition to organizing the active content of the page (text and images), the grid lends structure to the white spaces, which cease to be merely blank and passive voids but participate in the rhythm of the overall system.

  A well-made grid encourages the designer to vary the scale and placement of elements without relying wholly on arbitrary or whimsical judgments. The grid offers a rationale and a starting point for each composition, converting a blank area into a structured field.

  Many artists have embraced the grid as a rational, universal form that exists outside of the individual producer. At the same time, the grid is culturally associated with modern urbanism, architecture, and technology. The facades of many glass high rises and other modern buildings consist of uniform ribbons of metal and glass that wrap the building’s volume in a continuous skin. In contrast with the symmetrical hierarchy of a classical building, with its strong entranceway and tiered pattern of windows, a gridded facade expresses a democracy of elements.

  Grids function throughout society. The street grids used in many modern cities around the globe promote circulation among neighborhoods and the flow of traffic, in contrast with the suburban cul-de-sac, a dead-end road that keeps neighborhoods closed off and private.

  The grid imparts a similarly democratic character to page and screen. By marking space into numerous equal units, the grid makes the entire surface available for use; the edges become as important as the center. Grids help designers create active, asymmetrical compositions in place of static, centered ones. By breaking down space into units, grids encourage designers to leave some areas open rather than filling up the whole page.

  Software interfaces encourage the use of grids by making it easy to establish margins, columns, and page templates. Guidelines can be quickly dragged, dropped, and deleted and made visible or invisible at will. (Indeed, it is a good idea when working on screen to switch off the guidelines from time to time, as they can create a false sense of fullness and structure as well as clutter one’s view.)

  This chapter looks at the grid as a means of generating form, arranging images, and organizing information. The grid can work quietly in the background, or it can assert itself as an active element. The grid becomes visible as objects come into alignment with it. Some designers use grids in a strict, absolute way, while others see them as a starting point in an evolving process. This book is designed with a strong grid, but when an image or layout needs to break step with the regiment, it is allowed to do so.

  Form and Content

  The grid has a long history within modern art and design as a means for generating form. You can construct compositions, layouts, and patterns by dividing a space into fields and filling in or delineating its cells in different ways. Try building irregular and asymmetric compositions against the neutral, ready-made backdrop of a grid. The same formal principles apply to organizing text and images in a publication design.

  Grids Generate Form The cells and nodes of a grid can be used to generate complex pattern designs as well as simple rectangles. Dividing a square into nine identical units is a classic design problem. Numerous simple forms and relationships can be built against this simple matrix. Jason Okutake and John P. Corrigan, MFA Studio.

  Grids Organize Content The nine-square grid divides the page into spaces for images and text. Although each layout has its own rhythm and scale, the pages are unified by the grid’s underlying structure. The book you are reading is built around a similar nine-square grid. John P. Corrigan, MFA Studio.

  Nine-square Grid: Color Fields The grid provides a structure for organizing fields of color that frame and overlap each other. Complexity emerges against a simple armature. John P. Corrigan, MFA Studio.

  Ragnar Freyr

  Rhythm, Form, Frame Iceland-based designer Ragnar Freyr creates posters, identities, websites, and publications. In the posters shown here, Freyr has used the grid to establish simple rhythms and hierarchies as well as to frame images and generate complex forms. Design: Ragnar Freyr. Photography (left): Kevin McAuley. Photography (below): Cleveland Aaron/Knowledge Mag.

  Structure and Color In this project, designers explore the grid as a tool for organizing content and generating form. The text is the United Nations’ Universal Declaration of Human Rights (abbreviated version). With sixteen vertical columns and eight horizontal rows, the grid provides a flexible scaffold for organizing content. Typefaces are limited to the Univers family. After designers arrive at a solid black-and-white concept, they use color to emphasize or counteract the underlying structure. Typography II. Ellen Lupton, faculty.

  Diane Yang

  Trace Byrd

  Devon Burgoyne

  Co-Design: Generate Form After using the 16-column grid to organize the text, the designer exchanged his InDesign file with classmates and asked them to add elements based on the grid. He created the final poster at right in response to the designs he collected. Chen Yu, Typography II.

  Content Management

  A standard narrative book is designed with a single-column grid: one block of body copy is surrounded by margins that function as a simple frame for the content. For hundreds of years, Bibles have been designed with pages divided into two columns. Textbooks, dictionaries, reference manuals, and other books containing large amounts of text often use a two-column grid, breaking up space and making the pages less overwhelming for readers.

  Magazines typically use grids with three or more vertical divisions. Multiple columns guide the placement of text, headlines, captions, images, and other page elements. One or more horizontal “hang lines” provide additional structure. A skilled designer uses a grid actively, not passively, allowing the modules to suggest intriguing shapes and surprising placements for elements.

  Many Columns, Many Choices The page layouts shown here from Print magazine, designed by Pentagram, employ a complex, multicolumn grid. The column structure gives the pages their vertical grain, while horizontal hang lines anchor each spread, bringing elements into taut alignment. The grid helps the layout designer create active, varied pages that are held together by an underlying structure. The grid accommodates a mix of sizes and proportions in both image and text blocks. And, where appropriate, the designer breaks the grid altogether. Abbott Miller and John Kudos, Pentagram. Print magazine.

  Digital Grids The webpage at left features a single column of text edged with reference images; users can
click on an image for an enlarged view. This simple structure is similar to that of many online newspapers. The pages above are examples of responsive layout; the grid changes depending on the output device. Emma Sherwood-Forbes and Nour Tabet, MFA Studio.

  Automated Grids

  Grids for digital media are often built on the fly to organize chunks of content into collections of data that users can quickly scan. Google searches and Pinterest boards present images in grids whose irregular heartbeat reflects the diverse shapes and sizes of content. Pinterest accommodates the long, skinny graphics made popular by vertically scrolling websites, while Google image searches favor horizontal images. The web’s random sense of overflow has also inspired designers to create new grids for print.