Web Design - Interaction - Spring '13
Location: Communications 0009A
Time: M 6:00pm-9:00pm
Professor: Robert Spahr
Office: MCMA 1121E
Office Hours: M T W 1:00pm-3:00pm & by appointment
Course Syllabus Location: http://www.robertspahr.com/ides/
Course Listing: Web Design - 23353 - MCMA 512 - 001
Required Text:Saffer, Dan DESIGNING FOR INTERACTION Creating Smart Applications and Clever Devices New Riders.(2nd Edition)
Kelly, Kevin What Technology Wants [Paperback] Penguin Books; (September 27, 2011).
Stallman, Richard M., Free Software, Free Society: Selected Essays of Richard M. Stallman Free Software Foundation, 2002 (Second Edition 2010).
* All other readings will be distributed in class or available online. *
Castro, Elizabeth. HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide). Peachpit Press
Zittrain Jonathan, The Future of the Internet — And How to Stop It, Yale University Press and available free online.
Wardrip-Fruin, Noah & Montfort, Nick. The New Media Reader. Cambridge, MA: MIT Press
Manovich, Lev. The Language of New Media. Cambridge, MA: MIT Press
In this course emphasis is on designing for interactive media (e.g., CD-ROMs, Web sites, mobile devices, interactive installations, performance). This course goes a step beyond Human-Computer Interaction (HCI) and graphic design, to develop skills for current and next-generation interactive technologies. We will explore a mixed set of skills from different disciplines such as HCI, web-design, computer science, psychology, information systems, marketing, entertainment and business. Specific skills will be developed such as designing storyboards, navigational systems, wireframes, and user testing. Individual final projects focus on appropriateness of communication design, inventiveness, and nonlinear organization of many elements.
Be sure to check back often for any updated information.
Introduction and course overview
Project Glass: One day... 02:30
NPR: When The Car Is The Driver 02:00
NPR: Listen to the story 04:35
Kevin Kelly on the next 5,000 days of the web, 19:29
Speed Viewers Guide to New Media
Requesting SIUC website space
Assignment Lab 1: Compare and Contrast
Assignment Lab 2: Interaction Observation
Martin Luther King Jr. Day - No Class Meeting
Guest Lecture - MFA Candidate, Derek Smith
Interaction Design Basics
Lecture: Interactive Design Basics
Tech Lecture: The Internet & Basic HTML5
Example: Basic HTML5 Template
Lab 1 & 2 is due.
Assignment Lab 3: Screen Based Interactive System & Flow Chart
DFI [Chap. 1-3]
FSFS [Part I-III]
Sheena Iyengar: How to make choosing easier 16:00
Richard Stallman - Social Media, Free Software, & Anonymous. 11:36, December 02, 2011
Richard Stallman - Freedom, Copyright & Privacy 10:22, April 16, 2009
Francis Ford Coppola: On Risk, Money, Craft & Collaboration
Software to create flow charts
Sample Flow Chart
Design Research & The Craft of Interactive Design
Lecture: Design Research & The Craft of Interactive Design
Tech Lecture: Introduction to CSS
Example: CSS Position Absolute
Example: CSS Position Relative
Lab 3 is due.
Assignment Lab 4: User Interface Redesign
Universal Remote UR5U-8700L
DFI [Chap. 4-6]
FSFS [Part IV]
Interface Design Basics
Lecture: Interface Design Basics
DFI [Chap. 7-9 & Epilogue]
Tim O'Reilly: What Is Web 2.0, September 2005.
Jaron Lanier: The Local-Global Flip, or, "The Lanier Effect", August 2011
Kevin Kelly: On How Technology Evolves, 19:58
Lab 4 is due.
WTW [Part One -Origins]
Research/Design improved interactive system
Model improved system
WTW [Part Two - Imperatives]
ISOC-NY Event: Eben Moglen ‘Freedom in the Cloud’ – 2/5/2010
ISOC-NY Event: Eben Moglen ‘Freedom in the Cloud’ – 2/5/2010 - Part 2 - Q & A
Will 3D Printing Change the World? | Off Book | PBS , 07:23
Spring Break - No Class Meeting
Design improved interactive system
Model improved system
WTW [Part Three - Choices]
WTW [Part Four - Directions]
Project #1 is due. Presentation/Critique
Extra Credit (Due Apr 15th):
View in person: Fritz Lang's METROPOLIS with ALLOY ORCHESTRA
Or view online: Metropolis (1927) [ 2001 Restored Version ] Original Soundtrack
Write a short essay (no more than two pages) comparing and contrasting Kevin Kelly's ideas of Technologies Trajectories (Chap. 13) to Lang's future vision of humanities relationship with technology.
Clay Shirky: Newspapers and Thinking the Unthinkable
the death of journalism? (or journalism in the era of open)
Jacek Utko: Can design save the newspaper?
Anand Agarawala demos BumpTop, 4:43
Nicholas Negroponte on One Laptop per Child, two years on, 16:36
Nicholas Negroponte, in 1984, makes 5 predictions 25:27
Build and test site
Project #2 Due. Presentation/Critique
May 06 - Finals Week - 5:50pm-7:50pm
Project #2 - Presentation/Critique Continued
Project 1: Improving an Interactive SystemResearch an interactive system. Design an improved interactive system. Model the improved system. Details will be discussed in class.
1. A cover letter stating:
a. your problem
b. your solution
c. the contents of the deliverables package
d. what each deliverable describes (aspects of the problem, aspects of the solution, etc.)
In the cover letter, do not assume that I already understand your problem.
2. An annotated model that summarizes your research of the current system. (Can be a flow chart, a process map, a venn diagram, a matrix, or a map.)
3. At least 2 personas (primary and secondary).
4. An annotated wireframe of the redesigned system.
5. A storyboard. This should illustrate key moments of the interactive action of the redesigned system.
6. A digital prototype of the redesigned system.
Note: You are not actually implementing your redesign of the system. You are submitting documents that would provide the blueprints for such a redesign.
At the most basic level, your deliverables should explain the original problem and how you solved it.
You will put your deliverables (1-5 in PDF format, 6 in any appropriate media) in a folder labeled "project1" and upload into a folder called "ides" which should be in the mypage directory of your student web site. Be sure to create an index page inside "project1" linking to all files. Include any special instructions needed regarding the use of your media.
Grading Criteria for Project #1:
How well you follow the above format with a considered and sensible approach including clear, concise descriptions showing a depth of research and design.
Project 2: Web Site / Screen Based System RedesignUse HTML, Flash, and/or any other software (Photoshop,Illustrator, GIMP, etc.) to redesign an exisiting web site, or screen based system. Details will be discussed in class.
You will put your deliverables (in an appropriate media) in a folder labeled "project2" and upload into a folder called "ides" which should be in the mypage directory of your student web site. Be sure to create an index page inside "project2" linking to all files. Include any special instructions needed regarding the use of your media.
1. a wireframe
2. three mockups
3. user testing documentation
4. a final working mini-site
Grading Criteria for Project #2:
1. thoroughness of research (pre-design, post-design, appropriateness of final design to user requirements)
2. interactive design (navigation, menus, labels, information architecture)
3. visual design (fonts, layout, colors, overall look and feel)
Your final grade will be determined by the following:
- 30% Weekly Assignments/Participation
- 35% Project #1 Improving an Interactive System
- 35% Project #2 Site Redesign
As part of your weekly assignments you will need a sketchbook. I suggest a Black, bound 8.5"x11", to travel with you throughout the semester for quick sketches, small color studies, ideas and assignments. This book can also be used for class notes when important technical information and demonstrations are given.
Attendence to all classes is expected. There are no acceptable number of absences. More than two unexcused absences may result in failure for the class. Two lates are the equivalent of one absence. Leaving a class early is considered equivalent to arriving late.
All assignments and projects are due at the beginning of class.
Controlling the Network & Intellectual Property
Open Source/Free Software Movement
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Building Emergency Response Protocols
UNIVERSITY’S EMERGENCY PROCEDURE CLAUSE:
Southern Illinois University Carbondale is committed to providing a safe and healthy environment for study and work. Because some health and safety circumstances are beyond our control, we ask that you become familiar with the SIUC Emergency Response Plan and Building Emergency Response Team (BERT) program. Emergency response information is available on posters in buildings on campus, available on BERT’s website at www.bert.siu.edu, Department of Public Safety’s website www.dps.siu.edu (disaster drop down) and in the Emergency Response Guideline pamphlet. Know how to respond to each type of emergency.
Instructors will provide guidance and direction to students in the classroom in the event of an emergency affecting your location. It is important that you follow these instructions and stay with your instructor during an evacuation or sheltering emergency. The Building Emergency Response Team will provide assistance to your instructor in evacuating the building or sheltering within the facility.
STUDENTS WITH A DISABILITY:
Instructors and students in the class will work together as a team to assist students with a disability safely out of the building. Students with a disability will stay with the instructor and communicate with the instructor what is the safest way to assist them.
During the spring semester we have a Storm Drill.
Pick up your belongings and your instructor will lead you to a safe area of the basement. No one will be allowed to stay upstairs. Stay away from windows. The drill should not last more than 10 minutes. You must stay with your instructor so he/she can take roll. Students need to be quiet in the basement as the BERT members are listening to emergency instructions on handheld radios and cannot hear well in the basement.
During the fall semester we have a Fire Drill.
Pick up your belongings and your instructor will lead you to either the North or South parking lot depending on what part of the building your class is in. You must stay with your instructor so he/she can take roll. As soon as the building is all clear, you will be allowed to return to class.
These drills are to train instructors and the Building Emergency Response Team to get everyone to a safe place during an emergency.
If someone calls in a bomb threat, class will be suspended and students will be asked to pick up their belongings, evacuate the building and leave the premises. Do not leave anything that is yours behind. We will not allow anyone back into the building until the police and bomb squad give us an all clear. DO NOT USE YOUR CELL PHONES. Some bombs are triggered by a cell phone signal.
SHOOTER IN THE BUILDING:
This spring semester we are in the planning stages of a Shooter in the Building Drill.
When it is safe to leave, move to a safe area far from the building away from where the shooter is located. If anyone has any information about the shooter, please contact the police after you are a safe distance away. If someone cannot leave, go into a room, lock the door, turn out the lights, and if possible, cover the glass on the door. Students chair desks should be piled in front of the glass and door as a barricade and the teacher's desk, podium and anything movable can be pushed against the door. This is intended to slow down any attempts to enter or look into the classroom. If it looks like the shooter is persistent and able to enter, make a lot of noise and use everything in your backpacks to throw at the shooter to distract him.
Silence all cell phones after one person in the room calls the police and informs them of their location and how many people are in the room. Be quiet and wait for the police to arrive. The police are looking for one or more shooters, and they have no way of knowing if the shooter is in the room people are hiding in. For this reason, when the police enter the room, no one should have anything in his/her hands and each person MUST raise his/her hands above his/her head.
In the event of an earthquake, you are advised to take cover quickly under heavy furniture or crouch near an interior wall or corner and cover your head to avoid falling debris. Outside the building are trees and power lines and debris from the building itself that you will need to stay away from. In the building, large open areas like auditoriums are the most dangerous. Do not try to escape on a stairway or elevator. Do not hide under a stairway. We do not recommend that you stand in a doorway because the door could shut from the vibrations and crush your fingers trapping you there.