Core 1 Interaction

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.

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 a 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 (Week 1-4) 4 Weeks

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.

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 (Week 5-8) 4 Weeks

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)
Layouting (position, float, flexbox, grid)
Designing for the digital canvas (how big is a browser?)

Unit 3: Designing for interaction (Week 9-11) 3 Weeks

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, etc.)
Time-based design (interactive states, storyboarding, prototyping)
User models (entering and receiving data, user flows, UX patterns, ways of navigating)

Unit 4: Networks (Week 12-15) 3 Weeks

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

Harmonic Collection

TLDR;

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 10 programmed entries. The website container is part of the design, as well.

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 design focus and 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, songs you heard while walking around New York, interesting words you came across in articles this week). In the final weeks of the semester, you’ll refine your 10 entries so that they communicate a clear exploration and deliver a website that houses all of them together. You might need to re-organize 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.
Each week’s entry will make use of that week’s design focus.
You will make use of a combination of HTML, CSS, and JavaScript to communicate a story.

Midterm Edit

For Midterms, we will have a one on one meeting. At that time, you will present a refined iteration of your current collection. Prior to this meeting, you’ll chat with your fellow classmates about the following questions:

What is your theme? Has it evolved from the initial description?
How is the content communicating the theme? What about the design?
How would you describe the pacing of the collection so far? Does it feel considered? Can there be a moment for a dramatic break, or an acceleration?
Are there opportunities to establish a template or system to the design — if so, when, where, and how? Can we break the system mindfully to add interest?

You will also prepare a short written doc (one paragraph) that explains your collection’s theme so far and explains three other avenues you can explore for the remaining weeks of the semester.

Assessment Criteria

25% Attendance & Peer Critique
25% Weekly entries and participation
25% Midterm edit and written summary
25% Final collection

Tools

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 tools to organize and run our class:

This webpage, for housekeeping, agendas, and lectures
E-mails, for communication
Are.na, for sharing references
GitHub, for code examples, sharing
Etherpad, for anonymous, temporary note-taking

Class policies

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.

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 email me 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.”

University Policies

All CD classes adhere to the same program and university policies: Link to Policies Document

Disclaimer on AI chatbots

Learning a new skill is a challenging and iterative process, at times messy. It’s in these moments of frustration that we allow ourselves to grow and have a new experience. Do not rob yourself of the opportunity to do that.

That being said, students are allowed to use AI chatbots like ChatGPT, Google Bard, GitHub Copilot or Overflow AI as a supplementary tool to enhance their learning experience during this class. These chatbots are a powerful learning aid that can be used to:

Proofread code you already wrote
Add an explanation to why the code is or isn’t working so that you can understand it better
Debug and catching typos

It is important to maintain a philosophy of learning, critical thinking, and independent problem-solving throughout the class and to open ourselves up to the mental space of being challenged. AI chatbots can help you understand your code better and help you identify typos, however, it is not a substitute for learning how to code yourself, or developing creative solutions to the projects. Hands-on coding, visual experimentation, and diligence are all important skills in becoming a designer, and we should commit to developing these skills in the classroom and beyond. Using an AI chatbot to complete your entire project is not permitted, nor can it be used for generating ideas. If you choose to do this, the person you’re disadvantaging is yourself.