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.

Class Homepage

cif20.labud.nyc

Instructor

Nika Simovich Fisher
simovicn@newschool.edu

Remote Workspace/Zoom

Zoom Room

Code of Conduct + Group Agreement

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.

Learning Outcomes

By the end of the semester, students will be able to:

  1. Use a basic vocabulary of interactive media to both give and respond to critique productively.
  2. Create compelling interactive experiences through more careful and inspired interpretation/translation of content (i.e. develop great design concepts)
  3. 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.
  4. Conceptualize a product, object, or experience for the web and realize it through coding.
  5. Evaluate the difference in designing interfaces for different kinds of devices, their limitations and specific user situations including responsive websites and apps for mobile.
  6. Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support usability and create consistency.
  7. Research historic and current design precedents to contextualize your own work.
  8. Be able to archive and document work that is printed, on screen or time based in a reflective manner for learning portfolio.
  9. Combine your artistic creativity with technology related to the internet.
  10. Demonstrate a comprehension of skills, methods, techniques and processes to realize interactive systems, particularly systems for dealing with unpredictable, variable, and ever-changing content.

Additionally, you’ll learn to:

  • Present your work visually
  • Using interaction to extend a narrative
  • Developing a graphic point of view that amplifies your content
  • Curate and develop original content

Assessment Criteria

  • 15% Attendance & Class Participation
  • 15% Unit 1 Projects
  • 15% Unit 2 Projects
  • 25% Unit 3 Project
  • 30% Unit 4 Project

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
  • Camera
  • Phone
  • Software: Git/GitHub, Sketch or Figma

Course Outline

Unit 1: Weeks 1-4: Working methods

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)

Unit 2: Weeks 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?)

Unit 3: Weeks 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)

Unit 4: Weeks 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

Interview

Partner up with one of your classmates. Interview your partner. Create a series of linked web pages that introduces your assigned partner to the class. Your project can be multipage or single page but should reveal at least ten interesting facts about your partner other than their name. Evaluate how you’ll divide the interview up and how you can utilize typography or graphic components to add interest to support the content.

Object Posters

Select an object that you will study and explore for the duration of this project. We’ll observe the physical and understood characteristics of this object and start to explore the differences between connotative, denotative and metaphorical descriptions. We’ll use the website as a canvas to gesturally express three different components of the object. Consider how you can use a mixed media approach (audio, video, imagery, text) to highlight the object in different ways. Then, consider how you’ll link the websites together and inform the user that they’re part of the same series.

News Room

Research a current event that you’re interested in following. Follow it closely and document your research in an are.na channel. Think about the main details about the situation and develop a visual language that will support the content. Next, design a website to communicate the story and develop additional content (photos, illustrations, animations, writing) to help support the story.

Event Website

Think of an event you’d like to go to as soon as it’s safe to do so. The event can be fictitious or realistic. Consider all the content necessary to house on the event website (time, place, information, etc.).

You’ll design a mobile first website that embraces the spirit of the event and contains all the relevant information for it.

Extra Credit

Create an Instagram filter for the event