Web Design - Interaction - Spring '13
Location: Communications 0009A
Time: M 6:00pm-9:00pm
Professor: Robert Spahr
Contact: rspahr@siu.edu
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).
Free Download:
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. *
Further Reading:
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
Packer, Randall & Jordan, Ken. Multimedia From Wagner to Virtual Reality. New Yok, NY, W. W. Norton & Company
Online: Multimedia From Wagner to Virtual Reality
Manovich, Lev. The Language of New Media. Cambridge, MA: MIT Press
Description:
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.
Syllabus:
Be sure to check back often for any updated information.
Jan 14
Introduction and course overview
Viewing:
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
Jan 21
Martin Luther King Jr. Day - No Class Meeting
Jan 28
Guest Lecture - MFA Candidate, Derek Smith
Feb 04
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
Reading:
DFI [Chap. 1-3]
FSFS [Part I-III]
Viewing:
Sheena Iyengar: How to make choosing easier 16:00
Web Resources:
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
Feb 11
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
Reading:
DFI [Chap. 4-6]
FSFS [Part IV]
Feb 18
Interface Design Basics
Lecture: Interface Design Basics
Reading:
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
Viewing:
Kevin Kelly: On How Technology Evolves, 19:58
Feb 25
Lab 4 is due.
Reading:
WTW [Part One -Origins]
Mar 04
Open Studio
Research/Design improved interactive system
Model improved system
Reading:
WTW [Part Two - Imperatives]
Viewing:
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
Mar 11
Spring Break - No Class Meeting
Mar 18
Open Studio
Design improved interactive system
Model improved system
Reading:
WTW [Part Three - Choices]
Mar 25
Open Studio
Reading:
WTW [Part Four - Directions]
Apr 01
Project #1 is due. Presentation/Critique
Apr 08
Open Studio
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.
Apr 15
Open Studio
Redesign site
Reading:
Clay Shirky: Newspapers and Thinking the Unthinkable
the death of journalism? (or journalism in the era of open)
Viewing:
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
Apr 22
Open Studio
Build and test site
Apr 29
Project #2 Due. Presentation/Critique
May 06 - Finals Week - 5:50pm-7:50pm
Project #2 - Presentation/Critique Continued
Project 1: Improving an Interactive System
Research an interactive system. Design an improved interactive system. Model the improved system. Details will be discussed in class.Deliverables:
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 Redesign
Use 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.
Deliverables:
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)
Evaluation:
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
Sketchbook
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.
Web Resources:
Experimental Interfaces
Technical Skills
Controlling the Network &Intellectual Property
Open Source/Free Software Movement
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Art and Design Glossary
Experimental Interfaces
Technical Skills
Setting Type on the Web to a Baseline Grid
The Elements of Typographic Style Applied to the Web
Zen Garden - The Beauty of CSS Design
Web Page Design for Designers: Typography
Image Map for Detailed Information
useit.com: Jakob Nielsen's Website
IE8 Version Targeting causes quite a stir
Controlling the Network & Intellectual Property
Wired.com: Military and Social Networking
Kelly: The Technium - Better Than Free
All your Internets are belong to ATT & the NSA
Schoolkid chipping trial 'a success'
Comcast Actively Hinders Subscribers' File-Sharing Traffic, AP Testing Shows
Law Firm Uses Copyright Claim To Say You Can't View Its Website's HTML Source
Free speech could lead to online disconnect
MySpace Censors Anti-War Websites
US cities' Wi-Fi dreams fading fast
Web search for bomb recipes should be blocked: EU
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002
The future of HTML, Part 1: WHATWG
EU says internet could fall apart
Summary Of The World: Googlezon And The Newsmasters EPIC
Open Source/Free Software Movement
Stallman: If you want freedom don't follow Linus Torvalds
Free as in Freedom
Richard Stallman's Crusade for Free Software
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Could Twitter become the ultimate buzz tracker?
The Ethics of Web 2.0: YouTube vs. Flickr, Revver, Eyespot, blip.tv, and even Google
A personal NON server wiki using XHTML, CSS and Javascript
AJAX Web Applications
NYtimes - Web Tools Blaze Trail To The Past
Google Labs Mirror (Demo of AJAX)
Why Ajax Sucks (Most of the Time)
Video Distribution Platform Aiming to Kill TV
Online: Multimedia From Wagner to Virtual Reality
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.
TORNADO:
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.
FIRE:
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.
BOMB THREAT:
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.
EARTHQUAKE:
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.