Schedule

Mondays

Wednesdays

1

8/24/2015

Intro to course (presentation)

Review Syllabus / class site

assign: Research Report topics/dates
assign: Reading Response
assign: helloprocessing
assign: Exercise 01A (Illustrator)

8/26/2015

Go over WordPress CMS

assign: Final Project

Design Research Methods & Design for Information (presentation)

assign: Secondary Research & Data Hunt for Final Project. 2

8/31/2015

Download & install processing
01 Processing
Tutorial: Variable & Conditional
Work on Exercise 01B-C (Processing)

9/02/2015

due: Reading Response, discussion

due: Data Hunt. What event will you work on? Collect all necessary data. Review previous iterations or similar projects.

Co-Creation Session. Work  collaboratively Create 3 personas per project: Who are the visitors? How are they similar/ different?

assign: Develop 3 personas for your event. From those, develop 3 Experience Maps (or a single comprehensive one) to address different desires, behaviors, and means of accessing info before, during, and after the event.

Start a presentation format and populate with all of your (growing) Final Project work. Horizontal, letter-sized.

Processing demo: Loops

assign: Exercise 01 B/C

3

9/07/2015

NO CLASS: Labor Day

9/09/2015

research presentations—
Anna Freeman: Casey Reas
Rachel: Daniel Rozin

Final Project: Research & Concept
due: 3 Experience Maps (or one comprehensive one)

assign: Info Architecture

4

9/14/2015

due: Exercise 01B-C (review/help)

Tutorial: 
map()

assign: Exercise 02A–D

Tutorial: Nested Loops

Tutorial: Conditionals & Mouse Position

 

9/16/2015

research presentations—
Jonathan B: Special Projects
Jaimie Maxell: Lev Manovich

due: Info Architecture

Wireframes demo & workshop
Final Project: Wireframes

5

9/21/2015

work on Exercise 02A–D

Tutorial: Libraries/PDF/MousePress/Save One Frame. Export files as PDF, open in Illustrator

mousePressed() vs if(
mousePressed), mouseDragged()

work on Exercise 02E–H

9/23/2015

research presentations—
Anna Maffrey: Nervous System
Danielle (Dani): Golan Levin

due: Low-Fi Wireframes

Work on Wireframes in class


homework: download p5.js
Read p5.js Get Started

Watch Learning p5.js videos:
1.0: What is p5.js?
(watch 1.1–1.2 if you’re still struggling with shapes/color)
1.3: Upload your sketch
2.1: Variables (mouseX/Y)
2.2: Variables (your own)


Hosting: UC FileSpace
SFTP for Mac (fetch)
SFTP for Windows (WinSCP) 

6

9/28/2015

Review Exercise 02A–H
Bring prints!

Assign Exercise 03: Drawing Machine

Tutorial: p5.js

9/30/2015

research presentations—
Kath: Umbrellium
Shem: SoSo Limited

Work on Hi-Fidelity Wireframes in class

assign: hi-fidelity Wireframes for complete system
_Every scene/frame represented
_Gray scale
_Focus on prominence, location, and composition of most important information in each scene

 assign: Visual Design step 1
_Select 3 specific frames and apply a visual design system
_Select the area of the system (i.e., schedule, social media features, activity map, &c.) you would like to prototype and design multiple possibilities (min. 3) for how the info can be displayed and accessed.
Consider the integration of visual and interaction design: how is info made visible and what transitions/ interactions activate it?

 7

10/05/2015

Lab: Drawing Machine

colorMode

10/07/2015

No Class. AIGA Conference.

Final Project: User Testing in pairs (meet on your own)

8

10/12/2015

Lab: Drawing Machine

10/14/2015

research presentations—
Maliheh: Art+Com
Kara: The Barbarian Group

CRIT: Wireframes & Visual Design

9

10/19/2015

due: Drawing Machine

Assign Exercise 04: Visual Clock

Tutorial: arrays, time functions (day, hour, minute…), string functions (nf, nfc…), PFont, PImage

10/21/2015

research presentations—
Sarah Porter: Lisa Strausfeld

Final Project: Revise Wireframes/ Visual Design (step 1)

assign: Visual Design: Static Screens for complete system. Prepare as single “sheets” for Usability Testing Workshop. Prepare 9 distinct tasks, including 3 complex tasks with a lateral move.

10

10/26/2015

lab: Visual Clock

Tutorials:
p5.js Beyond the Canvas
p5.js What is HTML?
p5.js textFont
p5.js textStyle

Web Safe Fonts

HTML Intro
HTML Basics
HTML and CSS
HTML Layout

CSS Intro
CSS Syntax
CSS Selectors
CSS Positioning
CSS Box Sizing
CSS Text
CSS Font

google fonts
font squirrel

10/28/2015

research presentations—
Jessica Fox: Ben Fry
Janie Wagner: Martin Wattenberg
John C: Ryoji Ikeda

Usability Testing Workshop
(work in assigned pairs)

From your 3 scenarios, create 3 tasks each (min. 9 tasks each). Include at least 3 complex tasks, such as: “find out what band is playing last on Saturday night, then find out who is playing immediately before on the same stage.”
_Cut out your “frames” / scenes into small cards (one per frame).
_Arrange on table in an overview storyboard/ info architecture.
_Ask partner to accomplish each of your tasks.
_Ask partner to go back or move laterally (complex)

During testing, look/listen for:
_gaps or missing steps
_long/complicated routes
_confusion or inability to complete task or completes wrong task
_any/all suggestions for improving the flow of events

Final Project: Revised Wireframes & Visual Design: Static Screens

 

11

11/02/2015

lab: Visual Clock

11/04/2015

research presentations—
Madeline: John Pobojewski
Gina: Jer Thorp
Anh Le: Rafael Lozano-Hemmer

CRIT: Print FULL system design with specific task flows illustrated. Include rigorous exploration of your prototype space.

 12

11/09/2015

 lab: Visual Clock

11/11/2015

NO CLASS: Veterans Day

13

11/16/2015

due: Visual Clock

Tutorial: Prototype Helpers
Lab: Final Project

11/18/2015

research presentations—
Stephanie Schmidt: Jürg Lehni
Mykala Hayes: Stimulant

Lab: Final Project

14

11/23/2015

Lab: Final Project

11/25/2015

Lab: Final Project

15

11/30/2015

Lab: Final Project

12/02/2015

Final Presentations

16

12/08/2015

12/10/2015