Interactive Design

Social Network (Sarah Sweeney)

Social Network (Sarah Sweeney)


An introduction to designing interactive pages and environments for the web. Emphasis is placed on visual and information design through theories of color, principles of design, and the study of typography. A variety of tools and techniques will be explored including photo editing, writing code for the web, and animation through basic scripting languages. Studio projects will explore issues of audience participation, experience design, motion and interface.


By the end of this course a student who has completed the course successfully will be able to:

  • Use HTML, CSS, JQuery, and Photoshop to create interactive web projects
  • Discuss the role time, form, frame, and data play in creating meaning in interactive work
  • Create interactive pieces that contribute to and challenge the history, culture, and theory of interactive design
  • Describe different interactive gestures in terms of experience and expectation
  • Think critically about the artists and theorists that create historical and theoretical context for interactive work
  • Critically analyze and contextualize their work and the work of other interactive artists


  • Supplemental texts (pdfs on website)
  • Subscription to (provided through Skidmore)
  • Access to color printer
  • External hard drive (Required)
  • Headphones
  • Drawing supplies, journal, drawing paper, straight edge, pen or pencil


Your final grade will be compiled from the grades you receive on your projects throughout the semester and will be posted on Blackboard.

Each grade will be weighted as follows:

Participation: 5%
Research: 10%
Conversation Presentation: 10%
Project 1: Resize 15%
Project 2: Link 15%
Project 3: Mouseover 15%
Project 4: Scroll 15%
Project 5: Final Project 15%

Participation (10%)
The ability to speak for yourself and your work is one of the most important skills a digital media artist has. In this class there will be many forums for you to practice speaking including discussions of texts and presentations, collaborative challenges, critical conversations about artists’ work, and peer critiques. Your participation in these activities will be taken into account in your final grade. If you are distracted in class by your cell phone or work from another class this will also be factored into this grade.

Research (10%)
For this assignment you will be collecting visual research around an idea or theme. Each week you will present your research two ways, first as a comment on this website (due by midnight the night before) and second as a printed piece hung on the wall by the start of class. Each week we will discuss the research that the class has collected. For this project you will be graded on how often you contribute a visual piece of research that is thoughtful and imaginative. If it is clear that there is little thought behind your contribution it will not count towards your total. The grading scale follows:

A = 13
B+= 11
B = 10
B- = 9
C+ = 8
C = 7
C- = 6
D = 5
F = 4 or fewer

Conversation Presentation (5%)

We will be reading several texts and considering questions about interaction and design. You will be responsible for creating a presentation responding to one of the questions and leading a discussion with several other students.

Projects (75%)
In this class there are five projects including the final project. At the beginning of each project we will review the project overview on this website. Please take note of the due dates. Assignments MUST BE READY at the START of class on the date due to be considered on time. If you cannot be in class the day that the projects are due the project must be uploaded to Blackboard or sent to me before class starts to be considered on time. The highest grade that a late project can receive is a C.

Project evaluation criteria
Each project will be evaluated on the following criteria:

Does the project have strong aesthetic and formal qualities?

Is the user experience accessible, meaningful, and memorable?

Conceptual Framework–20%
Are the concepts or ideas behind the project original, thoughtful, and well organized?

Does the project use techniques and skills that are challenging?

Technical skill and technique–15%
Does the project demonstrate a mastery of the skills and techniques covered in class?

I use a rubric to evaluate all projects.

In this class I will cover all the technical tools and skills that you will need to complete the projects. If you want to go beyond these skills you can use the resources available to teach yourself (, If you use skills that are not covered in class the rule that I use in all my classes is that if you get yourself in, you must get yourself out. This does not mean that I do not encourage these explorations. I think they are where some of the richest and most interesting work can happen—I just cannot be responsible for techniques that I haven’t covered.


We will schedule individual mid-term and final critiques in the middle and end of the semester. The individual critique is an important opportunity to ask questions and think about the progress of your work in the class.


Attendance in this class is critical. In each class you will learn tools and techniques and discuss ideas that you will build upon in subsequent classes. I keep track of attendance by passing around a sign-in sheet at the beginning of class. If your name is not on the sheet you will be considered absent. I do not distinguish between excused and unexcused absences—instead I consider how the classes and content you have missed will impact your success in the course. Each student is allowed up to three absences. If you have missed more than three classes each additional absence will result in a ten-point deduction from your final grade.

Frequent lateness will also have a negative effect on your performance in the course: every three latenesses will be considered equal to one absence. If you are not in class you must review the material on the website and get notes from a classmate since you are still responsible for the material covered in class as well as any in-class assignments. You can also visit my office during my office hours to get an overview of what I went over in class.


In order to complete the assignments for this class, you must be prepared to work independently during the hours that the lab is open. The Digital Media Lab is reserved for students enrolled in Digital Media classes. The lab will be open 24 hours a day and on weekends during the semester through swipe access. You may not use the lab when other classes are in session without prior permission. It is important to familiarize yourself with the lab schedule that is posted on the door to the lab and on the website.


I created this website to accommodate the changing needs of this class. All of the lectures, projects and demonstrations that are discussed in class will be on this website. If class is canceled or you are absent you can check the website to see what you need to do for the next class. This is also an excellent resource to review skills and concepts.


In this course there are many opportunities for lively discussion and debate. However it is important to think about how your comments may impact other members of the class. When you speak you must speak respectfully of all people–including your peers and myself. In this class we will work to create an environment that is intellectually safe and has a spirit of collaboration and trust. If you say something that is disrespectful you will be given a warning and then asked to leave.

Turn off all cell phones and other potentially distracting noise makers during class. Pay attention to what we are doing in class and take notes. Be polite, respectful, and attentive while others are speaking.


If you are a student with a disability and believe you will need academic accommodation, you must formally request accommodation from Meg Hegener, Coordinator for Student Access Services.  You will also need to provide documentation which verifies the existence of a disability and supports your request.  For further information, please call 580-8150 or stop by the office of Student Academic Services in Starbuck Center.


I want each of you to be successful in this class. I want you to make work that that inspires you and your peers. I want you to push me and the other students to find new ways of approaching the materials and the tools we are using. I want you to emerge an innovative and creative digital media artist. I am here to support you in these goals. If you have any questions, small or large, technical or conceptual, please come see me. I have office hours that are posted on this website but I can also make an appointment to meet with you at another time that is more convenient. We also have a Teaching Assistant who can help you with technical issues that arise when I am not at school. Please do not hesitate to contact me if you are having trouble or need help.


RESIZE: Relating Form & Function
Introduction and Syllabus
Project 1: Overview
Artists:  François Boucher, Portrait de Madame de Pompadour (Life-sized and miniature)
Research #1: Speed Introductions due
Demonstration: Hierarchy & Syntax


RESIZE: Relating Form & Function
Project 1: Wireframes due
Reading: Norman, The Design of Everyday Things (Chapter 1)
Research #2: Abridged due
Demonstration: Images, CSS, Type
Sign up for Conversations

RESIZE: Relating Form & Function
Project 1: Assets due
Demonstration: Divs and Positioning


RESIZE: Relating Form & Function
Project 1: Large version due
Demonstration: Positioning and Containers
Demonstration: Media Queries and Flexible sizing
Bad code check

RESIZE: Relating Form & Function
Demonstration: Uploading
Conversation: Standardization vs. Mayhem
Research #3 due
Work in class


LINK: Contextualizing Data
Project 1: Critique
Project 2: Overview
Research #4: Card Sorting (in class)
Artists: Sugimoto, Aujourd'hui, le monde est mort; Andy Warhol, Raid the Museum;, Mark Dion, The Octagon Room; humanæ, The Grocery Store Project

LINK: Contextualizing Data
Reading: Bowker and Star, Sorting Things Out: Classification and Its Consequences (Introduction)
Demonstration: Uploading
Visit the Affinity Atlas (Tang Museum)
Project 2: Collection sketch due


LINK: Contextualizing Data
Research #5 due
Demonstration: Link & Secondary Page
Project 2: Twenty objects due

LINK: Contextualizing Data
Demonstration: Advanced selectors


LINK: Contextualizing Data
Conversation: Ownership, Authorship, and Privacy
Research #6 due
Project 2: Twenty objects data due
Demonstration: Advanced selectors & design

LINK: Contextualizing Data
Professor Sweeney in Romania
Work in class
Signup for Midterm Critiques


LINK: Contextualizing Data
Meet with Mark Allen from Machine Project
Research #7 due
Reading: Levy, "Interactivity"

MOUSEOVER: Action Reaction
Project 3: Overview
Research:  Microinteractions in Massagem Sonora (Carmina Escobar/Tang Museum) - October 26th 11-3
Artists: Vito Acconci, Felix Gonzalez Torres,  4' 33'' app, Stefan Sagmeister
Demonstration: Absolute Positioning & Javascript Interactivity


MOUSEOVER: Action Reaction
Project 2: Critique
Research #8 due
Demonstration:  CSS Animation and Transitions

MOUSEOVER: Action Reaction
Demonstration: JQuery Effects and Events


MOUSEOVER: Action Reaction
Demonstration: JQuery Animation and Draggable

MOUSEOVER: Action Reaction
Individual Meetings


SCROLL: Constructing Space through Time
Project 3: Critique
Usability Testing Signup
Artists: Heart of the Arctic, Webby Awards, Activism

SCROLL: Constructing Space through Time
Demonstration: Parallax Scrolling and Scroller
Reading: Usability Test Script


SCROLL: Constructing Space through Time
Demonstration: Parallax Scrolling Stellar and CSS Animation

SCROLL: Constructing Space through Time
Research #10 due


The Beauty of Code
Project 5: Overview
Conversation: Designer and/or Coder



The Beauty of Code
Reading: Norman, "Some Observations on Mental Models"
Research #11 due
Demonstration: Lists and Navigation

The Beauty of Code
Project 4: Critique
Collaboration Rubric
Demonstration: Screen Capture


The Beauty of Code
Research #12 due
Lecture: Accessibility, Jamin Totino
Conversation: Graceful Degradation or Progressive Enhancement?
Demonstration: Gifs and Sprites

The Beauty of Code
Work in class
Conversation: Future of the Web
Demonstration: Form elements
Signup for Final Critiques


Project 5: Critique