A*New*
ProgramforGraphic
DesignTeaching
Guide

David Reinfurt

2

A *New* Program for Graphic Design
TEACHING GUIDE
Assignments and suggested reading per chapter
LevelsHigh schools, bachelors, and masters programs
Faculties
Graphic design, visual communication, communication design, design theory,
typography, UX design, branding, social design, advertisingThis free teaching guide is for an introductory graphic design class, aimed atstudents with no previous background in the subject. This guide has practicalassignments and suggested readings that can be used by educators with students
across different levels. These activities are intended for students to understand therelationship between typography, visual literacy, and interfaces through practiceand 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 wenavigate daily. Organized by the chapters of A *New* Program for Graphic Design,
students can prepare by reading the chapter from which the assignments arederived. The aim of these exercises is for students to get a hands on understand of
the major shifts in print and design technologies. Through these assignments andpeer critiques, students should gain comfort 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 available here:
t-y-p-o-g-r-a-p-h-y.org/aboutg-e-s-t-a-l-t.org/about
i-n-t-e-r-f-a-c-e.org/about

3

1.1 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. Thisreading 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 to understand how typographic techniques have changed over time in order to develop a nuanced facility in using thecurrent 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 theedited text (approximately two paragraphs). Editing
should be done to accommodate the number ofstudents and divide the text evenly. All pairs work to
the same line length, or measure, of 34 picas, and thesame type size of 14 points with 2 points of leading
between lines. Each pair will use a different font oftype and these should be as mixed as possible given
the resources of the shop.
Weeks 2, 3: Work through the stages of typesetting,
proofs, and corrections iteratively with the assistance of the instructor to arrive at final prints of twoparagraphs per group on one letter-sized page. The
number of final prints depends on the number ofstudents, one copy per student. Each pair will thendesign, typeset, and print one cover page using
the same type size and font used to set the text. Itsarrangement, 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 toread the text together, carefully considering Beatrice
Warde’s distinct ideas about how typography should
work, filtered through the hands-on labor of thepreceding weeks. Considering how slow and involved
this typesetting process is 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 isfundamentally unchanged from how it has been donefor 500 years. Individual metal letters are combined in
a composing stick upside-down and backwards, lines
are assembled in a chase as a page, set on the press
bed, sandwiched with wood-based paper, inked,
reversed, and printed.

4

1.2 Mechanical typographic technology
Shifts in typographic technology inevitably provoke deep changes in what can besaid, 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 ofnews. What resulted from being able to set the paper so much more quickly withphototypesetting? More editions per day? More money for reporting? Perhaps arearrangement 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 afuture 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 wealready in it?

Pages 42–52
Themes: photography, collage
Further reading
Farewell Etaoin Shrdlu (30 min video)
Elements of Typographic-Style (Robert Bringhurst)

Assignment 2, PhotocopierRe-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 firstmachines 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 thecorresponding position, light was focused throughthe disc onto photographic paper, exposing the letter.
The result was camera-ready typography for making
printing plates. Phototypesetting eliminated the heavymachinery required for automated metal typesetting
and replaced lead with light.
Machines evolved rapidly, with media for storing previously typeset material and computerized front andback ends. Given the large investments in mechanicaltypesetting, phototypesetting was only ever a temporary solution. After less than 50 years, it was replacedby digital typesetting.
Weeks 1, 2, 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 aslaser-printed sheets set in Monotype Grotesqueaccording to six typographic specifications of measure
and leading. Choose one as a starting point and use
these galleys as raw material for reconfiguring thisessay 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.

5

1.3 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 soquickly that typographic templates must be designed for updated material to automatically flow into. 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 andtypographer who immigrated to the United Statesin 1946. He was a committed modernist: designingbooks, type, exhibitions, buildings, and interiors, aswell as writing and speaking around his convictions.
“On Typography” is equally direct. Bayer argues for an
uncompromising approach which 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 thediminished 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 his differs from Bayer’s insome ways. Unlike Bayer, Tschichold advocates apronounced use of contrast, type size, and rules toemphasize the hierarchies of information in a text.
Where Bayer’s approach to typography could beapplied universally to any number of texts, Tschicholdsuggests 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 toclearly convey its internal structure.
Week 1: Begin with “On Typography” by Herbert
Bayer. Closely read the text in order to typeset it as any
number of letter-sized pages in a way that reflects andamplifies 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 asecond 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 sametext produced as any number of one-sided laserprinted letter-sized pages.

6

2.1 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 designfor the last 100 years, or approximately as long as the discipline has existed. Whendesign is employed to the careful manipulation of the relationships between distinct
visual forms, a synthesis can be realized, with a corresponding multiplier effectto the power of that graphic form to contain and carry meaning. Essentially, anobject’s design should correspond to the way that it’s used, and it should resolvethat use in a coherent shape. Is there or can there be one valid gestalt, a *true form*
for a design problem which 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 literalconventions such as the word “stop.” This will makeyour task difficult, perhaps even impossible. Can asingle graphic ever be autonomous, not relying on asystem 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 whosematerial 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, basedon 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.
In order to successfully fulfill this assignment, it may
be necessary to cheat, strategically ignoring some ofthe embedded restrictions.

7

2.2 Visual Thinking
Visual thinking wrestles with the differences between perceiving and thinking—adifferent kind of thinking that uses the spatial capacities of your brain to think inimages and solve problems intuitively. Reading the visual world is a synthetic act,
and it requires individual participation rather than merely passive consumption.
What are the viewer’s role in the process of design and what are the ethics of thisengagement?

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,prior to 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. Visual syntax works in a similar way, 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, basedon 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 formof the Stop sign.

8

2.3 Visual Literacy
What does your computer show when the system is busy? The “spinning beach ballof death” is a small animated graphic which 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 thatsomething is in process, and that it’s okay for it to be in 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 yourideas 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 animationfrom 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.

9

2.4 Design Process
Color is a perceptual phenomenon. The color we see is shaded by its context–thelight, 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 thecolors we see in print. Colors on a screen are produced directly by emitted light inan additive process. Colors in print are produced by absorbed and reflected lightin 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. CMYKDesign a collection of animated, printed, and physicalgraphics which 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 manifest by RGB and CMYK color models.
Week 1: Starting in a library, find books that detailthe 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 which concisely identifies the differences
between RGB and CMYK color.
Week 2: The most effective way to learn about color isby directly making it and looking at it. Therefore, proceed empirically, comparing printed colors to screen
colors. For example, what happens when you print thebrightest 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 timeand discover if there is a corollary effect on screen.
Or focus only on the color green which is tricky torender 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 justthat, 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 arevariable and completely open. Where the previous
assignments were prescribed and directed, the working method for this project should more accuratelyreflect 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, buteverything made over the course of this concerted
research effort. The result may more closely resemblea science fair than a graphic design critique.

10

3.1 Interface
This semester-length assignment connects graphic design to the design ofsoftware interfaces. The single project allows an individual in-depth investigationof a broader assignment and will leverage students working together to refine theirindividual 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 Apple Watch in order 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 ofmeans 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 sandclocks; it could be a look into the changing schedulesof contemporary workers; circadian rhythms and sleep
cycles; or how an atomic clock keeps time. What ischosen must sustain work over the semester, so it
should be genuinely fascinating.
Weeks 3–4: Prepare a brief research presentationon the area of interest. This presentation (more of aperformance) 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 into the presentation.
Weeks 5–11: Begin sketching the clock interface, andwork iteratively every week to develop the concept
both conceptually and visually. Along with each weekof development, review all work as a group. This isan extended process by design so that an idea canemerge from careful working and reworking of an
initial idea which 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 itmatters.

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 theweather, keep track of daily exercise, measure andrecord heartbeats, play podcasts, Apple Pay for goods
and services, and so on. Many of its functions werefamiliar from the iPhone, but the way in which thesewere now presented to the user was entirely novel. For
example, Calendar was reconceived from the spatial
metaphor of a month at time, days organized on a
two-dimensional grid to a temporal sequence of notifications delivered over the course of a day. Messages
was also redesigned from a digressive, interactive
chat tool to a more immediate and lower bandwidthchannel to encourage brief replies with templated
responses such as “Hello!” “What’s up?” and “On myway.” These changes, accommodations to the small
screen size and bodily location, were interface designchanges. The interface is a collection of choices andtogether these form a specific point of view which hasconsequences 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 morecomparable from one student to another, as well
as more plausible within the existing Apple Watch
interface. As it turns out, redesign of the Apple Watch
clock face is the one part of the interface which Apple
has identified as off-limits to third-party developers.