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.
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.
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)
- Asset creation (video, image optimization, webGL)
- Metadata (search, social)
- Connecting to other web services
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.
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.
- 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.
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.
- 25% Attendance & Peer Critique
- 25% Weekly entries and participation
- 25% Midterm edit and written summary
- 25% Final collection
- Paul Ford, What is Code, 2015
- Mindy Seu, Making Spaces in Online Archive, 2017
- Nicole Fenton, Words as Material, 2015
- Natalie Cecire, Apple’s Modernism, Google’s Modernism, 2015
- Taeyoon Choi, What is Poetic about Computation?
- Shannon Mattern, Things that Go Beep, 2018
- Peter Middleton and James Spinney,Notes on Blindness, 2014 video
- Lens Culture, How AI Sees Us
- Armin Hofmann, Graphic Design Manual (1965)
- David Reinfurt, Muriel Cooper, 2018
- Meg Miller and Ilaria Parogni, The Hidden Image Descriptions Making the Internet Accessible, 2022
- AUTHENTIC & Erik Carter, 3 heads, [ closeup ]!! detailed painting 4 k, 2023
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
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.
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
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.