turbify A *New* Program for Graphic Design
A *New* Program for Graphic Design TEACHING GUIDE
Assignments and suggested reading per chapter
Levels
High schools, bachelors, and masters programs
Faculties
Graphic design, visual communication, communication design, design theory, typography, UX design, branding, social design, and advertising This free teaching guide is for an introductory graphic design class, aimed at students with no previous background in the subject. This guide has practical assignments and suggested readings that can be used by educators with students across different levels. These activities are intended for students to understand the relationship between typography, visual literacy, and interfaces through practice and discussion.
The guide asks us to look at graphics all around us, from the public environment, electronic media, and the flotsam of commercial messaging that we navigate daily. Organized by the chapters of A *New* Program for Graphic Design, students can prepare by reading the chapter from which the assignments are derived.
The aim of these exercises is for students to get a hands-on understanding of the major shifts in print and design technologies. Through these assignments and peer critiques, students should gain comfort in building both a formal vocabulary for approaching design and a literal vocabulary for speaking about it. Book and ebook available at Inventory Press, and wholesale orders available via DAP ePub edition also available via O-R-G and at Amazon
Additional resources and readings are available here:
- t-y-p-o-g-r-a-p-h-y.org/about
- g-e-s-t-a-l-t.org/about
- i-n-t-e-r-f-a-c-e.org/about
Writing and reading at the same time: typography
Reading and writing are intimately connected. There’s probably a biological reason why we learn both at the same time. Typography has something of a split personality—it’s both the technical act of writing words into the world by giving them form, and it’s also a way of understanding the world through the forms of its writing. This reading and writing at the same time, or typography, is the root level skill of graphic design and the idea is to learn something about typography and therefore graphic design by practicing it, and along the way understand how typographic techniques have changed over time to develop a nuanced facility in using the current digital tools.
- Pages 19–41
- Themes: typography, reading, letterforms, communicating ideas
Further reading
- A Man of Letters (Oliver Sachs)
- Charlotte’s Web (E.B. White)
- The Topography of Language (Mark Changizi)
Assignment 1, Letterpress
Typeset and letterpress print “The Crystal Goblet or Printing Should Be Invisible” (1955) by Beatrice Warde.
Week 1: Working in pairs, typeset one section of the edited text (approximately two paragraphs). Editing should be done to accommodate the number of students and divide the text evenly. All pairs work to the same line length, or measure, of 34 picas, and the same type size of 14 points with 2 points leading between lines. Each pair will use a different font of type and these should be as mixed as possible given the resources of the shop.
Weeks 2, and 3: Work through the stages of typesetting, proofs, and corrections iteratively with the assistance of the instructor to arrive at final prints of two paragraphs per group on one letter-sized page. The number of final prints depends on the number of students, with one copy per student. Each pair will then design, typeset, and print one cover page using the same type size, and font used to set the text. Its arrangement, editing, and graphic design are open.
Print two copies of the cover page.
Week 4: Collate all printed pages to assemble complete sets of the group’s collective work. Meet to read the text together, carefully considering Beatrice Warde’s distinct ideas about how typography should work, filtered through the hands-on labor of the preceding weeks. Considering how slow and involved this typesetting process should afford a much closer reading.
This assignment requires access to a letterpress print shop. If no access is possible, please watch videos on YouTube of setting metal type, and jump to Assignment 2. Setting metal type and printing today is fundamentally unchanged from how it has been done
for 500 years. Individual metal letters are combined in a composing stick upside-down and backward, lines are assembled in a chase as a page, set on the press bed, sandwiched with wood-based paper, inked, reversed, and printed.
Mechanical typographic technology
Shifts in typographic technology inevitably provoke deep changes in what can be said, how it is printed, and what effects these printed words have in the world. It’s useful to think about what these technical changes allowed for the distribution of news. What resulted from being able to set the paper so much more quickly with phototypesetting? More editions per day? More money for reporting? Perhaps a rearrangement of physical space? Or more resources for long articles and also a broader range of quick-hit stories? This combination of photography and typography produces a form of plastic writing as visual as it is literal. Can we imagine a future where where writing would consist as much of images as letters, and where photos and text would be seamlessly synthesized into a new typography? Are we already in it?
Pages 42–52
Themes: photography, collage
Further reading
Farewell Etaoin Shrdlu (30 min video)
Elements of Typographic Style (Robert Bringhurst)
Assignment 2, Photocopier
Re-typeset “The New Typography” (1923) by László Moholy-Nagy using a photocopier. X-acto knives, glue sticks, and a large-format photocopier are required. Phototypesetting was always a transitional typographic technology. Invented in 1946, the first machines used a typewriter keyboard to manipulate a glass disc with letters on its perimeter. When a key was pressed on the keyboard, the disc rotated to the corresponding position, the light was focused through the disc onto photographic paper, exposing the letter. The result was camera-ready typography for making printing plates. Phototypesetting eliminated the heavy machinery required for automated metal typesetting and replaced lead with light.
Machines evolved rapidly, with media for storing previously typeset material and computerized front and back ends. Given the large investments in mechanical typesetting, phototypesetting was only ever a temporary solution. After less than 50 years, it was replaced by digital typesetting.
Weeks 1, 2, and 3: Using only a black-and-white photocopier and digitally prepared printed type galleys, typeset the text as one or more letter-sized pages. When phototypesetting was most widely employed (c. 1960–90), type houses ran equipment to provide
camera-ready galleys of a manuscript according to precise typographic instructions. Because type houses no longer exist, galleys will be provided as laser-printed sheets set in Monotype Grotesque according to six typographic specifications of measure and leading. Choose one as a starting point and use these galleys as raw material for reconfiguring this essay on the photocopier so that its meaning is amplified by its typesetting.
Week 2: Visit a library and review Moholy-Nagy’s work, selecting one piece to present. Make a photocopy, bring it to class, and be prepared to speak about it. These images then become collective material for individual projects. Images can—and likely should—
work together with typography in the completed project.
Week 4: Produce a final text as any number of onesided photocopied letter-sized pages.
Digital typographic technology
Digital typesetting arrived with the introduction of the Apple Macintosh personal computer in 1984. It replaced phototypesetting which existed for the previous 50 years, while metal typesetting had persisted for almost 500 years. Setting even a short text in metal type is very slow. Phototypesetting is considerably faster. Now with digital typesetting, it has accelerated exponentially, and, as a result, information circulates much faster. On the internet and over networks, information arrives so quickly that typographic templates must be designed for updated material to automatically flow. How does this change our relationship to and value of text? Pages 53–97 Themes: patterns, symmetry, production process, information landscapes
Further reading
Handbook of Regular Patterns: An Introduction to Symmetry in Two Dimensions (Peter S. Stevens)
Elements of Typographic Style (Robert Bringhurst)
A Reexamination of Some Aspects of the Design Arts from the Perspective of a Woman Designer (Sheila Levrant de Bretteville)
Assignment 3, Computers
Typeset “On Typography” (1967) by Herbert Bayer twice, using contemporary digital typesetting software.
This assignment requires working faster, typesetting one text in two different ways over two weeks. Herbert Bayer was an Austrian graphic designer and typographer who immigrated to the United States in 1946. He was a committed modernist: designing books, type, exhibitions, buildings, and interiors, as well as writing and speaking around his convictions. “On Typography” is equally direct.
Bayer argues for an uncompromising approach that dictates the structure of text on a page, its arrangement in columns, subheads, and sections. He provides a collection of typographic prescriptions, including sans serif type, the reduction of weights to a minimal set, and the diminished contrast of type with its background to produce a universal typography that’s smooth, refined, consistent, and eminently modern. In “The Principles of The New Typography,” Jan Tschichold also argues for a modern conception of typography, although he differs from Bayer’s in some ways. Unlike Bayer, Tschichold advocates a pronounced use of contrast, type size, and rules to emphasize the hierarchies of information in a text.
Where Bayer’s approach to typography could be applied universally to any number of texts, Tschichold suggests a more contextual response. He argues that the setting of a given text should be determined directly from a close analysis of its form and should use all of the tools of modern graphic typography to convey its internal structure.
Week 1: Begin with “On Typography” by Herbert Bayer. Closely read the text to typeset it as any number of letter-sized pages in a way that reflects and amplifies its arguments.
Week 2: Read “The Principles of The New Typography” by Jan Tschichold. Do not re-typeset Tschichold’s text but rather apply Tschichold’s arguments to a second typesetting of Bayer’s “On Typography” text.
Understand and decide how the two Swiss typographers’ approaches are similar and how they are different. These insights should inform the two typesettings. The two will likely be related but must also be distinct. The final product is two versions of the same text produced as any number of one-sided laser-printed letter-sized pages.
Giving form
Gestalt roughly translates from German as “shape,” and it is the proper name given to this account of perception. Gestalt has been a central tenet of graphic design for the last 100 years, or approximately as long as the discipline has existed. When design is employed for the careful manipulation of the relationships between distinct visual forms, a synthesis can be realized, with a corresponding multiplier effect to the power of that graphic form to contain and carry meaning. Essentially, an object’s design should correspond to the way that it’s used, and it should resolve that use in a coherent shape. Is there or can there be one valid gestalt, a *true form* for a design problem that matches perfectly its specific functions and resolves these in one eternal whole?
Pages 99–117 Themes: gestalt psychology, form, movement, optical illusions, signage
Further reading
Investigations on Gestalt Principles (Max Wertheimer) Art Design and Gestalt Theory (Roy Behrens)
Symbols (David Gibbs)
Illusions and Brain Models (R.L. Gregory)
Assignment 4, Stop
Design an autonomous graphic form that means “Stop.” The new Stop sign must not rely on existing symbolic conventions such as an octagon or a raised hand, graphic conventions such as a slash or an X, or literal conventions such as the word “stop.” This will make your task difficult, perhaps even impossible. Can a single graphic ever be autonomous, not relying on a system of differences in which to register its meaning?
Keep in mind that the Stop sign is not a physical sign manufactured in steel and reflective vinyl. Instead, think of the Stop sign as more of a Stop symbol whose material support is a person’s brain.
Week 1: Explore graphic solutions by making 100 small pencil sketches arranged ten per sheet on letter-sized paper.
Week 2: Select the five most effective sketches, based on feedback. Render each as a black-and-white hardline drawing on letter-sized paper. Compare notes with others on the results as a means of establishing a set of criteria for what makes a graphically successful Stop sign.
Week 3: Based on the most successful drawings from
Week 2, and incorporating relevant feedback, develop three alternative versions on letter-sized paper.
Week 4: Produce a single, refined Stop sign. To successfully fulfill this assignment, it may be necessary to cheat, strategically ignoring some of the embedded restrictions.
Visual Thinking
Visual thinking wrestles with the differences between perceiving and thinking—a different kind of thinking that uses the spatial capacities of your brain to think in images and solve problems intuitively. Reading the visual world is a synthetic act, and it requires individual participation rather than merely passive consumption. What is the viewer’s role in the process of design and what are the ethics of this engagement?
Pages 118–123
Themes: perception, imagination, reinvention, problem-solving, spatial thinking
Further reading
A Plea for Visual Thinking (Rudolph Arnheim)
Language of Vision (Gyorgy Kepes)
Assignment 5, Go
Design an autonomous graphic form that means “Go.” This assignment begins in Week 2 of the Stop sign, before completing the final version; the task now both broadens and forks. Two or more graphics can work together in a visual syntax to mean something that neither means on its own. Syntax describes the relations between words and dictates their positions to produce well-formed sentences in a language. The visual syntax works similarly, with graphics standing in for words. As “Go” means the opposite of “Stop,” then the two graphics should have an opposing relation to each other. The graphics should convey their relationship immediately, intuitively, and visually to produce a very limited graphic language composed of these two symbols. For example, in a stoplight, green means “Go,” and red, “Stop.” Green and red are opposite colors.
Week 1: Explore graphic solutions by making 100 small pencil sketches arranged ten per sheet on letter-sized paper.
Week 2: Select the five most effective sketches, based on feedback. Render each as a black-and-white hardline drawing on letter-sized paper.
Week 3: Produce a single, refined Go sign. As with the Stop sign, the Go sign must not rely on symbolic, graphic, or literal conventions. The Go sign will be directly related to, and dependent on, the form of the Stop sign.
Visual Literacy
What does your computer show when the system is busy? The “spinning beach ball of death” is a small animated graphic that comprises a rotating rainbow pinwheel. The animation that displays when loading new posts in the infinite scroll of Instagram is another example. Another is the animated ellipsis of Apple Messages. These graphics are called perceived responsiveness icons and indicate “in process,” “busy,” or “thinking.” In our increasingly instant world, how do we show that something is in process, and it’s okay for it to be in the process? Pages 124–133 Themes: syntax, definitiveness, resolution, simplicity, temporal displays, interaction
Further reading
A Primer of Visual Literacy (Donis A. Dondis) Interaction of Color (Josef Albers)
Assignment 6, Wait
Design an animated graphic that means “Wait.” This is a new assignment, not a continuation of Assignment 1. Where the Stop and Go signs were static symbols, the Wait graphic is dynamic, an animation designed for an electronic screen.
Week 1: Begin by looking at a range of animated wait graphics. Prepare ten letter-sized sheets of pencil sketches to develop ideas. The number of alternatives is open, but fill these pages with alternatives.
Week 2: Building on your pencil sketches, draw your ideas on a computer as a series of discrete frames in an animation. Assemble the frames into a moving graphic. Prepare at least three alternatives.
Week 3: Based on feedback, select one animation from Week 2 and prepare a final Wait graphic at both 400 × 400 pixels and 40 × 40 pixels. The smaller version can be adjusted from the larger to account for its low resolution. The final product is two animated files.
Design Process
Color is a perceptual phenomenon. The color we see is shaded by its context–the light, the medium, the composition, even the culture, and its language. Concretely (for graphic designers), the colors we see on a screen are not the same as the colors we see in print. Colors on a screen are produced directly by emitted light in an additive process. Colors in print are produced by absorbed and reflected light in a subtractive process. How can we use a design process to study such a shifting subject?
Pages 134–153
Themes: symbols, color, pattern, screen vs paper
Further reading
A Language of Signs and Symbols (Bruno Munari)
The Triangle (Bruno Munari)
Illusions and Brain Models (R.L. Gregory)
Intuition and Ideas (Paul Rand)
Assignment 7, RGB v. CMYK
Design a collection of animated, printed, and physical graphics that articulate the differences between RGB and CMYK color models.
This is a design research project. It is considerably more open-ended and self-directed than the previous two assignments. The goal is to understand the fundamental distinction between additive and subtractive color, as manifested by RGB and CMYK color models.
Week 1: Starting in a library, find books that detail the distinctions between the two color models. Let the selection of books help to guide the next steps in the research process. Continue the research online. Prepare a five-minute presentation to be shown in
Week 2 concisely identifies the differences between RGB and CMYK color.
Week 2: The most effective way to learn about color is by directly making it and looking at it. Therefore, proceed empirically, comparing printed colors to screen colors. For example, what happens when you print the brightest on-screen green and compare the printed sheet to the glowing screen?
Using these practical experiments as a guide, refine the inquiry to one part of this broad problem. For example, investigate how printed ink fades over time and discover if there is a corollary effect on the screen. Or focus only on the color green which is tricky to
render in both models. Or investigate sub-pixels on-screen and halftone dot patterns on the printed page. From there explore the limits of what either system can handle. All of these experiments are just that, hands-on experiments. This is a design research
project where thinking and making are collapsed into one fluid activity.
Weeks 3–4: The final products of this assignment are variable and completely open. Where the previous assignments were prescribed and directed, the working method for this project should more accurately reflect the lateral thinking and meandering processes
that are the stock and trade of a lively design practice. For the final review, bring not just one project, but everything made throughout this concerted research effort. The result may more closely resemble a science fair than a graphic design critique.
Interface
This semester-long assignment connects graphic design to the design of software interfaces. The single project allows an individual in-depth investigation of a broader assignment and will leverage students working together to refine their projects through a mix of critique and user testing. This assignment will explore information design and visual problem solving specifically for electronic media. Pages 171–253 Themes: information design, electronic media
Further reading
Design Interface (Gianni Barbacetto) From Sundials to Atomic Clocks (Jane Fitz-Randolph and James Jespersen)
The Interface Experience—A User’s Guide
The Interface (John Harwood)
By Design (Alice Rawsthorne)
Assignment 8, Apple Watch
Redesign the face of the Apple Watch to change the way time is read. This is an in-depth, semester-length assignment.
Weeks 1–2: Begin by reading widely about a variety of means for time-keeping. From this basis, identify one aspect of time-keeping and display of particular interest. This could be an investigation of sundials or sand clocks; it could be a look into the changing schedules of contemporary workers; circadian rhythms and sleep cycles; or how an atomic clock keeps time. What is chosen must sustain work over the semester, so it should be genuinely fascinating.
Weeks 3–4: Prepare a brief research presentation on the area of interest. This presentation (more of a performance) must be exactly 16 minutes long. The presentation cannot run shorter. If it runs long, it will be cut off. Consider including some kind of temporal flexibility in the presentation.
Weeks 5–11: Begin sketching the clock interface, and work iteratively every week to develop the concept both conceptually and visually. Along with each week of development, review all work as a group. This is an extended process by design so that an idea can
emerge from the careful working and reworking of an initial idea that addresses a fundamental interest.
Week 12: Prepare a five to eight-minute video that demonstrates the proposed clock interface, how it works, what it looks like, how it behaves, and why it matters.
The Apple Watch is of both the future and the past, impossibly retrograde and fantastically forward-pointing. Apple Watch can send email, transcribe, and send text messages, show the next events on a calendar, navigate step-by-step to a destination, forecast the
weather, keep track of daily exercise, measure and record heartbeats, play podcasts, Apple Pay for goods and services, and so on. Many of its functions were familiar from the iPhone, but how these were now presented to the user was entirely novel. For
example, the Calendar was reconceived from the spatial metaphor of a month at a time, days organized on a two-dimensional grid to a temporal sequence of notifications delivered over a day.
Messages was also redesigned from a digressive, interactive chat tool to a more immediate and lower bandwidth channel to encourage brief replies with templated responses such as “Hello!” “What’s up?” and “On my way.” These changes, accommodations to the small screen size and bodily location were interface design changes.
The interface is a collection of choices and together these form a specific point of view that has consequences on how the watch is used. Using the existing Apple Watch Human Interface guidelines and departing from the conventions only if and when necessary should help projects be more comparable from one student to another, as well as more plausible within the existing Apple Watch interface. As it turns out, the redesign of the Apple Watch
clock face is the one part of the interface that Apple has been identified as off-limits to third-party developers.
Documents / Resources
 |
turbify A *New* Program for Graphic Design [pdf] User Guide A New Program for Graphic Design, Program for Graphic Design, for Graphic Design, Graphic Design, Design |
