Spring 2016
Interactive 2, GRAPH-228-02
California College of the Arts
SF Main Campus, Room W1
Tuesday, Thursday 7:15 – 10:15pm
Instructor: Mindy Seu, mindyseu@cca.edu
TA: John Wegner, jwegner@cca.edu

Course description

This course focuses on interaction design with projects that are based online. Questions asked during the course include:

— Is it specific?
— Is it memorable?
— Does it communicate the idea through its form?

(This course has a formal emphasis, using what knowledge students have about composition, typography, and hierarchy as a basis.)

— How can we best use our knowledge of code’s relationship to the web to communicate the idea?
— As designers, how can we develop personal voice through content as well as form?

(Today interaction online focuses on information through living, social platforms. We will go beyond an average user’s perspective to critically examine the web through historical, political, and social lenses. This course encourages students to holistically approach to the web and its constituent code as a living kit of parts patiently waiting to be harnessed in novel and innovative ways.)

— What are the different conditions in which this can exist?
— How does this change in each of those conditions?
— What happens to this when it expands?

(We will explore design principles relating to dynamic media and understand how good design should take advantage of the web both formally and conceptually. We will create accommodating, flexible systems that will change in response to its environment and users.)

The course will heavily employ real-world, contemporary examples of design, art, and presences online. These thematic groupings of artwork, portfolios, archives, exhibition platforms, blogs, web apps, etc. will be examined with a critical eye and mind. Additionally, we will discuss what makes a design practice and the importance of discovering each student’s unique approach and methodology.

This course is open to ~15 students. It is a required course for graphic design majors. It is open to students who have taken (or are taking concurrently) Graphic Design 2 (GRAPH-216), Typography 2 (GRAPH-220), and Interactive I (GRAPH-228-01). Knowledge of HTML and CSS is required to take this class. Preference is given first to graphic design majors who have these prerequisites. Interested students with special circumstances can speak to me directly.

Class activities

Tuesday’s class will include any combination of:

— example-based lecture/discussion

— reading discussion
— project critique/discussion
— group activity to identify design elements in selected websites or books
— short, ten-minute student presentation on a website, designer, artist, or theme

Thursday’s class will include any combination of:
— skill-based workshop
— working lab time
— individual consultation


Throughout the duration of the course, groups of readings (and sometimes videos) will be given. For each, each student must prepare three discussion questions and post them to that week’s Google Document (viewable on the Calendar section of this website) by 6pm the day of class.

Weekly presentations

Each student will given a number 1 to 5. This number refers to a chapter in Italo Calvino’s Six Memos for the Next Millennium (1985). The chapters 
(1. Lightness, 2. Quickness, 3. Exactitude, 4. Visibility, 5. Multiplicity) refer to qualities that Calvino sought in writing and that he recommends to future writers. Students will read their assigned chapter to figure out its essence. They will then choose and then give a 10–15 minute presentation showing the class five works (design or art — not literature) that pertain to this “memo”. Ideally the chosen pieces will have some connection to the theme of interactivity, even if it's distant. Each presentation (Keynote or PDF) should include the specific “memo” as title, images of each work, and any important metadata (creator, year, link, etc.).


See Projects


In this class, students will strive to make memorable, functional online experiences. Projects should both take a stance (be poetic, critical, and clear) and also be functional (achieve their goals and not break). The invention of useful products is not the focus of this class, but the invention of useful, surprising techniques and approaches might be. Craft (in both code and design) and overall presentation are also important. Taking risks and having fun are encouraged.


30% ... P1
30% ... P2
30% ... P3
10% ... Reading questions and presentation

At the end of the term, you will be required to send me an archival .zip file to document your projects. If you do not send me the archive, you will fail the class.

Please follow the instructions below:

  1. Divide your materials into four folders: P1, P2, P3, and Presentation.
  2. Within each project (P1, P2, P3) folder, make three new folders: Project, Documentation, Description.
  3. Put all of your project materials (code and required assets) into the Project folder.
  4. In the Documentation folder, place two video screen capture (made using Quicktime) to concisely document your project. These will be the exact same video at two different sizes. First, take a screen recording. Save and name this video "FirstnameLastname_P#_Projectname_large" > "JaneDoe_P2_CSSTypeface_large". Then go to "export > 480". Save and name this video "FirstnameLastname_P#_Projectname_small" > "JaneDoe_P2_CSSTypeface_small".
  5. Within the Description folder, place a text file containing a paragraph description of your project.
  6. Within the Presentation folder, place a PDF version of your presentation into the folder. This should be no more than 25 MB. If you included video assets, include links to these videos in an .rtf.
  7. When you make the .zip file, send it to me over wetransfer.com.

—When creating the archive, make sure your assets are optimized for web so that the file sizes are as small as possible
— Make sure every link on your class homepage is working.

Letter grades represent the following: A = excellent; B = good; C = satisfactory; D = unsatisfactory; F = failure. A grade of C- or less is considered a failing grade for required courses within the major, and you will need to retake this course if you achieve a grade lower than a C.

Academic Integrity

Students will become familiar with using pre-existing language, images, and software as raw material while creating entirely new works and how to properly credit their inclusion. While making online projects, we will learn what technologies are good (and important) to appropriate. We will reference the “Fair Use” policy (http://collegeart.org/fair-use), Creative Commons, and software licenses.


Attendance is required. Students are expected to be on time and remain in class for the entire period scheduled. Work missed due to any type of absence is the student’s responsibility. Three or more absences will result in a failing grade. Three late arrivals equals an absence. If you absolutely must miss class, email me in advance.

Late work

Every day a project is late it goes down one letter grade.

Reading questions
Late reading questions will not be accepted.


Extensions may be granted, through negotiation and discussion of individual situations, before the work is due. Please email me as far as possible in advance to request an extension.

Project grade adjustment

As long as you turn your projects in on time, you are eligible to increase your project grade. For each project, you have until the end of the semester to change any aspect. Please touch base with me if you would like clarification on what you can improve. Once you make your changes and you would like me to reassess your project for a new grade, please notify me.


Students should bring their own personal laptops to class. They should also be responsible for their own files, making sure to back them up in some way. For editing and updating code, we will use the code editor Sublime Text. For website hosting, we will use Github Pages. For image-making and sketching, Adobe Photoshop, Illustrator, and InDesign are standard tools that all CCA students have. Other good digital-image making tools include a phone, digital camera, scanner, screen capture, etc.

Learning Outcomes

By the end of this course, students will:

— Understand the web as its own public space
— Understand design principles unique to dynamic media
— Be familiar with a range of contemporary art and design practices online
— Have working knowledge of HTML, CSS, and JavaScript/jQuery
— Have complete, well-documented online projects of their very own


Updated on May 16, 2016