immersive storytelling: one-page-/parallax - a short guide how to build the most stunning...

Ulf Grüner | www.ulfgruener.de | 2014

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


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

http://www.nytimes.com/projects/2012/snow-fall/%23/?part=tunnel-creek

http://ikrk.srf.ch/de/


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

http://visual.ly/kurt-vonnegut-shapes-stories-0?utm_source=visually_embed

http://www.openculture.com/2014/02/kurt-vonnegut-masters-thesis-rejected-by-u-chicago.html


the structure | plan your storyfirst 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

https://en.wikipedia.org/wiki/Screenwriting_theories#Theories_on_writing_a_screenplay


the media | enrich your storysurprise 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 | storyline | structure

start

story

end

9


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

10


start

introjump 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:





11


start


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






12


start


info

cliffhanger




• 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






13


start


info

cliffhanger




• 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






14


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

15


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

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



of your narrative




use magic moments:

_ quotes, facts, pictures

_ catharsis, clearing, aha!

17


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!

18


the 2 types of interactivity

the narrative | interactive

it‘s an interactive story – use animation parallel to your text and add interactivity:

19



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


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


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

21




22

!! 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


23


end

the last page


short version

_ offer a quick overview

_ „this story in 10 seconds“

24


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“

25


end

the last page• link back to the most amazing parts of your story




short version


26

offer dialogue:

invite to comment

invite to talk


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

call to action:

motivate to share this story


storyboard | the narrative | storyline

p 1

p 2

last

start:

thrill

28



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

29



p 1

p 2

last

start:

thrill

story:

depth

30



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

31

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

32



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

33



p 1

p 2

last

start:

thrill

story:

depth

end:

action

34


storyboard example | the narrative | storyline

p 1

p 2

last

35


storyboard | the narrative | storyline | copy template

p 1

p 2

last

36


• 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

!• 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

!• WDR: Auftaktrennen des Super Gravity NRW Cup http://reportage.wdr.de/gravity

• WDR: Haldern Pop Festival http://reportage.wdr.de/haldern-pop

• 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

37

http://www.srginsider.ch/qualitaet/

http://ikrk.srf.ch/de/

http://www.srfcdn.ch/srf/news/kultur/maracana/f5dba9bc6eb14ec5b084ff24b3742e05/

http://www.srfcdn.ch/srf/news/nationalpark/

http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family

http://www.nytimes.com/projects/2012/snow-fall/%23/?part=tunnel-creek

http://www.bbc.co.uk/news/special/2014/newsspec_7617/index.html

http://pitchfork.com/features/cover-story/


http://app.shorthand.com/export/6d95af2a009c444e9877db6a9da58551/index.html

http://reportage.wdr.de/gravity

http://reportage.wdr.de/haldern-pop

http://reportage.wdr.de/jacques-tilly

http://www.pinterest.com/shorthand101/

http://review.espn.co.uk/football/index.html

http://www.theguardian.com/sport/interactive/2013/jul/08/england-v-australia-history-rivalry-interactive


http://eagleford.publicintegrity.org/

http://projects-origin.artgallery.nsw.gov.au/afghanistan/

http://story.sh/alice/


Software:

http://shorthand.com, http://pageflow.io/, https://prinzhorn.github.io/skrollr/

!!Platforms:

Jeremy Caplan’s 18 new digital storytelling platforms noted here

https://twitter.com/jeremycaplan/lists/coolest-digital-platforms/members

examples | software

38

http://shorthand.com

http://pageflow.io

https://prinzhorn.github.io/skrollr/




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 |

http://www.jeremycaplan.com

https://twitter.com/rachelabartlett