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

cif21.labud.nyc

Instructor

Nika Simovich Fisher
simovicn@newschool.edu

Remote Workspace/Zoom

Zoom Room

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

Unit 1

  • 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

Unit 2

  • 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

Unit 3

  • 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 & Class Participation
  • 20% Unit 1 Project: Interview
  • 20% Unit 2 Project: Rock Garden
  • 25% Unit 3 Project: How To
  • 10% Design Journal
  • 10% In-class Sketches

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

Project: Interview

Unit 2: Week 5-10: 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-10 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)

Project: Rock Garden

Unit 3: Week 11-15: 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 11-15 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)

Project: How To

Projects

Interview

For this assignment, we’ll work with typography on the internet and familiarize ourselves with basic HTML and CSS. You’ll receive a partner for this assignment, that you’ll then interview. Evaluate how you’ll divide the interview up and how you can utilize typography or graphic components to add interest that supports, not distracts from, the content. Your interview should have at least 10 unique questions.

Once you have your content, you’ll design and program a website that houses the interview and introduces your partner to the class. Next, you’ll clone the HTML of your website twice so that there are three HTML files that look exactly the same. You’ll create two additional versions of the interview that are structurally the same (HTML) but visually different (CSS). All three versions of the interview will be linked together.

Rock Garden

A rock garden is a controlled plot of ground that highlights a curated assortment of rocks, stones, and boulders. Most rock gardens are carefully landscaped and any additional shrubs, trees, and agriculture is carefully groomed and selected. When a specific type of rock is collected, it becomes a typology – a classification according to general type.

For this project, you’ll create your own “rock garden” in the browser. You should move away from the “rock” metaphor, and develop a typology of your own (for example: Google Street View screenshots of beaches; People with pink hair on the street). Your typology can be demonstrated with any media – photo, graphic, writing, videos, or a mix of different types. In addition to a conceptual theme, consider how to visually unify the items in your garden.

Your Rock Garden should have 20 “rocks” in it and can be housed on a single page or multi-page website. When viewing the garden, a narrative should emerge about your typology and draw the user in to what you found interesting about it.

How To

At its best, the internet is a magnificent pool of information and knowledge. Let’s contribute to it. For this assignment, think of something you’d like to teach the class to do. It can be small (how to tie a ribbon on a gift) or large (how to get the most out of your education?) but should exercise an editorial point of view.

Think about how you can use a combination of language, imagery, interactivity, and design to instruct someone to do something. The audience is also helpful to consider – how does your tone of voice change based on who the skill is for? Consider how the website might evolve if you were to expand the audience, or specify it even further.