how to build the most stunning multi-media story

:

a short guide to

ONE-PAGE-STORYTELLING
types – workflow – storyline – storyboard – examples

1

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

3 different types
1. one page

2. parallax

3. dossier

2

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

3 different types
1. one page

completely linear
1 storyline
> example "the guardian“(Firestorm)

2. parallax

linear with sidesteps
1 storyline with parallel additional parts
two or more storylines possible
> example NYT „Snowfall“

3. dossier

package of linear stories
> example ikrk.srf.ch

3

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

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

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

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

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

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?)

!
!

use effects carefully

slow motion

HD video

color splash

stop trick

time-lapse

!
!

use interactivity: scroll animation

6

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

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.

7

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

the narrative | storyline
start
story
end

8

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

the narrative | storyline
start
page 1

page 2

page 3

intro
info
cliffhanger

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

jump into your story with (i.e.) •

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)

make your readers curious with (i.e.):

quote

first part of a stunning picture

collage

text

mind the gap:
the „bail out point“ comes at 80 seconds – at the latest

9

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

the narrative | storyline

it‘s a story to scroll – so, use the transition from page to page as part
of your narrative

story

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

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

do not link outside your story

show additional material inside your story as a sidestep or
a little break

10

offer additional material exactly when it is needed

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

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

the 2 types of interactivity

your audience can control the speed and the
depth of your story:

your audience can only control the speed of

!

your story:

1. offer some choices in some parts of your

!

story: additional reading, interactive map

1. slow down your audience reading by

etc.

using transition effects between 2 or more

!

pictures (again: it‘s an image-led story)

2. call to action: let your audience

2. use flipbook-effects besides or in between

participate, start a dialogue or a quiz or a

your main storyline

survey

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

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

the narrative | storyline

short version
offer a quick overview, „this story in 10 seconds“

• link back to the most amazing parts of your story

the last page

• link to related content on your website
• link to related content on the web

end
offer dialogue:
invite to comment
invite to talk

call to action:
motivate to share this story

12

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

storyboard | the narrative | storyline
p1

p2

intro
info

start quickly
your first 3 pages are extremly intuitve, easy and fast to read
show emotions

start:
thrill

cliffhanger
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

story:
depth

i.e. from pure text to stunning action video etc.

end:

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)
last

action

call-to-action (let them share your story)

13

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

storyboard example | the narrative | storyline
p1

p2

last

14

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

storyboard | the narrative | storyline | copy template
p1

p2

last

15

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

examples | resources

!

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/

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
16

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

thanks |
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)

17

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

Sign up to vote on this title
UsefulNot useful