Our syllabus

Course description

Core 1: 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.

• Submitted version
• Course catalog

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 (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.

Course outline

Unit 1: Working methods

Weeks 1–4

The first segment of the course 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.

• 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)

Unit 2: Digital canvas

Weeks 5–8

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.

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

Unit 3: Designing for interaction

Weeks 9–11

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.

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

Unit 4: Networks

Weeks 12–15

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.

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

Class project

Harmonic Collection

You’re going to pick a theme to explore visually for the duration of the semester. Each week, you’ll design and code an entry to a collection that explores this theme. At the end of the semester, you’ll deliver a website that houses 11 programmed entries. The website container is part of the design, as well.

Harmonic Collection

Project description

In mathematics, a sequence is defined as a series of numbers arranged in a predictable pattern. It’s a type of number set which follows specific, definite rules. When translated to design, sequencing is a natural part of systems—each individual item has unifying elements that, when looked at as a whole, tells a larger story.

In this class you’ll create a Harmonic Collection that explores a theme of your choice. Each week, you’ll design and code an entry into your collection that makes use of the HTML, CSS, and JavaScript skills we’re developing.

First, you will pick a theme of your choice (think of it as the overarching concept you’ll explore through a series of sketches). Your theme should be open-ended enough to encourage a range of content, but specific enough to inspire an idea each week for twelve weeks.

Example themes: Your daily commute, solitude, interesting words you came across in articles this week.

In the final weeks of the semester, you’ll refine your 11 entries so that they communicate a clear exploration and deliver a website that houses all of them together. You might need to reorganize or add additional content to your container or entries to fully realize your idea.

Minimum requirements

• The website and all the entries must be responsive (work on a variety of screen sizes).

• While each entry will be unique, there should be unifying visual components between them.

• All hyperlinks must be functional.

• You will make use of a combination of HTML, CSS, and JavaScript to communicate a story.

Assessment criteria

For final grading, these tasks will be weighted as below:

Recommended readings

• Form+Code in Design, Art, and Architecture
  Casey Reas, Chandler McWilliams, and LUST

• Geometry of Design
  Kimberly Elam

• Graphic Design Manual
  Armin Hofmann

• The Elements of Typographic Style
  Robert Bringhurst

• The Shape of Design
  Frank Chimero

• The User Experience Team of One
  Leah Buley

• Very Interactive Library
  Compiled by Laurel Schwulst

• What Is Code?
  Paul Ford

Materials and supplies

In the open tradition of the early web, the only materials truly required are a computer, a browser, a text editor, and an internet connection. The specifics of these are open to the student’s individual preferences and practices. I will do my best to accommodate everyone and will make recommendations, when needed.

In class, I will demonstrate using Visual Studio Code for programming, and GitHub/GitHub Desktop for version control and project hosting. All of these products are available for free.

We will use the following sites to organize and run our class:

• Course site
  For housekeeping, agendas, and lectures

• Slack channel
  For direct and asynchronous communication (not email)

• GitHub team
  For code examples, sharing

• Google Drive
  For document collaboration, recorded lectures

• Zoom room
  For screen sharing and recording

Our class policies

Our community

This agreement is intended to help us create and maintain a safe, empathetic, and productive space for our course. It can be revised and modified, with all of our input, over the semester.

• The class should feel comfortable asking the instructor anything—nothing is too trivial, or embarrassing, or off-topic. Tangents are good. Students can ask via Slack, if they would like to remain anonymous.

• Classmates should use our preferred names and pronouns.

• When presenting, students will “have the floor” while they take us through their work. This means everyone else will be quiet, we’ll close our laptops, and give our full attention to the person showing their work.

• We will have a short break, roughly halfway through the class.

We can (and should) revisit this agreement throughout the semester. Please let me know if you’d like to raise something with the class.

Inclusion

My intent is to respect and give forum to a range of perspectives and backgrounds, including culture, race, gender, sexual orientation, socioeconomic status, disability, and age. In instances where I am personally not qualified to speak from a specific perspective, students are encouraged to explore this area themselves. And please me know if there are ways that the course can better serve these goals.

Engagement

There are program policies (below) around attendance, but we also have an engagement policy—which will likewise affect students’ evaluation and final grade, as their engagement will be unavoidably reflected in the quality of their work.

Students are expected to actively and passionately participate in this course. This means more than showing up and turning things in on time, which should be a given. Beyond that baseline, students should be curious, prepared, thoughtful, vocal, and intentional throughout the course. They should make us understand why they are here, and demonstrate to us that they care about themselves, their work, and each other—and ultimately, about this chosen profession.

Office hours

I will have limited availability outside of our class time, and won’t keep scheduled “office hours.” Students should not rely on me to solve specific design or technical problems. Their first resource should be themselves, then this course site and its materials, and then each other. If there are still questions—such as logistical or content ones—students can message me on Slack, and we will respond when I can. But this should never be a bottleneck; all of this works better when not done at the last minute.

Additional technical help

For more specific technical instruction and questions, Parsons has dedicated CD-program tutors available to help students with HTML, CSS, and JavaScript, as well as offering general design critiques and feedback. The drop-in schedules are available in the CD@Parsons app under “Make & Remake.”

Recording sessions

I will take screen recordings of our sessions for students to reference later. As these will include the students and their work, the recordings will be stored on our Google Drive and made available only to New School email users.

Attendance, grading, and other policies

All CD classes adhere to the same common program and university policies.

Acknowledgements

I’d like to thank Eric Li, Caspar Lam, E Roon Kang, Nika Simovich Fisher, and the other Core 1: Interaction instructors for their support in planning this syllabus and semester.