Expressive Web

Hypertext - use the web to tell a story

The web as a network

Example - Please talk to me - personal storytelling

Example - You are Jeff Bezos

Example - Interface as theater (Ryan Kuo)

• ​

Expressive web = the web as a space

Let’s acknowledge the web a commodity

The web as a bubble - link

The web as a bubble

The attention economy

“Senator we sell ads”

Detachment from real connections through the web

"we live in a world that is working to eliminate touch as one of our senses"

--Gary Rogowski, furniture maker

Tom Galle

Face Messenger

Source: Frank Chimero - link

The web as a space

The web as (literal) architecture

Websites are hosted on real computers (servers), backed by real electricity and power. Data is stored on real chips on memory.

-> Websites are physical

The web as (literal) architecture

Mesh network

The web as a (metaphorical) space

Can we compare websites to architecture?

Websites are public spaces

Privately hosted, publicly accessible

Because of the shared HTTP protocol

Websites decay

“Similarly, when viewing old web pages in modern browsers we are confronted with a temporal paradox. Layer upon layer of dated web-design aesthetics overlap and peel like wallpaper, revealing earlier versions beneath. Pages optimised for lower resolutions now take less than a third of the screen. Ghosts of browsers past mingle with occasional page errors, dead links, and missing images. Sound files play automatically. Warnings abound, issued from earlier eras, addressed to readers who are not us. [...] These are not artifacts of a dead web but rather, signposts on a map of a living web pointing to a web as it once was, a web in progress, a web in the making.”

​

J. R. Carpenter, A Handmade Web

Websites are inhabited

They become part of societies through the interactions they enable. They are homes to communities, to thoughts and approaches.

From “Web Design as Architecture” - link

Websites exist within frameworks

They negotiate contrasting requirements. As architecture deals with zoning and building regulations, websites deal the limits of what a browser can parse. Coding frameworks and design systems also guide and constrain how websites are built.

Websites are spaces

Websites are spaces

How do we make them expressive spaces?

• Exploration: Allow the reader to visit walk through, and meander
• Community: Allow it to be dynamic - and shaped by its visitors
• Meditation: Encourage lingering, meditation
• Adjectives: slowness, quiet, gathering, discovery

​

​

Examples

“Spatial Computing”

r/place - one pixel art project

Let’s create a meaningful space

Expressive Web

“Make an interactive website that feels like a house, a room, or a space. “

​

This does not have to be literal

“We want to think of the internet as a physical place. It is not about making the virtual physical, but rather to argue that the virtual also exists physically.”

— Woon Tien Wei (Net Art Anthology)

Connections between the units

How do we connect each unit?

• HTML and CSS — the foundation of a webpage
• p5.js — thinking programmatically
• HTML, CSS, JS - using programming to generative content in a webpage

​

Technical expectations

Expected

• Your website should use Javascript
• It should be interactive - meaning it uses event listeners
• It should programmatically add or remove content on the page in response to interaction (i.e. insert HTML and CSS)

Out of scope

• Website that allows the viewer to contribute content in realtime (this requires a database)
• Feeling others’ presence in realtime

Technical expectations

You can embed things

• Spreadsheets, images
• Archives
• P5.js sketches