by Ellen Lupton
From Caption to Headline When a large-scale word replaces an ordinary caption, the message changes. What is empty? The sky, the store, or the larger social reality suggested by the landscape?
Text Over Image Putting type on top of a high-contrast image poses legibility conflicts. Boxes, bars, and transparent color fields are some of the ways designers deal with the problem of separating text from image.
Using Images Typographically How can an image be arranged, like type, into words, lines, columns, and grids? This exercise invited designers to think abstractly about both image and type. Each designer created a new visual “text” by mining lines, shapes, and textures from a larger picture. Typography is experienced in terms of blocks of graphic tone and texture that are framed by the margins and gutters of the page. Different densities of texture suggest hierarchies of contrasting typefaces. Headlines, captions, quotations, lists, illustrations, and other material take shape in relation to bodies of running text. Advanced Design Workshop, York College. Ellen Lupton, visiting faculty.
Shannon Snyder
Jessica Alvarado
Melanie M. Rodgers
Lindsay Olson
The exercises on this spread incorporate a high-resolution scan of an original eighteenth-century engraving from Denis Diderot’s Encyclopedia. Shown here is the full image.
Framing Text and Image In this project, designers edited, framed, and cropped a picture in relation to a passage of text. The challenge was to make the text an equal player in the final composition, not a mere caption or footnote to the picture. Designers approached the image abstractly as well as figuratively. Is the picture flat or three-dimensional? How does it look upside down? Designers edited the image by blocking out parts of it, changing the shape of the frame, or blowing up a detail. They found lines, shapes, and planes within the picture that suggested ways to position and align the text. The goal was to integrate the text with the image without letting the text disappear. Typography I. Ellen Lupton, faculty.
Luke Williams
Jonnie Hallman
Jessica Neil
Lindsey Sherman
Villa Borghese, Rome, 1615. The ornament on this Renaissance palazzo frames the windows, doors, and niches as well as delineates the building’s principal volumes and divisions. Architect: Giovanni Vasanzio. Vintage photograph.
Borders
A border is the frontier between inside and outside, marking the edge of a territory. A border naturally appears where an image ends and its background begins.
While many images hold their own edges (a dark picture on a white background), a graphic border can help define an image that lacks an obvious edge (a white background on a white page). A graphic border can emphasize an outer boundary, or it can frame off a section inside an image. Some borders are simple lines; others are detailed and complex. Around the world and across history, people have created elaborate frames, rules, cartouches, and moldings to frame pictures and architectural elements.
Marking Space A frame can mark off a space with just a few points. Territory can be defined from the outside in (as in crop marks for trimming a print), or from the inside out (an x drawn from the center of a space to its four corners).
Border Patrol Frames interact with content in different ways. In the examples shown here, the border sometimes calls attention to the icon, lending it stature; in other instances, the border itself takes over, becoming the dominant form. Robert Lewis, MFA Studio.
Whether simple or decorative, a border creates a transition between image and background. Against the pale wall of a room, for example, a black picture frame sharply separates a work of art from its surroundings. Alternatively, a frame whose color is close to that of the wall blends the work of art with the room around it. Graphic designers make similar decisions when framing visual elements, sometimes seeking to meld them with their context, and sometimes seeking to set them sharply apart. A frame can serve to either emphasize or downplay its contents.
Flexible Museum Identity The shape of the frame around the museum’s name references folded paper and post-it notes, and the neon colors are inspired by highlighter pens. The frame of the logotype can be stretched to fit different applications. Lolo Zhang, MFA Studio.
Publication: Page and Screen This publication has a double structure that is interpreted differently in print and online. Alex Jacque, MFA Studio.
1. Jacques Derrida, The Truth in Painting, trans. Geoff Bennington and Ian McLeod (Chicago: University of Chicago Press, 1987).
Seeing What Matters Even though the designer pixelated and abstracted the content of this simulated newspaper page, visual cues enable readers to understand the basic hierarchy. Chen Zui, MFA Studio.
Hierarchy
Design is the conscious effort to impose a meaningful order. Victor Papanek
Hierarchy is the order of importance within a social group (such as the regiments of an army) or in a body of text (such as the sections and subsections of a book). Hierarchical order exists in nearly everything we know, including the family unit, the workplace, politics, and religion. Rankings of power and position define who we are as a culture.
Hierarchy is expressed through naming systems: general, colonel, corporal, private, and so on. Hierarchy is also conveyed visually, through variations in scale, value, color, spacing, placement, and other signals. Expressing order is a central task of the graphic designer. Visual hierarchy controls the delivery and impact of a message. Without hierarchy, graphic communication is dull and difficult to navigate.
Like fashion, graphic design cycles through periods of structure and chaos, ornament and austerity. A designer’s approach to visual hierarchy reflects his or her personal style, methodology, and training as well as the zeitgeist of the period. Hierarchy can be simple or complex, rigorous or loose, flat or highly articulated. Regardless of approach, hierarchy employs clear marks of separation to signal a change from one level to another. As in music, the ability to articulate variation in tone, pitch, and melody in design requires careful delineation.
In interaction design, menus, texts, and images can be given visual order through placement and consistent styling, but the user often controls the order in which information is accessed. Unlike a linear book, interactive spaces feature multiple links and navigation options that parcel content according to the user’s actions. Cascading Style Sheets (CSS) articulate the structure of a document separately from its presentation so that information can be automatically reconfigured for different output devices, from desktop computer screens to mobile phones, PDAs, kiosks, and more. A slightly different visual hierarchy might be used in each instance.
The average computer desktop supports a complex hierarchy of icons, applications, folders, menus, images, and palettes—empowering users, as never before, to arrange, access, edit, and order vast amounts of information—all managed through a flexible hierarchy controlled and customized by the user.
As technology allows ever greater access to information, the ability of the designer to distill and make sense of the data glut gains increasing value.
Basic Typographic Hierarchy
The table of contents of a printed book—especially one with many parts—provides a structural picture of the text to follow. When books are marketed online, the table of contents is often reproduced to allow potential buyers to preview the book. A well-designed table of contents is thus not only functional but also visually exciting and memorable.
The basic function of a table of contents is to help readers locate relevant information and provide an image of how the book is organized. Does the text fall into a few main parts with various subdivisions, or does it consist of numerous small, parallel entries? The designer uses alignment, leading, indents, and type sizes and styles to construct a clear and descriptive hierarchy.
A poorly designed table of contents often employs conflicting and contradictory alignments, redundant numbering systems, and a clutter of graphic elements. Analyzing tables of contents—as well
as restaurant menus and commercial catalogs—is a valuable exercise.
What’s Wrong with this Picture? The function of a table of contents is to list the elements of a book and help readers locate them. In the table of contents shown here, the page numbers are stretched across the page from the chapter titles, and the word “Chapter” has been repeated twenty-four times. Manners for the Millions, 1932.
Lost in Paris In this table of contents for a travel guide, the designer has used a muddled mix of centered, justified, and flush-left alignments. The desire to create an overall justified setting dominates the logic of the page—hence the long first lines and rows of dots at the top level of information. The three titling lines at the head of the page are centered (a traditional solution), but the result is awkward in relation to the irregular mass of subheads, which weight the page to the left. The whole affair is further confused by the elaborate system of indents, numerals, and letters used to outline the book’s subsections. Blue Guide to Paris, 1957.
Book as Billboard This table of contents serves as a billboard for the book as well as a functional guide to its elements. The designer has approached the spread as a whole, with content stretching across it horizontally. The page numbers are aligned in columns next to the article titles, making it easy for readers to connect content with location. (No old-fashioned leader lines needed!) Chapter numbers aren’t necessary because the sequential page numbers are sufficient to indicate the order of the pieces. The book has many contributors, a point made clear through the type styling. Nicholas Blechman, Empire, 2004.
No hierarchy
Contrasting weight
Contrasting color
Alignment
Spatial intervals
Uppercase and spatial intervals
Weight, color, space, alignment
Scale, space, alignment
Italic, scale, color, alignment
Hierarchy 101 A classic exercise is to work with a basic chunk of information and explore numerous simple variations, using just one type family. The parts of a typographic hierarchy can be signaled with one or more cues: line break, type style, type size, rules, and so on.
HyunSoo Lim
Katie MacLachlan
Claire Smalley
Anna Eshelman
Menu of Options Designers use scale, placement, alignment, type style, and other cues to bring visual order to a body of content. Expressing hierarchy is an active, inquisitive process that can yield dynamic visual results. Typography I. Jennifer Cole Phillips, faculty.
Melissa Hecker
Five Fonts In this twist on the classic type specimen book, designers curate a collection of five typefaces and design a typographic hierarchy. Key content includes the typeface name, designer, year created, and descriptive or historical text. The compositional landscapes also contain a character set and some visual element focusing attention on the typeface’s expressive or formal qualities. In structuring multiple pages, students consider continuity and pacing. Covers and colophons become graceful extensions of the interior. Typography I. Jennifer Cole Phillips, faculty.
Theresa Bonaddio
Content Vacuum In this project the designer purposefully abstracted the content of newspaper pages, thereby drawing attention to the visual hierarchy. Chen Zui, MFA Studio.
Content Glut This program for an arts festival contains multiple levels of typographic and photographic information, requiring the designer to establish clear and consistent visual signals of separation across all hierarchical levels. Amy Hushen, Advanced Graphic Design. Jennifer Cole Phillips, faculty.
Dimensional Hierarchy
Messages applied to three-dimensional form have the added challenge of legibility across and around planes. Objects sitting in an environment are bathed in shadow and light. Unlike books that can conceal elaborate worlds inside their covers—automatically separated from exterior contexts—environmental messages must interact beyond their boundaries and become either a harmonious or poignant counterpoint to their neighbors.
Notice in these examples how type, color fields, and graphic elements carry the viewer’s eye around the dimensional form, often making a visual if not verbal connection with neighboring packages when stacked side by side or vertically.
Inverted Hierarchy The designer has placed suggestions for food compatibility at the top of the hierarchy on these spice bottles, subordinating the product name. Amy Lee Walton, Post Baccalaureate Workshop.
Dynamic Dosage A visual hierarchy is often necessary for objects in a series. This bold design for vitamin packaging magnifies unexpected product details and provides a surprising spout for dispensing tablets. James Anderson, Typography II. Jennifer Cole Phillips, faculty
Architecture of Snacks This design series for iconic snacks discards the usual overt cacophony of branding language in favor of a clear, stripped-down information hierarchy that situates the brand name neutrally with typography that sits back, while the celebrated ingredient takes center stage in exploded axonometric renderings. James Anderson, Advanced Graphic Design. Jennifer Cole Phillips, faculty
Going with the Flow The designer has built a visual language for a line of tampons that elevates the aesthetics for a more welcome place in the medicine cabinet. Visual pattern density signifies relative absorbency. Heda Hokschirr, Advanced Graphic Design. Jennifer Cole Phillips, faculty
Printed Layers Artist and designer Ryan McGinness piles numerous layers on top of each other to yield composite images that celebrate both flatness and depth. Ryan McGinness, Arab Cadillac Generator, 2006. Acrylic on wood panel, 48 inches diameter. Collection of Charles Saatchi. Courtesy Deitch Projects, New York. Photo: Tom Powel Imaging, Inc.
Layers
Under cities you always find other cities; under churches other churches; and under houses other houses. Pablo Picasso
Layers are simultaneous, overlapping components of an image or sequence. They are at work in countless media software programs, from Photoshop and Illustrator to audio, video, and animation tools, where multiple layers of image and sound (tracks) unfold in time.
The concept of layers comes from the physical world, and it has a long history in the traditions of mapping and musical notation. Maps and time lines use overlapping layers to associate different levels of data, allowing them to contribute to the whole while maintaining their own identities.
Most printing techniques require that an image be split into layers before it can be reproduced. From ink-jet printing to silkscreen and commercial lithography, each color requires its own plate, film, screen, ink cartridge, or toner drum, depending on the process. Digital technologies automate this process, making it more or less invisible to the designer.
Before the early 1990s, designers created “mechanicals” consisting of precisely aligned layers of paper and acetate. The designer or paste-up artist adhered each element of the page—type, images, blocks of color—to a separate layer, placing any element that touches any other element on its own surface.
This same principle is at work in the digital layers we use today, mobilized in new and powerful ways. The layers feature in Photoshop creates a new layer whenever the user adds text or pastes an image. Each layer can be independently filtered, transformed, masked, or multiplied. Adjustment layers allow global changes such as levels and curves to be revised or discarded at any time. The image file becomes an archaeology of its own making, a stack of elements seen simultaneously in the main window, but represented as a vertical list in the layers palette.
Layers allow the designer to treat the image as a collection of assets, a database of possibilities. Working with a layered file, the designer quickly creates variations of a single design by turning layers on and off. Designers use layered files to generate storyboards for animations and interface elements such as buttons and rollovers.
Although the layered archeology of the printed page or digital file tends to disappear in the final piece, experimental work often uncovers visual possibilities by exposing layers. Th
e Dutch designer Jan van Toorn has used cut-and-paste techniques to create images whose complex surfaces suggest political action and unrest.
Many designers have explored an off-register or misprinted look, seeking rawness and accidental effects by exposing the layers of the printing and production processes. Contemporary graphic artists Ryan McGinness and Joshua Davis create graphic images composed of enormous numbers of layers that overlap in arbitrary, seemingly uncoordinated ways.
Layers, always embedded in the process of mechanical reproduction, have become intuitive and universal. They are crucial to how we both read and produce graphic images today.
