Philo van Kemenade
Creating tools, stories and things in between to amplify human connection with arts and culture.
Stories that move
Philo van Kemenade
IFS Cologne | Nov 2024
Interactive web & mobile narratives
Storytellers United
CLEVER°FRANKE is a world leading strategic data design and technology consultancy that delivers data driven digital transformation through crafting innovative user and customer experiences.
this seminar
🌬️ The power of stories
🔗 A dynamic medium
🎨 Web making
📝 Story crafting
👬 Mini projects in pairs
🎤 Concept pitches
course notepad
The power of stories
Stories help us understand
ourself
each other
the world around us
Stories move
us
through space
and time
storytellers
we have always been
our tools
shape our expression
the web
as meta medium
movies on the web
of the web
movies
Media
Design
Tech
what language do we speak here?
collaborate
make
share
Story Jam
graphic design
web development
script writing
filmmaking
tiktok?
mentoring
15 locations
20+ events
400+ participants
50+ prototypes
A dynamic medium
Dynamic
Interactive
the capacity to change
content, style, layout, ...
responding to user input
click, scroll, swipe, tilt, turn on, pick up, walk, resize, log in, ...
Let me introduce the word “hypertext” to mean a body of written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper.
– Ted Nelson
A file system for the complex, the changing and the indeterminate (1965)
Films, sound recordings, and video recordings are also linear strings, basically for mechanical reasons. But these, too, can now be arranged as non-linear systems [...] for editing purposes, or for display with different emphasis. [...]
The hyperfilm—a browsable or vari-sequenced movie—is only one of the possible hypermedia that require our attention.
– Ted Nelson
A file system for the complex, the changing and the indeterminate (1965)
Enabling an experience
using the capability of the web
as a mechanism for narration
from the start of the authoring process
Web-native storytelling
All stories [...] are changes over time, so if you pay attention to what changes, you’ll find the point of the story. This also implies that if we are looking for ways to use narrative in our work as a design material, all we need to do is ask where the time passes to find the story’s proper place.”
– Frank Chimero
The Shape of Design (2012)
One Millionth Tower https://www.nfb.ca/interactive/highrise_one_millionth_tower_en
Snow Fall https://www.nytimes.com/projects/2012/snow-fall/
Do not Track https://donottrack-doc.com/en/
Dream x Reality https://senxskutocnost.sng.sk/en
Filla Fulla Chat https://fillafulla.sng.sk/?lang=en#
T1D Index https://dashboard.t1dindex.org/
web-native storytelling examples
Share an inspiring web/mobile storytelling project.
What changes over time?
What drives this change?
exercise in pairs
Webmaking
if filmmaking is like sculpting...
... webmaking is more like LEGO
Some words about code
Interface between
&
Reality
Representation
Some words about code
-
🌳 a skill continuum
-
❌ no magic
-
💭 naming matters
-
🤖 ...watch this space...
3 Web ingredients
Hypertext
Markup
Language
HTML
What's on the page?
Cascading
Style
Sheets
CSS
How does it look?
Javascript 'does' things, like interactivity or fetching data, calculations, updating 'state'
Javascript
How does it work?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello IFS Cologne 👋</h1>
<p>Welcome to this very simple web page.</p>
</body>
</html>
HTML + CSS
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello IFS Cologne 👋</h1>
<p>Welcome to this very simple web page.</p>
</body>
</html>
HTML + CSS + JS
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script>
function sayHello() {
alert("hello world!");
}
</script>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello IFS Cologne 👋</h1>
<p>Welcome to this very simple web page.</p>
<button onclick="sayHello()">Say Hello</button>
</body>
</html>
✍️ designing in the browser
Web of pages ➡️ web of applications & data
Interaction requires 'state'
User Interfaces are made out of components
The modern web
Copy the HTML + CSS + JS example from the previous slide
Paste it in your favourite text editor
(e.g. download Sublime Text at www.sublimetext.com/download)
Save as index.html
Open the HTML file in your favourite browser
Bonus: remix by adding elements, styles and functionality
(Cheating encouraged!)
exercise
Story crafting
Start with
Why does this story need to be heard?
Why would your audience care?
why
2 Tips to find your story
Start with a question you don’t know the answer to
Find the unusual experts
Get to know your audience
What are their goals?
What are their frustrations?
this can form the basis of a "persona"
individually (1 min):
2 questions you don't know the answer to
in pairs (2 min each):
share your questions and see what resonates
role play (3 min each):
interview one unlikely expert (can be an audience member)
keep notes
Keep it simple and silly 😉
exercise
Frameworks, formats & metaphors
There are two successful outcomes when a design focuses on its audience: resonance and engagement. Stories speak to the first and frameworks to the latter.
Frameworks are the structures that allow for contributions to be made to the products of design, and increasingly, it has become the work of the designer to create these frameworks.
– Frank Chimero
The Shape of Design (2012)
Metaphors are assistive devices for understanding.
You give a user something to grasp onto when you make a metaphor solid. In the case of software on a screen, the metaphors visually explain the functions of an interface, and provide a bridge from a familiar place to a less known area by suggesting a tool’s function and its relationship to others.
– Frank Chimero
What screens want (2013)
This is the secret power at the heart of all formats - formats are a form of storytelling that you do more than once.
– Matt Lock
Using Formats To Turn Prospects Into Loyal Audiences (2024)
Formats help audiences make the decision to give you their attention.
Formats help your production workflow
Des Traynor https://www.intercom.com/blog/start-with-a-cupcake/
start with a cupcake
in new pairs:
share your interview notes
note & vote
brainstorm a framework or format for your story
paper prototype cupcake & 2 min pitch
exercise
Concept pitch
Thank You!
Stories that Move
By Philo van Kemenade
Stories that Move
One day seminar at IFS Cologne on interactive web and mobile narratives
