In Class

Work Due

Sample Pages from Final Project.

How the Possum Got Its Tail

Work on Final Project

In groups, work on final project. Design cover and contributor page.

Contents: Cover, designer/contributor page (inside front cover), infromational comic pages, credits page (i.e., source of your information and images).

Last example: Comics in Nature.

In Class

Work Due

More Examples of Information Comics and Graphic Narratives

Cigarette ad from old issue of Playboy: Doral Auditions on Broadway.

How I Robbed a Bank.

Comics + Instructions: Warren Craghead's Petals, a Spell = an origami comic that you assemble yourself.

Fein, Ofer, and Asa Kasher. "How to do Things with Words and Gestures in Comics." Journal of Pragmatics 26.6. (1996): 793-808.

In Depth Example: Alice in Sunderland

Bryan Talbot's fascinating Alice in Sunderland combines a wide range of informational (comics) techniques in the course of its lush history of the city of Sunderland, in England, and its connection with the author and eccentric logician, Lewis Carroll. The book is a model of some of things we are trying to do with the final project.

• Page 10 (literary map of England)
• Page 48 (history)
• Page 57
• Page 58
• Page 59
• Page 170
• Page 171
• Page 175
• Page 317

All images copyright Bryan Talbot.

Work on Final Project

In groups, work on final project.

In Class

Work Due

Things to Look At and Talk About

Novelties & Examples

Kevin Cannon, Twin Cities Rock Atlas (.jpg) for City Pages.

Cannon documents and explains his design process for this project on his blog, Big Time Attic.

Selections from Eyewitness Art: Composition (.pdf).

Informational Comic Project

Informational Comic Project Requirements

Use a combination of image, text, design, and diagrammatic notation to inform and persuade your audience.

Each member is responsible for four pages.

There should also be a collaboratively designed front cover and an inside front-cover credits page. Neither of these should be numbered. Page numbering should begin on the first page of the comic and continue through the end.

The narrative can divide into chapters, or sections, or run continuously.

For layout dimensions: Use the ComiXpress zine page size (see ComiXpress Technical Specifications). This best fits and fills the lazer printer pages we're using.

The pages should be mainly three-tier layout with one to three panels per tier. Some pages can be two, four, or even five tier pages, however. Just not too many. Single panel, "splash" pages (or two-page spreads) should be used only for big diagrams or time-arrow causal narratives.

Use color or black and white (and gray) illustrations. Or a mixture.

Each group's project should make clear use of Links and/or Causal Arrows and Mapped Pictures/Annotated Images, in addition to (or in combination with) the traditional comics narrative format.

For example:

Source Hideki Mori, 2000.

Other notational elements include instructional sequences (e.g., how to escape from or kill a vampire); chronological or genealogical representations showing relations or changes over time (e.g., the "unlife" cycle of the zombie or monthly cycle of the werewolf); diagrams; tables; and charts.

Graphic Narrative Samples

Samples (with critique) from a recent issue of PS Magazine (for US Army and Marine Corps).

Thorkelson Graphics, The Comic Strip of Neoliberalism (series of informational comics)

Austin Kleon, Mind-Maps

Design Comics (something from Sun)

Other Examples

Final Project: Collaborative Informational Graphic Narrative

Decide on a coherent illustration method: drawing, digital, clip art, avatar art, photographs, digitally transformed photographs, stick figures, simple shape art, photo-collage, drawings on photograph background, etc. You may use several different techniques, but the difference needs to be semantic. That is, it needs to signify a difference in the information. E.g., an digital avatar to represent the narrator/author, black and white art to represent the past, drawings to represent abstractions, photographs to represent the real world. So as a group, work out a system.

Today: in your groups, begin planning. Discuss ideas, methods. Then start working on a storyboard for next week (this will be work due). You can find and print storyboard templates via the internet (here is one). Or just make your own.

Project Resources

To learn more about converting bitmap images into vector graphics, see Adobe's Creating Vector Content Using Live Trace (.pdf).

In Class

Work Due

Critical Review

Of type posters and other previous work . . .

Typography Review

Difficult text: Hadid

Easy text: Archigram

Easy (low-conflict) background: Hadid

Layout Review

Balanced spread: Falling Water Spread

Interesting paragraphs: Hadid

Interesting paragraphs (close-up): Hadid

Column change: Colani

Contast: Barragan

Timeline: Newson Biography

Image Use Review

Uncropped, small: Newson 1

Cropped and resized to bleed: Newson 2 (.pdf)

Matching image with text: Newson 3

Image direction: Hadid diagonals

Image direction: Falling Water

The Information Design in My Life, Part 3

The editors of a new book project, titled The Information Design in My Life, have asked x number of leading information designers, including yourselves, to each contribute two pages of pictures and comments on the eponymous subject.

Requirements

• Two page spread using a modular grid; 8.5 x 11 inches (portrait) with half-inch or less margins.
• Imaginative title for the spread.
• Optional one-sentence blurb under or above the title
• Paragraph of introductory text (your own or use fill text).
• Five images with five captions plus one close up with a caption.
• Crop images for emphasis.
• Supra-textual elements: page numbers, book title, perhaps also your name or an appropriate section title in the margin, etc. Note: do not use 1 ands 2 for page numbers.

Note: Captions can either be near the images the describe (proximity principle) or grouped together and associated with the images via numbers or thin connection lines; or some other system of your devising.

Objects of Reference

Online Article: Graphic Design at 70 M.P.H..

Information Graphic: The Zero-Energy Solution (NYTimes.com).

Selections from Eyewitness Art: Composition (.pdf).

Selections from Roy Lichtenstein: Interiors (.pdf).

See also Samara, Making and Breaking the Grid, pp. 31, 68-69, 164-65, 203.

Saving and Printing

Save finished work in your Projects folder in .indd and .pdf versions. Print a color copy for next week.

In Class

Work Due

Type Poster Project

Review designs. Work on posters.

Here's an example from last year: Cooper Black.

And another: Helvetica.

And a third: Univers.

And a different kind of poster as a comparison and as a potential model: Tiger Poster.

Final Project

That is = Educational or Argumentative Graphic Narrative Project

Make groups and brainstorm (i.e., so your poor instructor doesn't have to).

In Class

Work Due

Review of Waller

In preparation for the Desinger Bio DS due next week, I want to go over some concepts and terms in Waller, "Making Connections: Typography, Layout, and Language", and possibly some of the other readings. You'll be expected to use some of these or related concepts and terms in explaining, or reconsidering, your design process.

Type Poster Project

We'll take a look at some sample model posters (those linked for the last class), in order to get a good sense of the standard and variable features of the poster format and the type (history) poster genre.

As before with this kind of genre and format examination, we'll want to note not only what the user will expect, what her or she will want to do with the document, but also what works (what helps users to use the document) and what doesn't work (what interferes with their use of the document).

Following this, you'll begin work on your Type Poster Project.

In Class

Work Due

Weekly Novelties

Information Design: Lost Formats.

Waller Again

Weekly Design Review

Example one: Information Design in My Life

Example two: Information Design in My Life

Type History Posters

Review Poster Assignment.

Sample poster from last semester: Futura (Rich Couzzi)

Samples from outside of the class:

• Myriad Pro
• Garamond (front)
• Garamond (back)
• Futura (Kubrick-theme)
• Helvetica
• Not a type poster, but ...

More Sample posters.

Work on Type Poster Project

Make a list of five specific visual features, properties, or associations of your selected type and, when complete, post to the Type Features thread.

Draft initial designs for the Type Poster. The poster should be 18 x 24 inches, portrait (prefered) or landscape.

The poster should include at least 250 words of prose (approx.).

Set up your initial, base design using, and abusing, a modular grid; try different combinations (4 x 4, 12 x 18).

When setting up you page consider margins and bleed for the poster format.

Try to highlight at least six of the following anatomical features in your poster:

• baseline
• x-height
• cap height
• stem
• bowl
• serif
• ascender
• descender
• ligature
• finial
• terminal
• spine
• cross bar
• counter

Also, as you design, consider different styles (roman, bold, ilatic, oblique, black, condensed, expanded, small caps).

In Class

Work Due

Folder Review

Next week is mid-semester folder review, when I need to show off your work to other faculty. Please make sure that the following items are in your 415 "projects" folder on Eden and that their permissions are all set to "755":

• Quine project (.indd and .pdf)
• Trifold Brochure (.indd and .pdf)
• Trifold Brochure DS (.doc)
• Information in My Life (.indd and .pdf)
• Designer Profile, first draft or later (.indd and .pdf)

Novelties

Star Wars credits redone in the style of Saul Bass.

Poster in the style of Saul Bass.

The New $5 bill (interactive demo).

Sample two-page spread design

Re-Layout a Magazine assignment.

Brochure Review

Let's take a look at your impressive brochure designs:

• Mayan Brochures 1
• Aztec Brochures
• Mayan Brochures 2

Work in Groups and Individually on the Designer Project

In your group: Share and discuss your first draft and design examples.

Then continue working on your design.

In Class

Work Due

Using Color Meaningfully

Trifold Brochure/Design Principles Review

Trifold Brochure Feedback Sheet (.pdf)

Designer Profile / Biographical Dictionary Project

Let's take a look at some of the different kinds of (mainly) textual information that consistute a typical reference book biography text:

• Van Neumann bio text with minimal formatting
• Van Neumann text with visually differentiated content

Now let's take a look at some re-designs of the bio text from a previous information design project:

1. Front pages (color)
2. Front pages (black & white)
3. Back Matter
4. Other pages

The Assignment: Designer Bio/Profile Article.

A sample: Archigram (.pdf).

Sample Entries from Biographical Dictionaries

Below are representative examples of the biography reference book genre; they're functional but not especially exciting, design-wise. Evaluating them as designs, we should consider two questions in partiocular: (1) How does the design suit, or fail to suit, the subject? and (2) How does the design at all its levels convey, or fail to convey, effectively information about the subject? Putting question (2) in a different way: How does the design promote or assist what Waller called active reading?

The Examples

1. Ancient Greeks: Pericles, p. 1
2. Ancient Greeks: Pericles, p. 2
3. Ancient Greeks: Pericles, p. 3
4. Ancient Greeks: Pericles, p. 4
5. Ancient Greeks: Pericles, p. 5
6. Spies: Sara Edmonds (source: I Lie for a Living: Greatest Spies of All Time)
7. Spies: Sir Francis Walsingham (source: I Lie for a Living: Greatest Spies of All Time)

Form groups of three and discuss ideas, working methods, and division of labor for your designer profile project.

In Class

Work Due

• Final Draft for Trifold Brochure Project – save .indd and .pdf copy of the file in "brochure" folder (in your "projects" folder). (We'll go over exporting PDF again at the start of class.)
• Post a link to your "brochure" folder in a reply to the Brochure Project thread on the Class Forum.

• Bring your material (photos and notes) from the Information Design in My Life assignment (under Week 1 homework below)

SSH, 415 Folders, and Class Forum Review

In which we make certain that all is well with our our use of SSH, our 415 Folders, and our posting to the Class Forum.

Remember that in order to receive credit and/or a grade for your work (1) the work needs to be accessible by me in the proper folder(s); and (2) working links to your folders need to be posted in the appropriate threads on the Class Forum.

CRAP and Grid Review

. . .

Information Design in My Life, Part 2: Layout and Design

For this mini-project: You'll make an 8 x 8 inches mini-poster showing your audience the information design in your life. Think of this as a kind of promotional document for a class such this one, a way to let others know what information design is and how much it surrounds us.

As noted last week, you'll work with the material you prepared for the week 1 homework below).

Document reqirements:

• 8 x 8 inches page size; 1/4 inch margins and gutters.
• Nine modules. Six images, with text.
• One or more modules should be devoted to the title: The Information Design in My Life.
• Some modules should be all text.
• Some should be image only (but with an identifying number or letter or other symbol to link the image with the text).
• Some should combine image and text.
• Numbers or other symbols should be used to coordinate images with text.
• Include your (the author/designer's) name in the design (cf. Samara's name on the cover of his book).
• No more than two different fonts.

Review the Samara's introduction to the modular grid (p. 28).

Look at modular grid examples on pp. 38-39, 44-45, 50-51, 52-53, 70-71, 86-87.

As Samara's examples demonstrate: Margins should apply to the text but images can overflow the margins (and even "bleed" off the page edge).

In Class

Work Due

• Rough Draft for Brochure, images, and research.
• At the start of today's class, post a link to your "415" folder in a response to the "Quine Exercise" thread on the Class Forum. This is so I can give you credit for completing the exercise. Any problems with this, please talk me at the start of the class.

The Trifold Brochure Genre Review

Reading Test: How does this brochure read?

Essential Brochure Features (textual, etc.):

• Example 1
• Example 2
• Example 3
• Example 4

Brochure Design Possibilities

A trifold brochure whose content "moves":

1. Outside/front
2. Inside/back
3. Brochure as Story

Work on Trifold Brochure

In light of the preceding disucssion and examples, compare your research and design work. Make decisions. And then begin to revise your designs.

In Class

Work Due

• Bring the Samara grid book to class.
• Quine exercise part 1 and part 2 (finished version of what we did in the last class).

Exporting Your INDD file as PDF

As noted last week: we'll go over this at the beginning of class.

InDesign Typography Review

In preparation for the trifold brochure project, we'll review some of the main typographical powers of InDesign.

First, let's take a close comparative at some excellent fonts.

Next: Let's go over some of the Quine text in InDesign . . .

CRAP Principles/ Page Design Review

Visual logic of the page: uses page design to visually indicate what goes together, what doesn't.

CRAP = Contrast, Repetition, Alignment, and Proximity.

Another principle is Focus.

Let's compare these examples:

1. Rolex Awards for Enterprise
2. Example 2
3. Example 3
4. Example 4

Carefully examine Example 2 and list the following: (1) eight examples of CRAP; and (2) two things wrong with the design / two things you'd add or change. Give brief reason why for each.

Research Review for Trifold Brochure Project

First, let's go over the Tri-Fold Brochure Project assignment more slowly than we did last time.

Next: let's visit the RU Libraries Home Page.

Trifold Brochure: Examples and Analysis

We'll compare some examples, looking especially at conventional features – including supra-textual features – of the genre. Which features are variable, common but non-essential? Which are essential? What are some common artefactaul features of the genre?

Samples from previous semesters:

1. Spring Break Brochures
2. Architecture Styles Brochures
3. Furniture Styles Brochures
4. Brochure Typography

Other brochures:

1. Rolling Rock Beer (.jpg)
2. What Causes Storms on the Sun? (.pdf)
3. SB Museum of Natural History Membership (.pdf)
4. Dash Catering at the Barker Rotunda (.pdf)
5. Important Information on Dining Plans (.pdf)
6. Neptune Project (.html)
7. FUNSAT
8. Bayanihan Linux Thin Client Manager (.html)
9. Treks across Australia (.html)
10. Village of Homer, NY (.html)

Trifold Brochure Project: Initial Designs and Planning

In your design teams, begin working on your projects. Plan the design. Compare your research.

As part of your planning, it is essential that you collectively develop and agree on a grid to use to assist your design.

Look at the grid examples in Samara, pp. 52-53, 100-101, and 78-79 (the last being a good example of variation within group identity).

Prepare a first draft of your individual brochure for the next class. This should contain your text and images.

To begin: Open Adobe InDesign CS3. Then, as needed, browse through the InDesign CS3 tutorial to familiarize yourself with the basic InDesign layout and tools.

Next: Use this step-by-step tutorial to set-up your basic trifold brochure layout.

Finally, in your groups begin to draft your brochures – and arrange to email or otherwise share whatever parts you need to share.

In Class

Work Due

• Reply to "Introductions" thread on the Class Forum. In your reply: Add a link to your "projects" folder (copy and past the URL) and then test the link.
• Quine Exercise – save copy of your .indd file in your "projects" folder on Eden.
• The Information Design in My Life – save photos and text in your "hw" folder on Eden. Print out copy of text to turn in. –

Informational Documents and Information Design

Informational documents tell users what they need to know – store and transmit information – that helps them to do something = to perform an action, complete a task, solve a problem, etc.

Sometimes the information in a document is sufficient for this purpose. In other cases, the document works in conjunction with other sources of information.

Documents usually contain at least two kinds of information:

1. information that helps the user to do something beyond the document (e.g., buy a fashionable and professional looking business suit; write an English paper; catch up with what's happening in the latest season of 24; design a magazine spread using InDesign; find the toilet in a museum); and
2. information that helps the user to use the document itself (e.g., page numbers, table of contents, index).

Both kinds of information need to be considered with care when designing a document.

Information design seeks to maximize the effectiveness of a document – the way it successfully stores and transmits information.

Waller – informational documents divide into different genres, each with its own more or less rigorously codified set of features that users expect to find = conventions.

Lipton – (almost) universal design principles. These apply to the design of all genres of document.

Samara – grid as (almost) universal design techique.

• Design principles (Lipton)
• Design techniques, like using a grid (Samara)
• Knowledge of different document genres and their conventions (Waller, Kostelnick)
• Studying design models and examples (Samara again)
• Design equipment, like InDesign, Photoshop, and Illustrator
• Audience analysis
• Editorial feedback from your peers

Conventional Features of Informational Documents

Information design theorists Kostelnick and Roberts provide the following helpful schemes for analyzing the conventions of informational documents:

• Spectrum of Conventions
• Table of Conventions

Example: Two-page spread from Rutgers Magazine (.pdf,.jpg).

Photoshop Introduction

We'll take a look at some basic features of Adobe Photoshop CS3, concentrating on three features that you'll use for you Personal Bio Page (see below): layers, cropping, and saving (images) for the web.

For this introductory exercise, you'll need at least one of your "Information Design in My Life" images.

Quine Exercise: Part 2

Part 1 of the Quine exercise focused on layout and typography. Part 2 continues this focus but adds graphics and color to the mix.

In part 2 you'll make five variations of the announcement, sticking to the 8 in by 8 in dimensions:

1. Using only an 8-pt font from the list of typefaces for part 1, try to use white space, contrastive positioning, and what you learned from the Lipton reading to make the title look like/stand out as the title (i.e., without making it bigger than the other text).
2. Now make the title bigger and position it in the lower half of the layout (i.e., a counter-standard position).
3. Next, modifying one of your previous designs or starting a new design, add a focal image. The image CANNOT be a picture of Quine. Rather make an image (e.g., a collage or icon) in Photoshop (or Illustrator) that symbolizes LOGIC and use that in your design.
4. Make a version of the Quine announcement in the style of the Chinese restaurant menu (brochure) from last week.
5. Make a version of the Quine announcement in the style of the Zipcar brochure from last week.

Note: For the first two examples, stick to the 4 by 4 grid. For the last three, modify the grid (e.g., 3 by 3 or 4 by 3).

Tri-Fold Brochure Assignment: Preview and Prep

Samples from previous semesters:

1. Spring Break Brochures
2. Architecture Styles Brochures
3. Furniture Styles Brochures
4. Brochure Typography

Other brochures:

1. Rolling Rock Beer (.jpg)
2. What Causes Storms on the Sun? (.pdf)
3. SB Museum of Natural History Membership (.pdf)
4. Dash Catering at the Barker Rotunda (.pdf)
5. Important Information on Dining Plans (.pdf)
6. Neptune Project (.html)
7. FUNSAT
8. Bayanihan Linux Thin Client Manager (.html)
9. Treks across Australia (.html)
10. Village of Homer, NY (.html)

In Class

Introduction

In which we review the syllabus and policies; look at some examples; and discuss information, rhetoric, audience, document, genre, element, and some other basic terms of the course.

Examples

Let's go over a range of very different examples (by no means exhaustive) of information design.

Some of these documents convey a large amount of information, some very little. Some convey information in many different categories, some only in a few. And some are for a single kind of user (even a signle user) and some present different kinds of information for different kinds of user. Try to imagine and describe the user(s) of each document and to catalogue the different kinds of information as we look at each document in turn.

The documents:

1. Memo
2. Business cards
3. Paper money
4. Grand Central Station poster
5. Snack Flowchart (.gif)
6. Blame Game Image (.gif, NY Times Week in Review)
7. Poem in a critical edition
8. Email message
9. Comic-book splash page
10. Annotated text

Next compare the front and back sides of these two very differently designed folding brochures: Zipcar brochure and Chinese Restaurant take-out menu (.pdf). Which of these is more rigorously designed? What is the designer trying to say in each case? Who is the audience? That is: What do the designs tell us about their intended audiences? How are we meant to use these documents? What do they help the user to do?

At the same time: Notice the structural similarities between the two documents. Underlying the considerable stylistic differences, the two documents have surprising features of their designs in common. What are some of these features? And what does their similarity suggest about the practices of information design?

PDF Examples

Here are some documents designed especially for online distribution and use (as well as printed use):

1. Ride Sources
2. Triple A: Your Driving Costs 2007

Make Folders for Design Work

Use SSH to make coursework folders on Eden. Follow these step-by-step instructions.

Note: Don't use spaces or upper-case letters in file or folder names!

Design Basics: Layout and Typography

Let's begin with a look at some basic layout and typography terms and ideas. We'll spend a lot more time with these as the semester continues and you'll soon encounter them in depth in the reading.

To help us with this crash introduction, let's take a look at the Text and Grid pages at Thinking with Type.

Quine Layout and Typography Exercise

This exercise will give you some initial practice with layout and typography. You'll work with (fictional) text announcing an exhibition at Harvard devoted to the American philosopher Willard Van Orman Quine.

This project is based on Ellen Lupton's Grid Project at Thinking with Type.

For examples, see Thinking with Type and Samara, Making and Breaking the Grid, pp. 22-23. Here is a (pretty mediocre looking) scan (.pdf) for use in class.

To begin: Open Adobe InDesign CS3. Then, as needed, browse through the first two parts of this InDesign CS3 tutorial to familiarize yourself with the basic InDesign layout and tools.

Following the model for this assignment, create a new document in InDesign. Your document will have eight pages, one for each variation. Your page size is 8 x 8 inches. Create a grid with 1/4-inch margins all around and four vertical columns with 1/4-inch gutters between them.

When your document appears on screen, use guidelines to divide the grid again horizontally.

Once you've set up your grid, arrange the Quine text on the grid. Create four different designs on four different pages, all using the same underlying grid. Use typefaces from the list below. Do two layouts using a single size of type only (e.g., 8-pt or 10-pt), and one layout that introduces one additional size of type. The last layout can use any combination of sizes but should use at least three different sizes.

Note: You may modify or selectively remove the punctuation from the basic text, if necessary. Otherwise you must use the complete text on each page.

If possible, limit yourself to the fonts below. Half your pages should use only a single font. The other pages can use one or two fonts. You should use a serif font (e.g., Garamond) at least once and a sans-serif font (e.g., Gill Sans) at least once.

• Helvetica
• Garamond
• Myriad
• Bodoni
• Futura
• Helonia
• Constantia
• Gill Sans
• Univers

Note: Not all of these typefaces are available in InDesign. See you what you find there – and what you might be able to find and download for free via the internet.

As you work, a few points to keep in mind:

• The information you're laying out is divided both hierarchically, by impoortance, and into different categories. What will your intended document user notice first, second, third, and so on?
• Use lots of white space. Try to use the white space to guide your user's attention. For instance: We generally think of the title of a document like this one appearing in a larger font than the rest of the content. But if all the textual content is set at the same size, how might you use white space to set apart/emphasize the title?
• Avoid over-using all CAPS.

Saving Your Quine Project

Save your work often and occasional copy your work either to Eden or to a flash drive. When you're finished, save your InDesign file in your "projects" folder on Eden.

You should be able to complete this exercise in class. However, I encourage you to take one more look at the project and make adjustments. The finished work is due by the start of class next week. Submit a printed version and save a PDF version along with the InDesign file in your "projects" folder.

Note: Have the InDesign file (.indd) ready for next week's class; we'll go over "exporting" it into PDF format at that time.

Next Week . . .

Next week, among other things, we'll discuss the readings; work on an in-class exercise building on the "Information Design in My Life" homework assignment, and begin working on the Meso-American Cultures tri-fold brochures.