⟳

• Dhriti (she/her)
• Hugo (he/him)
• Hannah (she/her)
• Eneya (she/her)
• Cathy (she/her)
• Hedy (she/her)
• Luna (she/her)
• Anaïs (she/her)
• Sherrie (she/her)
• Isabelle (she/her)
• Niklas (he/him)
• Wen-Hsin (she/her)
• Kexuan (she/her)
• Aria (she/her)

requirement

There will be 1–2 assigned readings for most classes. Students are responsible for writing one short reading response due before class. Reading responses should include your thoughts on the material (2 sentences minimum) and 2 questions for discussion. Submit your reading response here before class.

readings

• w1: Kittler, “Introduction" Gramophone, Film, Typewriter
• w2: Nill, “Contest 4 Kids", Digital Kids, Edition Digital Culture 4
• w2: Zittrain, “Tethered Appliances, Software as Service, and Perfect Enforcement", The Future of the Internet—And How to Stop it.
  
• w3: Zittrain, “Battle of the Boxes" and “Battle of the Networks" The Future of the Internet—And How to Stop it.
  
• w3: Barlow, A Declaration of the Independence of Cyberspace.
  
• w5: Schwulst, My website is a shifting house next to a river of knowledge. What could yours be?
• w5: Rob Giampietro, I Am A Handle
• w6: “The Interface Experience”
• w6: Apple WatchOS Human Interface Guidelines
• w11: Keith, “Chapter 5: Layers” Resilient Web Design
• w11: Helal, Henslee & Michaelson, Barn Raising: Building a Museum Web Site Using Custom Wiki Tools
• w11: Experiment Jetset, Whitney Graphic Identity

Make a recording that contains a small but unique experience or observation from your life. It could be:

A small journal
A grocery list
A photograph
A print
A drawing
A video clip
An audio clip
An object
A series of little gadgets
…

You will be presenting this piece in the next class, keep your presentation to 3–5 minutes, and envisage a second iteration of the presentation with or without a language component. You are welcome to present either 1 or 2 iterations, but please still keep them in the designated time length.

Consider:

1. What is included in the presentation from the initial happening? (a. What was included the initial happening, but got lost in the recording process? b. What was included the initial happening, but got lost in the presentation process? c. What wasn’t in the initial happening, but emerged from the presentation process?)

2. What is your intention of making this recording, and to what extent does the final presentation meet your plan?

Recap: describe a main component(s) in your last Recording–Playback project, and think about the relationship between the main component(s) to the process. Consider:

1. At which step can you make changes to make this major component stand out more in your project?

2. Think about the relationship between this new finding to your larger interest in design, are they overlapped or staggered?

Consider adding at least one digital step in the Recording-Transmission-Playback cycle. You can make:

A website,
A mobile app prototype,
A performance,
A dance choreography,
A book,
An interactive text,
A physical machine,
An interactive object,
A Java program
…

and don’t set yourself in the box yet, try to think about the potential materials like:

paper,
wood sticks,
light bulbs,
a pool of water
…
mouse,
keyboard,
tablet,
touch-screen,
camera,
projector,
printer
…
Coding languages (HTML, CSS and etc.),
Adobe suite,
Robofont (or Glyphs)
Rasperry Pi
…

And to envisage:

1. It has to be interactive, although the user/demonstrator could be yourself. Think about the accessibility and performative factors in your design when think about interactions.
2. Inputing environment: what are the digital and physical environments? For digital, what’s the inputing device (i.e a keyboard)? For physical, what’s the connection between your setup to the data that you hope to extract? what are the gestures to input? and who (i.e user or author) is going to do it?
3. Playback environment: what is the final output through your system? Does the playback have to be in a specific environment? how about the audience? what are the gestures to play back? what are the interactions in the playback process?
4. How much do you “control” your data from the recording to the playback, do you expect it to change or stay the same? Or, what are the two forms of information that you extract and translate from input to output in your system?

read more:

Dexter Sinister, On a Universal Serial Bus* (read more)

James Bridle, “Encoded Experiences,” Mieke Gerritzen (ed.)

Orit Gat, “Data Roaming: Orit Gat and artist Julia Weist travel to Havana in search of El Paquete Semanal, the Cuban offline internet,” Frieze (July 30, 2016)

references:

Boxify (bookmarklet)

How do you perceive a space?
Think about this classroom—

The physicalities consist our perception of a “space,” but how do you depict one that lives digitally? As we previously discussed, digital world contains no borders, no walls neither no floors.

pre-assignment:
Prepare a piece of writing depicts an architecture(s), a street view or a space.
We will use this piece of writing as the starting point to imagine a digital architecture. Elaborate a “space” living inside the browser in the ways of digital design.

guest lecturer:
Nick Massarelli
Katie Colford

references:

Web design as architecture

To Hear No Echo

eSsEnS eSsEnTiAls (sound)

umhi.xyz

UCLA DMA Salon (sound)

Leviathan Cycle

MOS architecture

Hakunamatata House

Poetic Computation 2016

MCA

Canadian Centre for Architecture

The time has finally come: spanning over 7 weeks, you are going to develop an independent project. You are responsible for the independent concepts, independent sketches, and independent project developments. Maybe it’s good to think these questions:
Who do you work for, and what are your (unaccomplished) ambitions in digital design systems?

Requirements

1. Talk to the public:
Who do you plan to speak to through this project, and what storytelling strategies are you going to use?

a. Curate your content:
Don’t overwhelm yourself, narrow it down to a choice of 3 articles: text, videos, photograph et al. Rationalize why the selection of the content makes sense to yourself, then you can think how could it make sense to your audience.

b. Strategize your design:
What are the strategies you can recall from your previous projects for structuring a narrative? Think about the Recording-Playback technique or the spatial thinking inside a broswer. You can make a list of them, and see if they are useful for this new project. Make your design to “lure” your audience, get them to think on the same page with you.

2. Responsiveness:
No matter what formats you are going to use, the final design must include at least 2 displays on different devices—this does not mean more functions, but typography and layouts that are presented differently.

3. Print on Screen:
Integrate all the editorial design and typography knowledge that you have learnt earlier this semester, decide your typography carefully that substantiates your concept, you need to be able to articulate the reasons for your type choices as well as other styles in your design system.

Final Review Guest Critic:
Luiza Dale

• Class are.na

resources for code learning

• Mozilla Developer Network
• W3Schools
• Stack Overflow
• Codecademy
• Free Code Camp
• Super Hi

recommended bibliography

• Braidotti, Rosi, Posthuman Knowledge, Polity Press, 2019.
• Lessig, Lawrence, Code: And Other Laws of Cyberspace, Version 2.0, Basic Books; 2nd Revised ed. edition, 2006
• Lessig, Lawrence, Free Culture: The Nature and Future of Creativity, The Penguin Press (United State of America), 2004.
• May, John, Signal. Image. Architecture., Columbia Books on Architecture and the City, 2019.
• Kitter, Friedrich A., Gramophone, Film, Typewriter, Standford University Press, 1999.
• Zittrain, Jonathan, The Future of the Internet—And How to Stop it, Yale University Press, 2008

This course is greatly inspired by sessions created by Sarah Oppenheimer, Brad Rosen, Laurel Schwulst, Mindy Seu and Geoff Han; and generously supported by Luiza Dale and Tuan Quoc Pham. Special thanks to Kelly Walters for exclusive planning and organizing work.