︎Back to Interactive & Experience Design

Fall 2022    ︎ SUNY Purchase ︎ (DES 3090) Interactive & Experience Design

Introductions & Expectations

(please note that this is pretty long so that you can reference it later.)

Syllabus .PDF

(Better printed version coming next week)

Background

Here is the official description of the class:

A focused inquiry into the process of designing for, and the creation of, interactive platforms for the purposes of entertainment, persuasion, recreation, and/or human enrichment where the viewer is an active participant. This course is an intensive investigation into considerations surrounding interactive, or experience-oriented, design spaces, and samples supplemental readings from sociology, anthropology, and game theory. You will be required to work collaboratively to pursue concepts through a series of physical and digital investigations.

Because this relates to technology, how we approach it will naturally change dynamically to accommodate it. A more contemporary version for this class might be:

An introduction to programming (via Python and Circuit Playground Express) and the concepts of user interface and experience design. Students learn, through making, research, and historical examples about the nature of contemporary interactive platforms and situations and their relationship to industrial design, print design, and media and entertainment. Opportunities for robust collaboration will be presented through collaborative coding, prototyping and testing.

Synopsis

To put it more colloquially, we’ll be balancing looking at and discussing different kinds of artwork, software, and industrial design and attempt to think about the nature of its design and creation. We’ll gain a fundamental understanding of how programming works to inform how we look at and prototype software. The class can be approached in both a more “careerist” UI/UX perspective, that is to say, creating potentially commercially viable app and interface prototypes or a “freakier” fine art manner. Both approaches are also not mutually exclusive from each other.

Learning Objectives

  • Gain a fundamental understanding of programming in Python via the Circuit Playground Express
  • Gain a fundamental understanding of programming in Python via MakeCode
  • Gain a historical understanding of different paradigms in user interface, interactive, and industrial design.
  • Interrogate the understanding of said platforms through application prototyping and collaborative work and discussion.

Required Materials

(If you have an issue with any of these let’s at least talk about and see what is possible to make things work)
  • Computer with Adobe Creative Cloud
  • Access to Adobe’s Fonts (through Creative Cloud)
  • A Dropbox, OneDrive, Google Drive or similar file sharing account with which to share your homework assignments, progress and sketches.
  • Reasonably stable internet connection (when relevant for Discord meetings)
  • Circuit Playground Express (with alligator clips, USB cable, and LED’s) programmed with Python through mu.

Attendance

As you know, SUNY Purchase, specifically the School of Art+Design, has a rather oppressive attendance policy (emphasis is my own):

There are no excused absences in the School of Art+Design. Three or more absences in any course will result in a failing grade. Excessive tardiness may count as absences. Please see your course syllabi for more details.
This is mostly a good thing, in that it places emphasis on being in class together. However, the realities of life may make this policy feel more draconian than what it was intended to be.

  • Be on time for class, within 10 minutes of the class’s start time, or...ya late.
  • Three latenesses = 1 absence.
  • Being on time, ideally, means arriving a little bit before such that you’re ready to go at the class start time. This is most important for critique if we need to hang up work, or send files to one another.
  • I will send an advanced warning to everyone if I’m in danger of being late.
  • Leaving class early without a valid reason (valid meaning, letting me know before class that you have to leave early) counts as being late.
  • If you leave without explanation more than an hour before the class is done this will count as an absence.
  • It sucks to have to repeat the same thing again, so if you’re late, I will not go back and re-teach any demos or concepts until after a demonstration or discussion is done. Please don’t disturb another student who was on time unless they are ahead and able to help you.
  • If you have a medical condition, job, or something going on personally that prevents you from getting to class on time, completing work, or being in class the entire duration please discuss it with me so I know.

TL;DR be on time and just be in contact with me in advance if you are going to be late or cannot attend class, I will do the same for all of you.

Grading (the class)


SUNY Purchase Grading Guidelines︎

I find most descriptions of the grading process a bit vague. Here’s an attempt to explain each grade letter by what through what two hypothetical people did in a semester for each grade; in as few words as possible.

A

I have to tell you to stop participating in class discussions & your work consistently goes beyond the boundaries of the assignment (in a good way).  
You are somewhat timid in class but your work possesses a certain je ne sais quoi, or your work is more advanced and you are forced into this class by some twist of fate.

B

Your work is well constructed and shows a noticable amount of effort and dedication, is submitted on time and you participate frequently in class. You were late to six classes without discussing with me at any point in the semester that you have a job, and your shift ends right before class.
Your work almost always shows an excellent level of effort and exploration, however you struggled significantly with between one and two projects.

C

You’ve shown up to class on time for every class, you’ve done the minimum requirements for every assignment, and you rarely participate in class discussions and critiques.
You communicate and participate in class discussion, but not to the degree where I’d have to tell you to stop to let other people join in. You submitted several of your assignments late but they showed promise and effort.

D & F

(If you are in danger of getting a D or an F,
you will more than likely be notified in advance)
You did (almost) nothing during the semester, the work you did hand in was multiple weeks late, you have to be reminded (constantly) to get off your telephone.
Your work was extremely shoddily constructed and seems like you made it a couple minutes before class and you were absent for three weeks without letting me know.

All assignments are due on the date outlined in the physical project sheet & project web page. The following conditions constitute a late assignment:
    • You don’t have your project with you in any form.
    • Your project required it be sent in some form (ie via email), in advance and you did not send it.
    • You had an extenuating circumstance preventing you from completing the assignment, however you did not communicate with me at least 24 hours prior to class or figure out an alternative method of delivery.
Late work is subject to the following conditions:
    • Your work will not be critiqued.
    • You may submit your assignment again any subsequent week, however you will lose an entire letter grade for your assignment each week.

The point here is all assignment due dates are (almost always) attached to a critique. Critique is super important to me, and valuable to your development as a designer (and human). A critique where everyone has their work, everyone talks about each other’s work, and everyone has put a suitable amount of effort into their work to help generate conversation is a good critique. I totally understand the reality of doing things at the last minute, however handing things in on time, planning, and communicating with clients and colleagues effectively is part of your job. 

Schedule Overview︎


About me

I live in Ridgewood, Queens with my  cats Cumberbund  (misspelling intentional) and Booger and my partner Hailey.  I’m not going to link my work here, but you may have seen it in other contexts. My art stuff is linked here, and my (currently super out of date) animation stuff is here. I just don’t want any of my work to have any implication about what I consider good in class, but I’m happy to talk about whatever you’d like.

︎Back to Interactive & Experience Design

Fall 2022  ︎ SUNY Purchase ︎ (DES3090) Interactive & Experience Design 

Schedule Overview

(schedule is subject to change based on your feedback and necessity)

(Please defer to the images of whiteboards below, schedule will be adjusted accordingly)


Week 01 ︎ 08/29/2022 ︎

    • Install Mu and get Circuit Python Express working. Upload a screenshot of Mu working and detecting the CPE and the CPE working.
    • Complete upload and print Project: What’s on Top of the Deck?
    • Upload notes for Viewing Party: Darmok
    • Show & Tell assignment ︎ Spencer, Andrea, Casey

      (Whiteboard from 08/29/2022)

Week 02 ︎09/05/2022 ︎

No Classes!


Week 03 ︎ 09/12/2022 ︎

  • Show & Tell review ︎ Spencer, Andrea, Casey
  • Review and Collection of Project: What’s on Top of the Deck?
  • Introduction to Project: Recital #1
  • CPX Warm-up #1: Lightin’ ‘em up!
  • In-class work on CPX  Warm-up #1: Lightin’ ‘em up!
  • Viewing Party: Work (Alternative Input Systems)

  • HW︎
    • Show & Tell assignment ︎ Isabela, Jesse, Gisselle
    • Submit CPX Warm-up #1: Lightin’ ‘em up!

      (Whiteboard from 09/12/2022)

Week 04 ︎ 09/19/2022 ︎

  • Show & Tell review ︎  Isabela, Jesse, Gisselle
  • Introduction to Project: Create a “Recipe”
  • Introduction to Project: CPX Recital
  • CPX Warm-up #2: Broether, May I Have the Loops?
  • In-class work on CPXWarm-up #2: Broether, May I Have the Loops?

  • HW︎
    • Submit CPX Warm-up #2: Broether, May I Have the Loops?
    • Begin work on Project: Create a “Recipe”
    • Show & Tell assignment ︎ Benedikte, Alex, Eliel

      (Whiteboard from 09/19/2022)

Week 05 ︎ 09/26/2022 ︎

(Class was cancelled due to illness)


Week 06 ︎ 10/03/2022 ︎

  • Show & Tell review ︎ Spencer, Casey, Jesse
  • CPX Warm-up #4 Sounding it out 

  • HW︎
    • Submit CPX Warm-up #4 Sounding it out
    • Show & Tell assignment ︎ Andrea, Isabela, Gisselle

      (Whiteboard from 10/03/2022)

Week 07 ︎ 10/10/2022 ︎

  • Show & Tell review ︎ Andrea, Isabela, Gisselle
  • CPX Warm-up #5 FUNctions
  • Presentations on Project: Recipe
  • Check-in on Project: Recital

  • HW︎
    • Show & Tell assignment ︎ Benedikte, Eliel, Spencer

      (Whiteboard from 10/10/2022)

Week 08 ︎ 10/17/2022 ︎

  • Mid-semester one-on-one reviews
  • Digital Input/Output
  • Show & Tell review ︎ Benedikte, Eliel, Spencer

  • HW︎
    • Show & Tell assignment ︎ Alex, Andrea, Gisselle

      (Whiteboard from 10/17/2022)

Week 09 ︎ 10/24/2022 ︎

  • Show & Tell review ︎ Alex, Andrea, Gisselle
  • Project: Recipe ︎ Test Runs/Prototypes
  • Project: CPX Recital ︎Technical Triage

  • HW︎
    • Show & Tell assignment ︎ Jesse, Benedikte, Eliel
    • Complete work on Project: Recipe
    • Continue working on Project: CPX Recital
    • Download and run Processing 

      (Whiteboard from 10/24/2022)

Week 10 ︎ 10/31/2022 ︎

  • Project: Recipe ︎Final Presentations & Response Assignments
  • Show & Tell review ︎ Jesse, Benedikte, Eliel

  • HW︎
    • Show & Tell assignment ︎ Benedikte, Eliel, Jesse, Spencer, Casey, Isabella

      (Whiteboard from 10/31/2022)

Week 11 ︎ 11/07/2022 ︎

  • Shpiel: (Old Timey) Computers & Programs
  • Project: A Change of Boundaries Introduction
  • Project: CPX Recital ︎Recital!
  • Project: Recipe ︎ Response Readings and Re-stagings
  • Show & Tell review ︎ Spencer, Casey, Gisselle

  • HW︎
    • Show & Tell assignment ︎ Benedikte, Alex, Eliel

Week 12 ︎ 11/14/2022 ︎

  • Show & Tell review ︎ Benedikte, Alex, Eliel

  • HW︎
    • Show & Tell assignment ︎ Andrea, Isabela, Jesse

Week 13 ︎ 11/21/2022 ︎

  • Show & Tell review ︎ Andrea, Isabela, Jesse
  • Project: A Change of Boundaries Final Check-in

  • HW︎
    • Show & Tell assignment ︎ Spencer, Casey, Gisselle

Week 14 ︎ 11/28/2022 ︎

  • Show & Tell review ︎ Spencer, Casey, Gisselle
  • Project: A Change of Boundaries Final Critique pt.1

  • HW︎
    • Show & Tell assignment ︎ Benedikte, Eliel, Andrea

Week 15 ︎ 12/05/2022 ︎

  • Project: A Change of Boundaries Final Critique pt.2
  • Show & Tell review ︎ Benedikte, Eliel, Andrea

  • HW︎
    • Show & Tell assignment ︎ Jesse, Alex, Gisselle  


Week 16 ︎ 12/12/2022 ︎

  • Project: A Change of Boundaries Writing Review
  • Havdalah
  • Informal class feedback session
  • Review final work critique writing

︎Back to Interactive & Experience Design

Fall 2022 ︎︎︎ SUNY Purchase ︎︎︎ (DES3090) Interactive & Experience Design

Viewing Party: Darmok




Background

Above is the super exciting trailer for “Darmok” (S05, E02) of Star Trek: The Next Generation! This preview actually totally sells the episode incorrectly (though the monster is kinda cool looking for television of the era). As you’ll see pretty early on, it has a clear relationship to language, failure, and learning.

As you watch this, think about how this relates to situations of new learning, expression, and how it might impact how you approach programming.

Sci-fi bullshit thing that may be important

I like to rewatch these things for when I assign them, but at the time I’m constructing this page I haven’t rewatched it, so I don’t remember if this specific thing comes up. It may help to know there is something in the Star Trek universe called a “universal translator”, a device which translates known alien languages (it is supposed to be in their comm badges apparently, I thought it was just in their ear). In the show, this is the in-universe reason why a Klingon or Vulcan character appears to speak English and they don’t have to muddle through that stuff every episode. The crux of this episode becomes, as you’ll see not the content of the message but the meaning and syntax of the content.

How to Watch

You can watch this episode via Paramount Plus. I’m not sure if Paramount Plus has the same versions but I’d highly recommend trying to watch on one of these platforms as they were recently rescanned and brought up to Blu-ray quality and they look great. If you’re not able to watch via those platforms I can provide a link to a more dubious website where it can be watched for free. Because of the nature of the website I won’t link it here︎

Questions to be ready to discuss and think about as you watch this

  • What did you think of the episode in general?
  • Does this hold up? Is it possibly a little bit racist (it is okay if yes, or okay if no)
  • What similar situations have you faced with learning something or shifting the paradigm of something that might be familiar?
  • How do you react to confusion or frustrating situations?
  • Picard can understand the words the Tamarians use, but not the syntax and meaning in the syntactical connections of ideas how might that relate to programming?
  • In English how does myth help us communicate and concretize ideas?
  • If you’ve done any programming, or learned a new language before does Picard’s experience relate to yours?

Some contextualizing videos/other critiques after you’ve watched the episode






Your assignment 

  • Please take notes on your reactions and feelings on the episode and make sure to upload them to the spreadsheet for class. It is fine to note your initial reactions but please make sure you extrapolate out your ideas into full sentences. For example “Wow that’s crazy!” Is not very helpful, but “The cliffhangar at the end of act 1 really heightened the stakes in the two people not being able to understand each other!” Additionally be ready to discuss said notes.

︎Back to Interactive & Experience Design
︎Back to Interactive & Experience Design

Fall 2022 ︎︎︎ SUNY Purchase ︎︎︎ (DES3090) Interactive & Experience Design

Project:
what’s on top of the deck?



Background

Magic: The Gathering and many card games are based on variance; or the semi-random nature of how the cards are arranged in your deck. This leads to many unfortunate or frustrating circumstances, but also ones that are incredibly exciting:


As such, I’m instituting a new policy to help me call on folks randomly where I draw from a deck of cards you create.

This is 2 week “icebreaker” project. There are no real restrictions on this one so use this as an opportunity to show your style, what you got, etc. as latter assignments will feature significantly more restrictions. All you have to do is create a card which I can randomly pick when I need to call on folks.

Objective(s)

    • Create a card which can be printed and used when I need to call on folks randomly.
    • Help me have something to connect to your name to help me to memorize it.
    • Show your idiosyncratic style or approach.

Final submission

    • A .PNG or .JPG of a 2.5"︎ 3.5" image at 150DPI or 300DPI. This will be 375px ︎525px or 750px︎1050px respectively for reference. 

Requirements

Note that failure to meet these requirements will result in a 0 for this assignment. I’m deadass here.
    • The card image must contain your name. It does not need to be in English, but if uses letters not in the Latin alphabet (Cyrillic, Hangul, etc.) please provide one for pronunciation purposes. Please make it relatively readable.
    • The card image must contain some kind of other content: A drawing of an OC, a stylized self-portrait, a photo you like, a pattern, etc. You must create this content yourself (please at least manipulate an image; do not lazily copypasta something from Google Images).
    • Please print on a relatively thin piece of paper. Do not print on a thicker piece of cardstock or attempt to glue or adhere multiple pieces of paper together. I will be sleeving the cards with an actual Magic: the Gathering card for rigidity and want to preserve randomness as best as possible. That is to say, I don’t want to be able to tell whose card is whose without seeing the card itself.

Grading Rubric

This assignment is pass/fail; meaning you will get 100/A+ if you simply follow the requirements above. You will lose points (10 points or one full letter grade), if it is uploaded late, and an additional 10 points per week it is late.

Considerations

    • The image must print out at the physical size listed above because I will be printing them out and putting them into a standard-sized card sleeve (ie the ones used for Magic: The Gathering and Pokemon). If for some reason you want to parody a Yugioh or Tarot card, that is fine but know they are typically different sizes.
    • Do you, don’t worry about me. Some people take a while to get a hold of this but show me what you’re into, what you want your work to look like, don’t try to anticipate my preference. Additionally my taste is quite bad ︎. 
    • If you are using photographs consider treating them; tastefully. People sometimes just add photographs without adjusting their contrast, adding a filter, collaging them, or something of that nature.  Here’s a couple of tutorials with different ways to stylize your images.



Relevant Dates

    • 08/29/2022 ︎︎︎Introduction!

    • 09/12/2022︎︎︎Review & Collection.


Examples


︎Back to Interactive & Experience Design

Fall 2021 ︎︎︎ SUNY Purchase ︎︎︎ (DES3090) Interactive & Experience Design

knitting Circle: PYthon + CPE Installing & testing


Background

For the programming stuff we’ll be doing in this class, we’ll be using the Circuit Playground Express (pictured above), which you’ll receive from me. The kit includes the CPE itself, alligator clips, a USB cable, and extra LED’s. I also have USB to USB-C converters if you need (for newer macs that only have USB-C).

‘Gator clips ︎︎︎
These will help you start connecting you Circuit Playground to other things like electronic components or fruits or what have you. You can get just alligator clips or ones that go to jumper wires if you start playing with other electronic components and breadboards.

USB-A to USB-C and other dongles︎︎︎

If you have a newer Apple laptop, it may only have USB-C, make sure you can actually plug in your Circuit Playground. I suggest this one as it is quite cheap, but you may prefer something else.

(nice to have) Acrylic Enclosure︎︎︎

These are not part of the kit but are super cute and have a mount you can use on the bottom to connect it to tripods.

(possibly nice to have) Battery Packs︎︎︎
These do not come with the kit but you can get them if you want your project to be untethered from the computer.

(if you’re super into it) Gizmos︎︎︎
These are accessories that connect by screwing on top of your CPX and allow it to connect to screens or motors. 

You do not have to do any programming yet! 

All you have to do is download the Mu programming software and what you’ll need to get up and running with the Circuit Playground Express. Also no problem if you get excited and look ahead.

Directions

  1. Go to this website, download and install mu︎Install this for your respective operating system, this is basically a fancy text editor. This website  provides a little more context that may be helpful if you’ve never used a code editor before (no need to understand this yet).

  2. Follow the instructions here carefully to get the Circuit Python Express up and running︎  You should be able to get to the point where you see the CPE as a drive called CIRCUITPY on your computer, and you can open and edit a file called “code.py”

  3. Edit the contents of code.py to be the code on this page︎
    save the file, it should look like this:


  4. Create a short video and save it to the spreadsheet for the class. You can upload a video from your phone or a link to a YouTube video, or TikTok video or whatever works for you.

If that didn’t work


It’s fine. Don’t get stressed! Or if you are take a breath. Please note what you tried to do, and at what point it did not work and let me know. See if you can reproduce the issue. If you can’t get it running, happy to do a Zoom or Discord session to get things up and running. We can also take some time at the beginning of class next week if everyone is having issues.

If it did work


Heck yeah! If you’re feeling precocious you can continue looking through the tutorials here, or copy some of the examples here into your code.py file and see what they do.

︎Back to Interactive & Experience Design