Web Design - Interaction
Location: Communications 0009A
Time: M 6:00pm-9:00pm
Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1121E
Office Hours: T R 10:00am-1:00pm & by appointment
Course Syllabus Location: http://www.robertspahr.com/ides/
Course Listing: Web Design - 23537 - MCMA 512 - 001
Required Text:
Saffer, Dan DESIGNING FOR INTERACTION Creating Smart Applications and Clever Devices New Riders.Lanier, Jaron You Are Not a Gadget: A Manifesto (Vintage) [Paperback] Vintage; Reprint edition (February 8, 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 23
Introduction and course overview
Speed Viewers Guide to New Media
Requesting SIUC website space
Tech Lecture: The Internet & Basic HTML5
Example: Basic HTML5 Template
Assignment Lab 1: Compare and Contrast
Assignment Lab 2: Interaction Observation
Jan 30
Interactive Design Basics
Tech Lecture: Introduction to CSS
Example: CSS Position Absolute
Example: CSS Position Relative
Lecture: Interactive Design Basics
Assignment Lab 3: Screen Based Interactive System & Flow Chart
Reading:
DFI [Chap. 1-3]
FSFS [Chap. 1-3]
Web Resources:
Richard Stallman - Social Media, Free Software, & Anonymous. 11:36, December 02, 2011
Richard Stallman - Freedom, Copyright & Privacy 10:22, April 16, 2009
This is what happens when you joke about "destroying America" on Twitter
PirateBox
Francis Ford Coppola: On Risk, Money, Craft & Collaboration
Sheena Iyengar: How to make choosing easier 16:00
Software to create flow charts
Sample Flow Chart
Feb 06
Design Research & The Craft of Interactive Design
Tech Lecture: Typography, Multimedia, Image Maps
Lecture: Design Research & The Craft of Interactive Design
Assignment Lab 4: User Interface Redesign
Universal Remote UR5U-8700L
Reading:
DFI [Chap. 4-6]
FSFS [Chap. 11]
Feb 13
Interface Design Basics
Lecture: Interface Design Basics
Reading:
DFI [Chap. 7-9]
Tim O'Reilly: What Is Web 2.0, September 2005.
Jaron Lanier: The Local-Global Flip, or, "The Lanier Effect", August 2011
To be viewed in class:
Kevin Kelly: On How Technology Evolves, 19:58
Feb 20
Lab 4 is due.
Reading:
NAG [Part One]
To be viewed in class:
NPR: When The Car Is The Driver
NPR: Listen to the story 04:35
Feb 27
Lecture Notes - Javascript
Javascript Examples
http://script.aculo.us/
Research/Design improved interactive system
Model improved system
Reading:
NAG [Part Two]
Viewing in class:
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
Mar 05
Lecture Notes - HTML5
Design improved interactive system
Model improved system
Reading:
NAG [Part Three]
Viewing in class:
Jacek Utko designs to save newspapers
Mar 12
Spring Break - No Class Meeting
Mar 19
Project #1 Due: Improving an Interactive System Critique
Mar 26
Introduction to jQuery
Open Studio
Research current web site
Plan redesign to overcome interaction shortcomings
Reading:
NAG [Part Four]
Apr 02
Open Studio
Redesign site
Reading:
NAG [Part Five & Afterward]
Apr 09
Open Studio
Redesign site
Viewing:
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 16
Open Studio
Build and test site
Apr 23
Open Studio
Build and test site
Apr 30
Project #2 Due: Site Redesign Presentation/Critique
May 07 - Finals Week - 5:50pm-7:50pm
Project #2 Site Redesign Presentation/Critique Continued
Project 1: Improving an Interactive System
Research an interactive system. Design an improved interactive system. Model the improved system.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: Site Redesign
Use HTML, Flash, and/or any other software (Photoshop, Illustrator, etc.) to redesign key areas of the Cinema and Photography site within the SIUC web site. You will redesign the front page, one second level page, and one third level page. The current site is at http://cp.siu.edu/. (I am open to students using alternative sites and systems other than the C+P website. Prior instructor approval required.)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. Two unexcused absences will 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.
Disabled Students:
Instructors and students in the class will work together as a team to assist disabled students out of the building safely. Disabled students 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 calls. 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 calls. 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:
When it is safe to leave, move to a safe area far from the building where the shooter is located. If you have any information about the shooter, please contact the police after you return home. If you cannot leave, go into a room, lock the door, turn out the lights, and if possible, cover the glass on the door. Silence all cell phones after you call the police and inform them of your location. 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 with you. For that 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 near an interior wall, a corner, 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.
Women's Self-Defense Class:
For interested female students and female faculty and staff, the SIU Public Safety Department sets up free self-defense classes. The SIU Public Safety Department will be teaching this class. They teach a free class in the fall and spring at the Rec Center. In the fall you would register at the Rec Center for the Women's Self-Defense Class or RAD (Rape Aggression Defense) as it is sometimes called. If you have questions about registering for the class, you can send an email to lavong@siu.edu. LaVon is the contact in the Dean's Office in the Communications building that will assist you to try to find the class you need.