syllabus.md

PSAM 1028
CD Foundations: Interaction

Program	School of Art, Media, and Technology: Communication Design
CRN	TBD
Semester	Spring 2026
Meeting Day	Monday
Meeting Time	4:00pm - 6:40pm
Building/Room	704
Instructor	Ariel Churi
Email	churia@newschool.edu
Class Website	https://github.com/arielchuri/coreInteraction
Office Hours:	Virtually 10am - 3pm, Wednesdays and Thursdays. Appointments must be booked at least 8 hours in advance. Meetings will take place over the zoom link in the calendar invite. Booking link

Course Description
CD Foundations: Interaction is designed to introduce students to programming as a creative medium—as a way of making and exploring. The coursework focuses on developing a vocabulary of interaction design principles which can then be applied across a range of platforms. Students are encouraged to experiment with various media, tools, and techniques, ultimately producing a portfolio of interactive and visual projects designed for the screen. An emphasis is placed on typography as it applies to a screen context, research-based problem solving and a learning-through-making approach to technical skill building. Historical and current interaction design precedents will be discussed. This course is intended for non-communication design majors, as an introduction to the discipline.

Readings

1. Casey Reas, Chandler McWilliams, and LUST, Form+Code in Design, Art, and Architecture
2. Kimberly Elam, Geometry of Design
3. Armin Hofmann, Graphic Design Manual
4. Robert Bringhurst, The Elements of Typographic Style
5. Frank Chimero, The Shape of Design
6. Leah Buley, The User Experience Team of One
7. Compiled by Laurel Schwulst, Very Interactive Library
8. Paul Ford, What is Code?

Course Outline

Unit 1 Week 1-4: Working methods
The first segment of Core Interaction will focus on the tools and concepts required for building interactive experiences. We’ll use the languages of the web because they’re accessible and immediately open up new modes of communication for designers, but the concepts will be transferable to any screen-based or interactive media.

In weeks 1-4 we will focus on:

• File management (naming, organization, file paths)
• Setting up and starting a new project
• Tools (code editor, inspector, git/github)
• HTML/CSS basic concepts and syntax
• Figma (components, prototyping, grids, canvas sizing)

Sample projects: Interview, Expressive Text, All HTML

Unit 2 Week 5-8: Digital canvas
In our second segment, we’ll investigate how designing for the digital canvas differs from other media. We will aim to understand the inherent complexities and how to use them to create compelling digital experiences.

In weeks 4-8 we will focus on:

• Typography with HTML/CSS
• CSS selectors (cascades, combining, parent/child, pseudo)
• HTML structure (box model, dissecting a web page)
• Layouting (position, float, flexbox, grid)
• Designing for the digital canvas (how big is a browser?)

Sample projects: Flags, 25 Variations

Unit 3 Week 9-11: Designing for interaction
Thinking about a website as a series of linked pages, we’ll take the concepts we used to make individual web pages and apply them to larger systems. We’ll explore how our systems can be designed to flex, rather than break, under a wide range of variables while still maintaining the original intent of the design.

In weeks 6-9 we will focus on:

• Multi-page systems
• Programming basic user interactions (:hover, basic JS click, etc.)
• Time-based design (interactive states, storyboarding, prototyping)
• User models (entering and receiving data, user flows, UX patterns, ways of navigating)

Sample project: Stories as Networks

Unit 4 Week 12-15: Networks
Because a website lives in a larger network of apps, websites, devices, and contexts, our final segment will explore how our website lives online. We’ll take the work we’ve done this semester and explore self-publishing and making our work public by putting our work on the internet.

In weeks 10-15 we will focus on:

• Putting a website online (hosting, Github, custom domains)
• Accessibility
• Asset creation (video, image optimization, webGL)
• Metadata (search, social)
• Connecting to other web services

Sample project: Living Collection

Learning Outcomes
By the end of the semester, students will be able to:

1. Use a basic vocabulary of interactive media to both give and respond to critique productively.
2. Create compelling interactive experiences through more care- ful and inspired interpretation/translation of content (i.e. develop great design concepts)
3. Demonstrate an understanding of the iterative making process in interaction design, using incremental methods such as pro- totyping, user research and evaluation to build toward more advanced work.
4. Conceptualize a product, object, or experience for the web and realize it through coding.
5. Evaluate the difference in designing interfaces for different kinds of devices, their limitations and specific user situations including responsive websites and apps for mobile.
6. Evaluate how typography and its variables are applied to inter- active systems to facilitate orientation, support usability and create consistency.
7. Research historic and current design precedents to contextualize your own work.
8. Be able to archive and document work that is printed, on screen or time based in a reflective manner for learning portfolio.
9. Combine your artistic creativity with technology related to the internet.
10. 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

15% Attendance & Class Participation
15% Unit 1 Projects: Interview, Expressive Text, All HTML
15% Unit 2 Projects: Flags, 25 Variations
25% Unit 3 Project: Stories as Networks
30% Unit 4 Project: Living Collection

Attendance, Grading and Work Submission Standards, Program Policies, Making Resources, and University Policies

All CD classes adhere to the same program and university policies:
https://docs.google.com/document/d/1u358io8doX_SVVMGqIM_oH5V0OIccneYu4Ww-uE55QM/edit?usp=sharing

Sample Projects

Interview
Partner up with one of your classmates. Interview your partner. Create a series of linked web pages that introduces your assigned partner to the class. Your project should consist of at least 10 individual pages, and should reveal at least 10 facts about your partner, other than their name.

All HTML
Create a series of 5 unique web pages which focus on one or two HTML tags each (no CSS whatsoever, even inline.) The idea of this assignment is to see how html tags look by default, and to use (or misuse) them in an inventive way.

Expressive Text
Find or compose a piece of writing that can be experienced on a browser. The length of the text should be approximately one printed page. The text can be a poem, manifesto, quote, etc. Layout the text so the experience of reading changes based on scrolling through it.

Flags
Vexillology is the study of flags. All flags have a shared visual vocabulary (stars, stripes, crests, crosses) and there are specific terms to describe these things. Flags are always of interest to designers because they communicate a lot of meaning with very simple, graphic forms. They’re also a perfect thing to make with code. Most of the lines are straight and most of the shapes are described with simple geometry. Start by doing a little research on flags.

You will be given a set of flags. You will be using HTML/CSS to recreate these flags with code. Research your assigned flags and do some planning as to how they can be created. What size should they be? What elements cannot be created using code (and how will you make them)?

You will display all of your flags on one page. What code can be reused between your flags? Give special consideration to how you will present your flags on a single page (and what additional code needs to be written to accommodate that).

Rules: You may only use images for an Emblem or Charge.

25 Variations
Choose a published poem, no more than about a printed page. You will be making 25 formal variations using this poem. Each variation will be a separate webpage. For each variation, you will focus on changing the poem's form through shifts in composition, typography, hierarchy, scale, and pacing. The poem's content must remain intact throughout all 20 variations. This project is divided into 5 levels of increasingly looser constraints of 5 layouts each.

Stories as Networks
Jorge Luis Borges was an Argentinian writer famous for his short stories that deal with labyrinths, dreams, religion, and mathematical ideas (particularly set theory concepts like infinity and cardinality). His circuitous and meandering prose, full of allusions and vivid imagery, is a good way to think about the web as a network that has many nodes and many connections that continuously folds upon itself. It is the act of navigating through this maze that brings meaning to the web experience.

Read all three short stories from The Maker (1960): “Parable of the Palace”, “Everything and Nothing”, “His End and His Beginning”.

Choose one story and set the text using HTML and CSS so that the reader will not only be able to read the story but also experience your interpretation of the story. You may use one page or multiple pages to convey this experience. This experience will be viewed on both large and small (mobile) screens. You should use no more than two typefaces. Representational images are not allowed.

• How does hyperlinking (internal and external) enhance the meaning of the story?
• How does your interpretation of the story shape the way the information is presented?
• Does the experience change when viewing the page on a larger or smaller surface area? If so, how?
• Linearity versus non-linearity
• Pay attention to typographic details: special characters, leading, words per line, etc.

Living Collection
With the use of the collection amassed in the previous part of the class, you’ll be designing and building a website to contain and display that collection.

Keep in mind that you’re not designing a fixed, unchanging website: you’re designing a system that can expand or contract to show this collection as it changes. The design of your site should also in some way reflect your design perspective, particularly what you’ve discovered about your interests and working methods during this course.

Also, think about how your content—and design concepts related to this content—will help you to give form to your site. Other questions to consider: Does the design of the site somehow respond to new content? Rather than being a neutral vessel, how can the design that you use to organize your collec- tion change when the collection itself changes? For example, do colors on the site change in response to the kind or amount of content posted to the site? Does the arrangement of ele- ments or the grid change? Does the site’s navigation change to highlight the most current content?

Minimum Requirements

• Content Addition & Protocol Area(s): The site must contain a
• “mobile-first” area that allows the user to understand the protocol used for the creation of the collection and to allow them to add to this collection, as well.
• Collection Display Area(s): The site must contain an area (designed for larger screens) that allows the user to view your collection.

The process is as follows:

• Create a hierarchy: What are the specific kinds of information that the site will contain/display? Which information should be more promi- nent? Less prominent? How can you give order/ structure to the information?
• Create a User Flow: Map all of the screens/states of your site that shows what in- formation will be displayed, and how the user would navigate from one screen to another. You shouldn’t be thinking of visual design at this point, just of how your site is organized and the way the user will move through it.
• Wireframes / layouts: Create wireframes that show the structure of your site, and layouts that show how each screen will look. Show a full range of examples of the kind of content your site will contain, inter- active effects like hover states, and how the site will change in response to different content. How can you take advantage of differences in screen sizes?
• Functional prototype: Using your layouts as your guide, build your site, test it, adjust the design and the code, and continue tweaking. You’ll un- doubtedly encounter problems with the design that you didn’t initially anticipate, which is why multiple iterations are crucial. Use the qualities and opportunities inherent in the web to your advantage: interactive cues, generation of page code using JS (i.e. not only static HTML/CSS), links to external sites, video and audio, and soliciting user input all can be used to create a powerful experience. Be sure to check your design de- cisions against your content and your intentions/goals to avoid going overboard. Carefully consider the site’s form as it relates to the content.

Alternative Projects

Text Bot
Create an input field that accepts a string of text and provides the user with an output whose design changes in response to different values/combinations of each input. Use a combination of HTML, CSS, and JS to create a form that generates a results page whose design changes with different inputs. JS will be used to generate HTML and CSS so that the page’s design and content are generated dynamically (this is especially useful for sites whose content is in constant flux or is so voluminous that it would be impractical to store static pages for each possible state). This should be a compelling interactive experience, and consider the site’s beginning and end, the arc of the narrative, and the formal beauty of the result. The experience should be engaging enough to make us want to try many different combinations to see how the design changes. The experience may be optimized for larger/smaller screens or both.

Parasite
Information on the web is constantly being mediated and interrupted by ads, web applications, gateways, and portals. These components necessarily alter the way we experience information online.

Create a bookmarklet that mediates the experience of browsing on the web.

Make use of JS functions
Is your tool a gateway or is your app/site an invisible actor?
How will your tool alter the social implications of the site?
How do you harness the power of confusion?
How do physical techniques like bricolage, collage, graffiti, overprinting, etc. factor into your design?

Sample Exercises

Analog Programming
In this assignment, we will try to answer the question “what is a program?” at its most fundamental level.
Part 1:

1. Create a design for a concert poster that is inform- ative and also that you find visually compelling. It must in- clude at least one original image and any information that you deem necessary.
2. Based on the questions like those posed above (but probably not limited to), in everyday language (and words, only), write a ‘program’ that allows someone to replicate your design. Pay attention to the text as well as the form of this program.
3. Print out your instructions.

Part 2

1. Trade programs with a partner without showing them your design.
2. Using the program you’ve been given, create a new poster design
3. Present your designs side-by-side with your partner. Show your programs and explain the logic behind them. Where did your program run without ‘errors’? Where did your program create an unexpected result? Consider how you will present all of this information.

Discussion
– How does a program enforce standards (rules) vs. facilitate expression (variables)?
– How will your partner get the assets required to com- plete the design (fonts, images)?
– What assumptions do we need to make about tools? Workspace? Software settings?
– How do you solve problems when the original design- er isn’t available?

Git Poetry
In this assignment, we will write a poem together in class. As a demonstration, I will write the first line of our poem, and using Git, commit and push it to a Github repo that we all have access to. We'll go around the room, with each consecutive person pulling the latest version of the code, adding a new line to the poem, and commit and pushing it to the repo so that the next person can continue our poem.

Abstracted Web
Reference layouts of a chosen category of website(social media, news, streaming, etc) and recreate the basic layout of five sites using CSS and HTML. Tie these bootlegs together with a home page explaining your process and concept.

Materials and Supplies
Laptop
Camera
Software: Git/GitHub, VS Code, Figma

Weekly Schedule

Week	Date	Unit	Topics	Assignments Due	Assignments Given
Week 1	Asynchronous	Working Methods	Intro: Syllabus, Class community agreements Lecture: Computers, files, and networks Workshop: Analog Programming		Interview
Week 2	Feb 2	Working Methods	Lecture: Tools, file management, version control Workshop: Git Poetry		Interview (cont)
Week 3	Feb 9	Working Methods	Lecture: HTML/CSS basic concepts and syntax Demo: HTML basics	Interview	All HTML
	Feb 16		NO CLASS - President's Day
Week 4	Feb 23	Working Methods	Lecture: HTML structure (box model, dissecting a web page) Demo: CSS basics	All HTML	Expressive Text
Week 5	Mar 2	Digital Canvas	Lecture: CSS selectors (cascades, combining, parent/child, pseudo) Demo: Advanced selectors	Expressive Text	Flags
Week 6	Mar 9	Digital Canvas	Lecture: Layouting (position, float, flexbox, grid) Workshop: Abstracted Web		Flags (cont)
	Mar 16		NO CLASS - Spring Break
Week 7	Mar 23	Digital Canvas	Lecture: Typography with HTML/CSS Demo: Web typography	Flags	25 Variations
Week 8	Mar 30	Digital Canvas	Lecture: Designing for the digital canvas Workshop: Midterm Check-ins		25 Variations (cont)
Week 9	Apr 6	Designing for interaction	Lecture: Programming basic user interactions (:hover, basic JS) Demo: JavaScript basics	25 Variations	Stories as Networks
Week 10	Apr 13	Designing for interaction	Lecture: Time-based design Workshop: Digital Materiality		Stories as Networks (cont)
Week 11	Apr 20	Designing for interaction	Lecture: User models (data, user flows, UX patterns) Demo: JavaScript interactions		Stories as Networks (cont)
Week 12	Apr 27	Networks	Lecture: Putting a website online Workshop: Deployment	Stories as Networks	Living Collection
Week 13	May 4	Networks	Lecture: Accessibility, Metadata Workshop: Web standards		Living Collection (cont)
Week 14	May 11	Networks	Lecture: Asset creation (video, image optimization) Workshop: Final project work		Learning Portfolio Reflection
Week 15	May 12	Networks	Final Presentation (Tuesday make-up day session)	Living Collection Learning Portfolio Reflection