Assignment 8
Interactive Editorial

Read or listen to This is Water by David Foster Wallace. The phrase “This is water” refers to the idea that the most obvious realities are often the hardest to see.

Create an interactive version of “This is water”, including all text from the original essay. Your interactive version must also include at least three visual treatments, which could be imagery, typographic compositions, illustrations, etc. Finally your interactive version should include three “novel interactions”. You can design this for either desktop or mobile viewing.

Your interactive version should at the minimum be a Figma prototype. I would highly encourage you to use emerging technilogies such as website buidlers like Framer or Readymag, or agentic AI tools like Figma Make, Cursor, Codex or Claude Code.

(If you used “This is water” for your poster triptich, you may select any piece of fiction or non fiction of your choosing for this assignment.)


Deliverables Week 1 (GC) Design your interactive version and include a link in this Google Doc. Our crit will focus on your interpretation of the essay and your approach to visuals and interactions.


Deliverables Week 2 (FC)
Design your interactive version and include a link to your final in this Google Doc.


LEARNING OUTCOMES
Interactive design combines all the elements we have explored in the course so far, including typography, composition, hierarchy, pacing and structure, visual design, art direction and finally animation. This assignment is an opportunity to bring all of these elements together, using the language of the web.

Background
Revisit our class lecture to interact with various editorial and web based design work. Here is a short list of “novel interactions”.

Scroll trap: Page locks to sections
Scroll scrub: Scroll advances video content
Parallax: Page scrolls at different speeds
Hover reveal: Content appears on hover
Cursor morph: Cursor changes shape
Click-to-transform: Clicking alters layout
Click-and-hold: Duration controls action
Drag: Page becomes a draggable space
Proximity reaction: Elements react before hover
Scroll storytelling: Scroll triggers narrative
Behavior feedback: Website comments on user actions