Information Design

---

LECTURE TOPICS

Elements of Navigation

Global Information

Folios, Chapters, Sections

LAB TOPIC: Master pages

IN-CLASS EXERCISE

Create Master pages for Catalog. 

Create automatic page numbers, section heads or folios and other navigation.

--------------------

HOMEWORK: Navigation

Continue work on the document from last assignment and class. Create master pages with automatic page numbers. Create a folio, and section navigation.

_______________________________

FOCUS and SEQUENCE 

LECTURE TOPICS

• Location, Orientation and Starting Points
• Balance, Value, Relative Contrast
• Direction and Cues — Leading the Eye

LAB TOPICS

InDesign and Illustrator

Illustrator Review

- Creating a New Document

- Building Shapes

- Building Lines

- Building Text Objects

- Transforming Objects

IN-CLASS EXERCISE

Instructions and Diagrams

Building a House of Cards (Illustrator)

--------------------

HOMEWORK: Create Direction and Sequence

Design on paper, and then build a poster or booklet which shows 

- How to build a house of cards

- How to tie a bow

- How to connect the parts of your computer, peripherals and local network

- How to make and bake a pie

OR. . .

- Any Instructions of Your Choice

1) Think of a task which you know how to do and could explain visually to someone else. Write it down. 

2) Sort and organize the information. How many steps are there. How many parts are there? How much explanatory text do you need? Will text help?

3) Sketch it out, step by step. Create a storyboard, if appropriate. The poster must measure 11x17”. A booklet must measure 7” wide by 8.5” high. Divide the format to visually organize information. Include navigation. Create a sense of hierarchy and direction. How do we know what kind of information this is? Use a title, headings, labels. How do we know where to start? Show us where to go next.

3) Design and produce your instructions. Use InDesign or Illustrator. You can use Photoshop if your instructions are entirely visual, using photographs, or to edit photos for placement in another application. If you are already familiar with Powerpoint you may use it, but spend more time on the layout and sequence of information, not transitions or animation.

4) You do not need to create realistic drawings. Use basic shapes and lines. How does the user know where to begin? Where does the eye move from there? Create a focus and sense of direction, using relative size, value, contrast, color, space, etc. Where are we supposed to end up?

_______________________________

INFORMATION GRAPHICS: 

Maps

Lecture Topics: Representing surface, area, direction, location. Creating Maps

Evaluating information and assigning priorities

Determining appropriate graphic elements to represent different kinds of information

LAB TOPICS: Illustrator drawing tools

LAB ACTIVITIES: Create and edit lines and shapes in Illustrator. 

Edit strokes. Create an arrow, a dashed line. Create text on a path.

DESIGN EXERCISE

1. Organize graphic elements, labels and explanatory text
2. On paper, create a simple map that takes a visitor from the subway or train      to the campus, and from there to the classroom. Show the reader how to get      to your seat.
3. Create a key

--------------------

HOMEWORK: Use Illustrator to create a map that shows the most direct route from the nearest subway or PATH stop to your classroom. 

_______________________________

INFORMATION GRAPHICS: 

Representing Quantitative Information

LECTURE TOPICS:

Gathering information

Using databases and spreadsheets

Sorting information

Defining relationships

LAB TOPIC:

Building Graphs and Pie Charts (Illustrator)

--------------------

HOMEWORK: Between this session and next week, watch the news each night. Gather the following information: 

1) How many stories in each one-hour news show are about violent or frightening events? 

2) How many stories are about happy events or have good endings?

Create either a pie chart or a graph.

The graph must show a 7-day timeline in relation to ten possible stories reported. The negative and positive stories must be shown in different colors.

The pie chart must show a comparison between the total number of negative stories versus positive stories.

_______________________________

MID-TERM

Written Exam and/or Project Presentations

_______________________________

INFORMATION GRAPHICS: 

Symbols, Signs and Sign Systems

LECTURE TOPICS Signs, Symbols and Icons, analysis and critique.

LAB ACTIVITY: Use Illustrator to create and re-use modular elements. Creating Strokes, Brushes and Patterns. Review Transform and Rotation tools.

DESIGN EXERCISE

Create a thumbnail sketch for each of the road signs below. Use no text. Decide whether your sign should be square, round or diamond-shaped.

HOMEWORK

1) Choose six of the best sketches and re-draw them on a 6x6” piece of white paper with thick black magic marker. Concentrate on making the series of signs consistent by using common elements like shapes or lines, and use the same style.

Client: National Recreation Areas (Parks)

Kite-flying area, Baseball Field, Playground

Camping, Fishing, Hiking, Climbing

Marina, Sailing, Surfing, Swimming, Beach

Native American Village, Local History Museum, Children’s Zoo

Botanical Garden, Bird Sanctuary

Danger: Falling Rock Zone, Danger: Snakes, Danger: Quicksand

--------------------

2) Build your signs in Illustrator. Make them 6” x 6”

Bring them into class as hard copy and on disk.

_______________________________

INFORMATION GRAPHICS:

Sequence, Hierarchy and Architecture 

LECTURE TOPICS:

Flow Charts, (InDesign or Illustrator)

· Determining objective

· Determining number of steps required to reach objective.

· Assigning Priorities to different decision paths

Keys for Flow Charts

DESIGN EXERCISE: Create one-page flow chart on paper for your next big goal: finding a job, buying a car, taking a vacation. Indicate steps that include research, obtaining resources, decision points (if/then, if not/then, either/or).

LAB ACTIVITY: build flow charts in InDesign and Illustrator

--------------------

HOMEWORK: Information Architecture

Create a flow chart for a small Web site using large ‘thumbnails’. Thumbnail labels and flow connections should indicate top-level categories, sub-categories or sections, connections between sections. 

If you have not yet planned a Web-based portfolio, that would be a good project.

_______________________________

INTERACTIVITY - THE USER EXPERIENCE

LECTURE TOPICS

User (audience) profile

User expectations

User testing

Teaching the User to Navigate

LAB TOPIC: Introduction to Powerpoint. Using Powerpoint to create sequence and simple navigation

LAB ACTIVITIES: Create a small powerpoint presentation with at least three slides, and ‘Forward/Back’ links

--------------------

HOMEWORK: Navigation

Research and gather information for a Powerpoint presentation which will be based on one of your previous assignments: a) your interactive portfolio, b) a map, c) a set of instructions, or d) information about your favorite subject or activity. 

How will the user navigate? What metaphor have you chosen for your interaction? 

Create a storyboard for each frame, on paper. Bring to class. Interactivity, structure and length to be brainstormed in class.

_______________________________

REVIEW: Storyboards

--------------------

INTERACTIVITY: 

Types of Interaction

Lecture Topics:

Buttons and Links

Menus, Site Maps and Index Pages

Slide shows, PowerPoint, and PDF format

(examples: Web site, software, game, tutorial, animation)

LAB ACTIVITY: Use Illustrator to diagram a simple control panel for a small vehicle that can move in any direction

LAB ACTIVITIES: In the simple presentation from last class, create buttons that control links, movement, animation, transitions

--------------------

HOMEWORK: 

1) Bring in one example (including URLs) of three different types of interaction. Be prepared to explain why that interaction was chosen for that type of information

3) Begin work on your Powerpoint presentation

_______________________________

STORYTELLING and METAPHORS for INTERACTION

LECTURE TOPICS: Linear storytelling and Storyboarding

Interactive storytelling

Offering choices, using flow charts

User experience: “look-and-feel”, gestalt

(examples: Book, Tutorial, Game, Map, Control Panel, Store)

Project objectives

What is the message?

More about Transitions

PRODUCTION: Continue work on your Powerpoint presentation.

--------------------

HOMEWORK: Finish your PowerPoint presentation. 

_______________________________

PRESENTATIONS: 

Present your Powerpoint presentation to the class.

--------------------

HOMEWORK: Make suggested corrections to your presentation.

Study for Final Exam 

_______________________________

FINAL EXAM

Short written test about information design, including analysis of sample projects

Turn in all projects on removable media and in hard copy where designed for print