Core 1: Interaction

Core 1: Interaction – Syllabus


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.

You can think of this class as a hands-on workshop where our browser is a canvas. We’ll experiment with code, develop formal design principles, and think about how our work fits into the broader context of the internet at large.

Download this as a PDF

Class Homepage

cif22.labud.nyc

Instructor

Nika Simovich Fisher
simovicn@newschool.edu

Code of Conduct

As a class, we will create a group agreement that addresses respect and etiquette in the classroom. Students will be responsible for maintaining this standard throughout the semester. Parsons is very lucky to have a representative group of students with different backgrounds and cultures. With this comes varying amounts of privilege and awareness, so it is important that we practice patience and empathy in the classroom. We must all continuously learn, be open to criticism, develop a consciousness about these discrepancies, and actively seeking equity and allyship in the classroom and beyond.

You can see our code of conduct here

Readings

  • Beatrice Warde, The Crystal Goblet
  • Matthew Butterick, Drowning the Crystal Goblet
  • Jiwon Lee, What’s ‘Crystal Goblet’ in Korean?
  • Richard Rutter, The Elements of Typographic Style Applied to the Web
  • Hito Steyerl, In Defense of the Poor Image
  • Gyorgy Kepes, Language of Vision (Excerpt)
  • Ksenya Samarskaya, Nontsikelelo Mutiti on Interrogating the Euro-centric Design Canon
  • Chancey Fleet, Dark Patterns in Accessibility Tech
  • Kashmir Hill and Aaron Krolik, At Talkspace, Start-Up Culture Collides With Mental Health - Concerns
  • Kyle Turman, Pillars of Digital Product Design

Assessment Criteria

  • 15% Attendance & Peer Critique
  • 20% Unit 1: Working Methods
  • 20% Unit 2: Digital Canvas
  • 20% Unit 3: Designing for Interaction
  • 25% Unit 4: Networks

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

All Communication Design classes adhere to the same program and university policies: View them here

Tools + Materials

  • Laptop/Computer
  • Phone
  • Software: Git/GitHub, Sketch or Figma

Course Outline

Unit 1 Week 1-4: Working Methods and Web Typography

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)
  • Putting a website online (hosting, Github, custom domains)
  • Connecting to other web services

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 5-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?)
  • Asset creation (video, image optimization, webGL)

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 9-11 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)
  • Accessibility
  • Metadata (search, social)

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 12-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

Projects

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 11 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 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 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
  • You will make use of a combination of HTML, CSS, and JavaScript to communicate a story