Immersive Storytelling: Scrollytelling One-Page Parallax - a short guide how to build the most stunning multi-media story

Ulf Grüner | www.ulfgruener.de | 2015
how to build the most stunning multi-media story:
a short guide to
ONE-PAGE-STORYTELLING
types – workflow – storyline – storyboard – examples
1

3 different types
1. one page
2. parallax
3. dossier
2
4. deep

3 different types
1. one page
2. parallax
3. dossier
3
completely linear: 1 storyline
> example "the guardian“(Firestorm)
linear with sidesteps: 1 storyline with parallel  
additional parts. two or more storylines possible
> example NYT „Snowfall“
package of linear stories
> example ikrk.srf.ch
4. deep one linear story with in depth extensions
> https://fold.cm/

the structure | do you have a story, really?
a real story needs at least*
• someone
• doing something
• with one clear objective and/or problem
that’s the short version ;-)
a real story needs
• central character with motivation and specific characteristics
• action (a plot)
• main problem
• outcome
• judgement
• narrator
• frame
(*) for more details on concepts of a story see – for example –:
http://visual.ly/kurt-vonnegut-shapes-stories-0?utm_source=visually_embed and
http://www.openculture.com/2014/02/kurt-vonnegut-masters-thesis-rejected-by-u-chicago.html
4

the structure | plan your story
first check these 3 steps to an amazing story:
• 10 keywords
• what are the essential words for our story?  
without these keywords our story could not be told.
• 1 sentence (the take away)
• what should your audience take away from your story?
• write it in just 1 sentence or a tweet
• 2 plot points
• plot points are events (i.e. action, quote, observation)  
that spins your story in a new and/or unexpected direction (*)
• find at least 2 plot points in your story
(*) for more details on the concept of „plot points“ see „Syd Field's Paradigm“
and https://en.wikipedia.org/wiki/Screenwriting_theories#Theories_on_writing_a_screenplay
5

the media | enrich your story
surprise your audience (and sometimes disturb)
• look for extraordinary pictures:
• emotion
• action
• prefer detail/close ups
• one point to focus
• the main object or person is on the right or the left side,  
never in the middle
• want to place text in photos?  
check in advance in which part of the photo your text is visible  
(white text on dark photo?)
6

the media | enrich your story
• use effects carefully
• slow motion
• HD video
• color splash
• stop trick
• time-lapse
• use interactivity: scroll animation
7

the narrative | tell your story
you‘re going to tell a story. not to build a picture gallery.
so, do it like Hollywood, write a screenplay.
and make it more parallax, more interactive.
8

the narrative | think mobile first
how about the mobile experience?
think mobile first:
plan your story to be as immersive as possible
on small screens
9

the narrative | storyline | structure
start
story
end
10

start
intro
info
cliffhanger
page 1
page 2
page 3
start quickly
do not bore your audience with traditional heading and
introduction:
• surprise your audience
• start with close-up, with details
• start right in the middle of your story
the narrative | storyline
11

start
intro
jump into your story with (i.e.)
info
cliffhanger
• quote
• detail (photo)
• action (video)
• surprising fact
(text or graphic)
page 1
page 2
page 3
do not bore your audience with traditional heading and introduction:
12

start
intro
info
cliffhanger
• quote
• detail (photo)
• action (video)
• surprising fact (text or graphic)
add some orientation with (i.e.): • map
• bullet points for
quick overview
• personal welcome
message (video)
page 1
page 2
page 3
13

start
intro
info
cliffhanger
• quote
• detail (photo)
• action (video)
• bullet points for quick overview
• personal welcome message (video)
make your readers curious with (i.e.): • quote
• first part of a
stunning picture
• collage
• text
page 1
page 2
page 3
14

start
intro
info
cliffhanger
• quote
• detail (photo)
• action (video)
• bullet points for quick overview
• personal welcome message (video)
make your readers curious with (i.e.): • quote
• first part of a stunning picture
• collage
• text
page 1
page 2
page 3
mind the gap:
the „bail out point“ comes at 80 seconds – at the latest
15

story
page 4 etc.
• it‘s a story to scroll – so, use the
transition from page to page as part of
your narrative
• it‘s an interactive story – use animation
parallel to your text
• again: it‘s a story, not a picture gallery –
your narrative must be concise, strong
and tight
16

story
page 4 etc.
set plot points:
events (i.e. action, quote, observation) that
spins your story in a new and/or unexpected
direction
• it‘s a story to scroll – so, use the transition from page to page as part
of your narrative
• it‘s an interactive story – use animation parallel to your text
• again: it‘s a story, not a picture gallery – your narrative must be
concise, strong and tight
17

story
page 4 etc.
set plot points:
events (i.e. action, quote, observation) that spins your story in a new and/or
unexpected direction
of your narrative
use magic moments:
_ quotes, facts, pictures
_ catharsis, clearing, aha!
18

story
page 4 etc.
do not link outside your story
• show additional material inside
your story as a sidestep or a little
break
• offer additional material exactly
when it is needed
set plot points:
events (i.e. action, quote, observation) that spins your story in a new and/or
unexpected direction
of your narrative
magic moments:
quotes, facts, pictures
catharsis, clearing, aha!
19

the 2 types of interactivity
the narrative | interactive
it‘s an interactive story – use animation parallel to your text and add interactivity:
20

your audience can only
control the speed of your
story:
1. slow down your
audience reading by using
transition effects between
2 or more pictures (again:
it‘s an image-led story)
2. use flipbook-effects
besides or in between your
main storyline
21

your audience can only control the speed of
your story:
1. slow down your audience reading by
using transition effects between 2 or more
pictures (again: it‘s an image-led story)
2. use flipbook-effects besides or in between
your main storyline
your audience can control
the speed and the depth of
your story:
1. offer some choices in
some parts of your story:
additional reading,
interactive map etc.
2. call to action: let your
audience participate, start
a dialogue or a quiz or a
survey
22

23
! make sure these extras will be readable on small mobile
screens as well
! choose these extras carefully, do not overload your story
! place them carefully, do not break the flow of your story

end
the last page
24

end
the last page
short version
_ offer a quick overview
_ „this story in 10 seconds“
25

end
the last page
• link back to  
the most amazing parts of your story
• link to related content on your website
• link to related content on the web
short version
offer a quick overview, „this story in 10 seconds“
26

end
the last page
• link back to the most amazing parts of your story
short version
27
offer dialogue:
invite to comment
invite to talk

end
the last page
• link back to the most amazing parts of your story
short version
28
offer dialogue:
invite to comment
invite to talk
call to action:
motivate to share this story

storyboard | the narrative | storyline
p 1
p 2
last
start:
thrill
29

p 1
p 2
last
start quickly
your first 3 pages are extremly intuitive,
easy and fast to read
show emotions
start:
thrill
intro
info
cliffhanger
30

p 1
p 2
last
start:
thrill
story:
depth
31

p 1
p 2
last
deliver more
indepth reporting
worth to read
slow down,
but use different speed during this main part of your story
ensure diversity
from page to page with tough changes
i.e. from pure text to stunning action video etc.
start:
thrill
story:
depth
intro
info
cliffhanger
32
start quickly
your first 3 pages are extremly intuitve, easy and fast to read
show emotions

p 1
p 2
last
start:
thrill
story:
depth
end:
action
33

p 1
p 2
last
start quickly
your first 3 pages are extremly intuitve, easy and fast to read
show emotions
deliver more
indepth reporting
worth to read
slow down,
but use different speed during this main part of your story
ensure diversity
from page to page with tough changes
i.e. from pure text to stunning action video etc.
start:
thrill
story:
depth
end:
action
stop your readers
best-of-show (i.e. videos)
link back to the most emotional parts of your story
fun fact or other suprise (i.e quote, fact)
call-to-action (let them share your story)
intro
info
cliffhanger
34

p 1
p 2
last
start:
thrill
story:
depth
end:
action
35

storyboard example | the narrative | storyline
p 1
p 2
last
36

storyboard | the narrative | storyline | copy template
p 1
p 2
last
37

• SRG: Qualität im Journalismus http://www.srginsider.ch/qualitaet/
• SRF: ikrk.srf.ch („dossier“, produced by a web-agency)
• SRF: Die Menschen von Maracana http://www.srfcdn.ch/srf/news/kultur/maracana/f5dba9bc6eb14ec5b084ff24b3742e05/
• SRF: Nationalpark – Hier wird‘s wild http://www.srfcdn.ch/srf/news/nationalpark/
• Firestorm The Guardian http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family
• Snowfall NYT: http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
• http://powering-people-city.theguardian.com/
• The Reykjavik Confessions
• http://pitchfork.com/features/cover-story/
• Helmand's Golden Age. Afghanistan once faced the future with confidence. Caught here on film, it's an era the world has forgotten.
http://www.bbc.co.uk/news/special/2014/newsspec_8529/index.html
• River City Ingenuity
• http://deutschlandradiokultur.pageflow.io/thementag-le-corbusier#24163
• https://fold.cm/read/pbernier1/fold-une-nouvelle-plateforme-de-storytelling-35ZaZTm5
• https://fold.cm/read/Rochelle/the-magicians-inside-the-internet-22oB7wX6
• WDR: Auftaktrennen des Super Gravity NRW Cup http://reportage.wdr.de/gravity
• WDR: Parabelflug http://reportage.wdr.de/parabel#13816
• WDR: Jacques Tilly baut seit 30 Jahren Karnevalswagen für den Düsseldorfer Rosenmontagszug http://reportage.wdr.de/jacques-tilly
• Examples from Shorthand (http://www.pinterest.com/shorthand101/):
◦ ESPN: http://review.espn.co.uk/football/index.html
◦ The Guardian: http://www.theguardian.com/sport/interactive/2013/jul/08/england-v-australia-history-rivalry-interactive
◦ BBC: http://www.bbc.co.uk/news/special/2014/newsspec_7141/index.html
◦ Centre For Public Integrity: http://eagleford.publicintegrity.org/
◦ Art Gallery NSW: http://projects-origin.artgallery.nsw.gov.au/afghanistan/
◦ Alice In Wonderland: http://story.sh/alice/
examples | resources
38

Software:
http://shorthand.com
http://pageflow.io/
https://www.storehouse.co/
https://fold.cm/
https://creatavist.com/ (https://atavist.com/)
https://exposure.co/
http://story.br.de/linius/
https://prinzhorn.github.io/skrollr/
https://www.thinglink.com/
Platforms:
Jeremy Caplan’s 18 new digital storytelling platforms noted here
https://twitter.com/jeremycaplan/lists/coolest-digital-platforms/members
examples | software
39

Thanks for great discussions, feedback and additions:
Jeremy Caplan,
Director of Education, Tow-Knight Center Entrepreneurial Journalism,  
CUNY Graduate School of Journalism (http://www.jeremycaplan.com),
Rachel Bartlett,
Editorial planning and training manager for @Shorthand_,  
former editor of http://Journalism.co.uk (https://twitter.com/rachelabartlett)
thanks |

Immersive Storytelling: Scrollytelling One-Page Parallax - a short guide how to build the most stunning multi-media story

More Related Content

Viewers also liked (18)

More from Ulf Grüner: training for journalists (20)

Recently uploaded (20)

Immersive Storytelling: Scrollytelling One-Page Parallax - a short guide how to build the most stunning multi-media story