The Interactive Web
↓ scroll to begin ↓
The web doesn't just show information—it responds, reacts, and creates relationships. But who gets to interact, and how do interactions shape power?
We've spent the first two days understanding the web as a cultural space and visual design as cultural practice. Today, we add a new dimension: time. Movement. Response.
Interactivity is what makes the web feel alive. But like everything else we've discussed, interactivity isn't neutral. The way we design interactions shapes who can participate and how. Let's dig in.
→ Hover over the boxes to feel the difference between the extraction trap and the radical tool.
At the most basic level, it's response. You click something, and something happens. You scroll, and elements animate. You hover, and colours change. The page acknowledges your presence.
But not all interactivity is created equal.
Think about the difference between a mouse-over effect that reveals additional information—something helpful, something that rewards curiosity—versus an infinite scroll that keeps you swiping forever, designed to maximise "engagement" and keep you looking at ads.
Both are interactive. But they serve very different purposes. One empowers the user. The other exploits them.
We live in an attention economy where companies spend billions of dollars figuring out how to make their apps more "sticky"—how to make you check your notifications one more time, scroll through one more video, click one more link.
The "close" button that's actually a "subscribe" button. The notification badge that won't go away. The autoplay that assumes you want to keep watching.
As you learn to add interactivity, I want you to constantly ask yourself: Does this interaction serve the user, or does it serve me? Is this empowering, or is it extractive?
→ Explore the feedback loops and dark pattern examples in the visual panel.
Now let's zoom out and look at how interactive aesthetics have evolved—and been contested—on the web.
The grid is the invisible architecture of the web. In corporate tech, the grid is a tool of sanitisation. Everything is centred, symmetrical, and "responsive" in a way that feels safe and predictable.
But the grid can also be a site of resistance. Web Brutalism and Cyber-punk aesthetics break the grid. They take their name from brutalist architecture—raw concrete, exposed structure, honest materials.
Brutalist websites reject the smooth minimalism of corporate design in favour of something rougher, weirder, more honest. They use overlapping layers, raw edges, and "accidental" compositions to refuse the corporate template.
→ Look at how the "Sanitised" layout hides complexity, while the "Radical" layout reveals the raw material.In the nineteen-nineties, a group of artists and theorists formed a collective called VNS Matrix. They wrote a "Cyberfeminist Manifesto" that declared: "We are the modern c*nt. We are the virus of the new world disorder."
It was provocative, confrontational, and deliberately unsexy to the corporate tech world. They used the emerging internet as a space for feminist art, for challenging gender norms, for imagining alternative digital futures.
This tradition continues today in what's called glitch feminism. Legacy Russell argues that the glitch—the error, the breakdown, the unexpected—can be a site of liberation. A way of refusing the smooth, polished, algorithmic surfaces of corporate tech.
Glitch aesthetics embrace the broken. They celebrate pixelation, distortion, fragmentation. They ask: What if error isn't something to fix, but something to explore?
Compare this to how large platforms want you to have a single, verifiable, "clean" identity. A sanitised profile picture. An SSO (Single Sign-On) that tracks you across the web.
→ Compare the "Single Sign-On" corporate identity with a "Radical ASCII" generator that celebrates fluidity.Too often, accessibility is presented as a compliance issue. A checklist to complete. A legal requirement to meet.
But that framing misses the point entirely. Accessibility is about designing for humans—all humans, not just an imagined "normal" user.
Consider this: Roughly fifteen to twenty percent of the global population has some form of disability. Visual impairments, motor impairments, cognitive differences, hearing differences. When we design websites that only work for people who can see, use a mouse, and process information in particular ways, we're excluding *hundreds of millions* of people.
And here's the thing: accessible design usually makes things better for everyone. Curb cuts help parents with strollers; captions help people in noisy rooms. Keyboard navigation helps motor-impaired users, but it also helps power users who want to navigate quickly without a mouse.
When we add interactivity, we need to think about how that interactivity is accessible. Can it be navigated with a keyboard alone? Does it work with screen readers? Does it give users enough time to respond?
→ Test the simulation filters below to see how inclusive design benefits everyone.Let's look at some examples of interactive websites that do it right.
The Pudding creates interactive essays that use scroll-based animations to tell stories. The interactions add to the content. They help you understand data visually. They're not just decorative; they're functional.
Generative art websites use algorithms to create art that's different every time you visit. The web becomes a canvas for exploration, for randomness, for surprise. Some sites let you draw, paint, or create sound just by moving your mouse.
Collaborative canvases like the Million Dollar Homepage or Reddit's r/place turn the web into a shared space where thousands contribute to collective artworks. These projects remind us that the web can be about us, not just me.
All of these examples use interactivity not to manipulate, but to create. Not to extract attention, but to offer experiences. That's the kind of interactivity I want you to build.
Interactivity is an opportunity to distribute agency—this is its superpower, even more than its potential for decoration or distraction. You have the opportunity to affect another human's body, literally through their interaction with your work.
With this, though comes responsibility. Web aesthetics can challenge dominant culture. Glitch, error, and imperfection can be sites of resistance and expression.
Accessibility isn't compliance—it's justice. It's about designing for the full diversity of human experience.
This afternoon, we're getting hands-on with JavaScript and CSS interactive elements. You'll learn how to make websites respond—to clicks, to scrolls, to mouse movements. And you'll start making choices about how they respond.
You may feel uncomfortable with the speed of some of the learning, it might seem hard, but they say if it doesn't hurt, you're not doing it right. You can ask questions at any time, if your tutors don't exactly know the answer in that minute, we'll find a way to get you the necessary information or point you to a reference so you don't get blocked.
Enjoy the workshop.
Interactive Demo
Hover to experience the difference
(Corporate Extraction)
(Radical Utility)
Trope 1: Feedback Loops & Extraction
Want to save 20%?
Trope 2: The Grid
Sanitized whitespace.
GRID_REFUSAL_V1
Trope 3: Identity
Colour Blindness Simulation
Be kind, be authentic, be human.
To continue, we just need a few "social verification" details. We promise not to sell them (to anyone you know).