Skip to content

syllabus.md

Latest commit

 

History

History
194 lines (152 loc) · 10.3 KB

syllabus.md

File metadata and controls

194 lines (152 loc) · 10.3 KB
Raw

Syllabus

PSAM 1028

Core 1: Interaction
Program School of Art, Media, and Technology:
Communication Design
CRN 3066
Semester Spring 22
Meeting Day Monday
Meeting Time 7:00pm
Building/Room Academic Entrance 63 Fifth Ave Room: L101
Zoom Zoom link
Password 839047
Instructor Ariel Churi
Email churia@newschool.edu
Class Website https://github.com/arielchuri/coreInteraction

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.

Readings

  1. Casey Reas, Chandler McWilliams, and LUST, Form+Code in Design, Art, and Architecture
  2. Kimberly Elam, Geometry of Design
  3. Armin Hofmann, Graphic Design Manual
  4. Robert Bringhurst, The Elements of Typographic Style
  5. Frank Chimero, The Shape of Design
  6. Leah Buley, The User Experience Team of One
  7. Compiled by Laurel Schwulst, Very Interactive Library
  8. Paul Ford, What is Code?

Course Outline

Unit 1 Week 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 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 4-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 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 6-9 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 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 10-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

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 pro- totyping, 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 inter- active 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.

Assessment Criteria

15% Attendance & Class Participation

15% Unit 1 Projects: Interview, Expressive Text, All HTML

15% Unit 2 Projects: Flags, 25 Variations

25% Unit 3 Project: Stories as Networks

30% Unit 4 Project: Living Collection

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

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

https://docs.google.com/document/d/1u358io8doX_SVVMGqIM_oH5V0OIccneYu4Ww-uE55QM/edit?usp=sharing

Weekly Outline

week + date Activity Due
Week 1 01/24 ONLINE
Class community agreements, expectations on attendance and communication, Canvas site walkthrough.
Recipe 01/28
Week 2 01/31 ONLINE
Recipe Style 02/10
Week 3 02/07 Expressive Text 02/10
Week 4 02/14 Flags 02/25
02/21 PRESIDENT'S DAY
Week 5 02/28 Stories as Networks 03/04
Week 6 03/07 Living Collection 03/11
03/14 SPRING BREAK
Week 7 03/21 Mad Lib 04/01
Week 8 03/28 ONLINE
Midterm Check-ins
Week 9 04/04 Textbot 04/08
Week 10 04/11 Git Poetry 04/15
Week 11 04/18 ONLINE
Pitch Deck 04/25
Week 12 04/25 Working Session 05/09
Week 13 05/02 Working Session
Week 14 05/09 Learning Portfolio Reflection Post 05/16
Week 15 05/16 Final Presentation

Materials and Supplies

Laptop

Camera

Software: Git/GitHub, Atom, Figma