During this advanced course, students will design a series of projects that focus on different aspects of effective visual communication. Students will also learn advanced techniques in using the industry-standard desktop publishing applications InDesign, Adobe Illustrator, and Microsoft Powerpoint. General topics include concept development, creating user profiles, determining user interaction and project planning. Advanced concepts include hierarchy and information structures, visual cues, navigation and direction, sequence and pace, abstract representation and quantitative information, metaphor and storytelling.
Most presentations of quantitative information are poorly designed—painfully so, often to the point of misinformation. — Stephen Few (author of Show me the Numbers)
Demonstrations, exercises and critiques will help students learn to evaluate information, anticipate user expectations, and choose appropriate design solutions for each medium, type of information, or interaction. This course also emphasizes the importance of quality control through critiquing and user-testing each other’s projects, while correcting their own.
To further the pre-professional career interests and competencies of students in the field of digital design and web publishing.
The student will:
Note: For Textbooks, Bibliography, Learning Outcomes, et cetera, contact me.
Software: Adobe InDesign, Adobe Illustrator, Microsoft Powerpoint, Microsoft Excel
Supplies: Paper, card stock, pencils, fine and thick Sharpie markers. At least 2 100MB flash drives will be needed to store and turn in completed projects and class work.
Resources: Adobe InDesign and Illustrator are available by subscription with student discounts from Adobe.com. MS PowerPoint, an application in Microsoft Office 365, is available with a student discount from www.office.com. Software, tablets, flash drives and other hardware are also available at a discount at Journey Education www.journeyed.com. Flash drives, chargers, and other hardware are available at Amazon www.amazon.com. If you own an Apple computer or tablet, please purchase only Apple-authorized chargers, to avoid battery damage and random shut-downs.
Textbooks: Try to buy only used books of acceptable quality—first on ThriftBooks, then on Amazon or eBay. Check the location and shipping times for all orders to avoid late delivery.
Discussion and Demonstration
(examples: business card, instructions, resume, portfolio , magazine, manual, map, Directory, directional signage, website)
--------------------
HOMEWORK:
1) Bring in one example of successful information design in a print project. Be prepared to discuss why the presentation, organization and navigation of the project succeeds or how you would improve it.
OR
2) Bring in one example of information design in a portfolio Web site. Be prepared to discuss why the presentation, organization and navigation of the portfolio succeeds or how you would improve it.
______________________________
Review and Critique of examples
LECTURE TOPICS:
Visual Organization
Grouping and Division
LAB TOPICS
Page Layout Review
IN-CLASS EXERCISE
Work with page layout program (InDesign or Illustrator) on basic layout and design
--------------------
HOMEWORK: Visually Organize Information
Use InDesign or Illustrator and the principles of proximity, alignment and line to create a 3 column x 4” newspaper ad. (Sample text provided by instructor)
Sort the information and assign priorities.
Where is the focus? What is the most important information? Where does the reader start reading? What do they read or see next?
Organize, divide and group the information.
LECTURE TOPICS:
Creating Multiple-page documents
Hierarchy of Information
Starting Point, Sequence, Proximity
Formatting Text
Consistency vs. Variety
(examples: magazines, catalogs)
LAB TOPIC: InDesign review. Building a document.
IN-CLASS EXERCISE
Format text to create a hierarchy. Start building a catalog.
--------------------
HOMEWORK: Hierarchy
Continue working in InDesign on Catalog Project.
Format a body of text to create a hierarchy of information. Use style sheets to differentiate between top-level categories, sub-categories and descriptive information.
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
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
--------------------
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
Copyright © 2018 Li Gardiner - All Rights Reserved.
Welcome! Thank you for your interest in my services and experience. As of September 2024, I am seeking remote illustration and design projects, part-time or on a contract basis. In addition, I welcome employment as an adjunct design instructor for in-person or hybrid courses in Hudson County NJ or Manhattan.