Core 2 Interaction Syllabus
“In today’s highly commercialised web of multinational corporations, proprietary applications, read-only devices, search algorithms, Content Management Systems, WYSIWYG editors, and digital publishers it becomes an increasingly radical act to hand-code and self-publish experimental web art and writing projects.”
—J.R. Carpenter
Course Information
Core 2: Interaction Studio, PUCD 2125
- Program
- School of Art, Media, and Technology: Communication Design
- CRN
- 2726
- Semester
- Spring 2023
- Meeting Day
- Tuesdays and Thursdays
- Meeting Time
- 7:00–9:40pm
- Building/Room
- Parsons 2 W 13th, Room: 1006
- Zoom
- https://NewSchool.zoom.us/my/otsukam
- Instructor
- Marie Otsuka
- otsukam@newschool.edu
- Class Website
- You are here
- Lab Website
- Lab
Course Description
This course exposes students to thorough and elaborate interactive concepts and techniques for applications. It is an extensive investigation in the interface, the mechanism, the controls and the aims of interactive works. Students will learn how to design and develop complex interactive projects and understand how to undertake comprehensive research and direct their thinking process from brainstorming to the final outcome. They will be given the tools to conceive, plan and develop an interactive system and they will become aware of the importance of their role in the development of interactive media.
Accessible Tasks
Studio Lectures + Reading
Pre-recorded lectures and assigned readings will be discussed every unit. Topics will cover historical, critical, and practical issues in interaction design. Students are expected to watch and provide questions for group discussions.
CD Lectures
All Sophomores are required to attend or watch the CD Lecture series throughout the term. Students must write a 1-page written response to each lecture on how the speaker presented individual projects and discussed their practice as a whole. Students must include screenshots to supplement their writing. All written responses must be submitted by Friday, May 7 for credit.
Lab Demos
Pre-recorded technical demos will be provided by Lab instructors to support the studio projects. Students are expected to watch these demos and complete Lab assignments to build the technical skills required for each unit.
Course Outline
Unit 1: Interaction with Typography
The first segment of Core 2 Interaction will focus on a review of the tools and concepts required for building interactive experiences. We’ll understand how the Internet works, its evolution, and to make and break code as we build a simple web project. We’ll explore how we use online platforms everyday and how to translate these interactions into a story. We’ll learn about speculative design and explore how our platforms can create alternate narratives about who we are and how the world could be.
Moving from observation, we’ll survey the development of interface aesthetics and how the tools we use define the visual language of digital interfaces. We will experiment with typography and navigation to express a non-linear narrative.
Project 1: Stories as Networks
In weeks 1-5 we will focus on:
- History of the Internet and how it works
- Research and observation of our online behavior
- File management (naming, organization, file paths)
- Setting up and starting a new project
- Tools (code editor, inspector, git/github)
- Review of HTML/CSS basic concepts and syntax
- Figma (components, prototyping, grids, canvas sizing)
- Digital typography and web fonts
- Responsive type with HTML/CSS
Unit 2: Interaction with Data
Content is dynamic—it can grow and is rarely fixed. It can be user-generated or time-sensitive. It can be ingested by algorithms and contained in a spreadsheet. We’ll explore how data fuels our websites and how to design an elastic collection. We’ll discuss private and public use of data—from open source to social media and how our data is being used to drive decisions today.
Project 2: Elastic Collections
In weeks 6-9 we will focus on:
- Collections and archives
- Creating dynamic outputs with HTML/CSS/JS
- Multi-page navigation
- Digital design systems
- Vernacular forms
Unit 3: Interaction with the City
Interactive systems are for users with specific needs and expectations. We’ll learn about the user-centered design process, accessibility, and how it shapes design decisions in the platforms we use. We’ll build a website as a tool for a specific user.
Project 3: New York City in Data
In weeks 10–15 we will focus on:
- Identifying user problems, research, and testing
- Real-time data sources (APIs/CMS)
- Accessibility and usability in digital platforms
- Data visualization
- Private/Public data use
Required Projects
View all projects
Learning Outcomes
By the end of the semester, students will be able to:
Use a basic vocabulary of interactive media to both give and respond to critique productively.
Create compelling interactive experiences through more careful and inspired interpretation/translation of content (i.e. develop great design concepts).
Demonstrate an understanding of the iterative making process in interaction design, using incremental methods such as prototyping, user research and evaluation to build toward more advanced work.
Conceptualize a product, object, or experience for the web and realize it through coding.
Evaluate the difference in designing interfaces for different kinds of devices, their limitations and specific user situations including responsive websites and apps for mobile.
Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support usability and create consistency.
Research historic and current design precedents to contextualize your own work.
Be able to archive and document work that is printed, on screen or time based in a reflective manner for learning portfolio.
Combine your artistic creativity with technology related to the internet.
Demonstrate a comprehension of skills, methods, techniques and processes to realize interactive systems, particularly systems for dealing with unpredictable, variable, and ever-changing content.
Assessment Criteria & Grading Rubric
Your performance in this class will be evaluated according to the criteria below.
20% Project 1
25% Project 2
28% Project 3
27% Class Participation ( Class Engagement 12% + Responses 15%)
| Project 1 | 20 | |
|---|---|---|
| Conceptual Thinking | Original and creative thinking, depth of investigation, and historic/contemporary context | 4 |
| Process | Iteration, risk-taking, and refinement of ideas and skills towards the final project | 4 |
| Response | Appropriateness of solution to original intention, problem, or audience | 4 |
| Visual Quality | Devotion to craft and attention to detail of typography, form, composition | 4 |
| Technical Realization | Ability to use code meaningfully to reflect design intentions | 4 |
| Project 2 | 25 | |
|---|---|---|
| Conceptual Thinking | Original and creative thinking, depth of investigation, and historic/contemporary context | 5 |
| Process | Iteration, risk-taking, and refinement of ideas and skills towards the final project | 5 |
| Response | Appropriateness of solution to original intention, problem, or audience | 5 |
| Visual Quality | Devotion to craft and attention to detail of typography, form, composition | 5 |
| Technical Realization | Ability to use code meaningfully to reflect design intentions | 5 |
| Project 3 | 28 | |
|---|---|---|
| Conceptual Thinking | Original and creative thinking, depth of investigation, and historic/contemporary context | 5 |
| Process | Iteration, risk-taking, and refinement of ideas and skills towards the final project | 5 |
| Response | Appropriateness of solution to original intention, problem, or audience | 6 |
| Visual Quality | Devotion to craft and attention to detail of typography, form, composition | 6 |
| Technical Realization | Ability to use code meaningfully to reflect design intentions | 6 |
| Participation | 12 | |
|---|---|---|
| Observation | Thoughtful evaluation of other’s work, asks clarifying questions, recommends constructive changes or references to look at | 3 |
| Language | Proficiency and use of design concepts and terminology during critique | 3 |
| Frequency | Regular contribution to other’s critique, enthusiasm, and quantity of comments | 3 |
| Professionalism | Timely and productive weekly progress, attitude to feedback, verbal and visual presentation of process and final work | 3 |
| Responses | 15 | |
|---|---|---|
| CD Lecture Writeups | 1 point for each writeup submitted | 6 |
| Reading Responses | 0.5 point for each writeup submitted | 8 |
| Reading Lead | Lead the class discussion | 1 |
Letter Grades
A (95 – 100)
A- (90 – 94)
B+ (86 – 89)
B (84 – 85)
B- (80 – 83)
C+ (76 – 79)
C (74 – 75)
C- (70 – 73)
D (60 – 69)
F (59 and below)
Attendance, Grading and Work Submission Standards, Program Policies, Making Resources, and University Policies
All CD classes adhere to the same program and university policies
Attendance Policy
For classes meeting twice a week, students are allowed 4 absences. Any absence beyond the allowed absences will result in an automatic failure (F) for the course. There are no excused absences, and doctor’s notes are not necessary.
A student is deemed tardy if a student fails to arrive within 15 minutes past the beginning of class. 2 tardies will result in an automatic absence. A student who arrives an hour past the beginning of class will be deemed absent.
Materials and Supplies
Laptop
Technologies (Google Drive/Dropbox Paper/Canvas/Notion)
Classroom management for schedule, projects, and presentations
Slack
Class communication for all Core 2 and direct messaging with instructor and peers. Join Here
Git/GitHub
We will be using GitHub to manage our code. Sign up if you don’t have an account already.
Figma
Figma is a modern interface design tool that is collaborative online. We will be using Figma exclusively for creating your design mockups. Sign up with your newschool.edu email for a free education account and Join the Team.
Sublime Text
Sublime Text is a sophisticated text editor for code, markup and prose.
Google Chrome
A fast, secure, and free web browser. We’ll be using Chrome in the class for easier troubleshooting.
Vimeo
Watch lectures and demos on the CD Vimeo account Password for all videos: interaction
Arena
are.na is platform for collecting and connecting content. We’ll be looking at a lot of websites over the course of this class. Once you’ve signed up on are.na, you can join our group and share inspiration, as well as keep it as an archive. See Omar Mohammad: Tools for Cultural Production: Archiving Voice, Culture, and Community
Tutors
CD Tutors are available for extra help!