Ulf Grüner | www.ulfgruener.de | 2015
how to build the most stunning multi-media story:
a short guide to
ONE-PAGE-STORYTEL...
Ulf Grüner | www.ulfgruener.de | 2015
3 different types
1. one page
2. parallax
3. dossier
2
4. deep
Ulf Grüner | www.ulfgruener.de | 2015
3 different types
1. one page
2. parallax
3. dossier
3
completely linear: 1 storylin...
Ulf Grüner | www.ulfgruener.de | 2015
the structure | do you have a story, really?
a real story needs at least*
• someone
...
Ulf Grüner | www.ulfgruener.de | 2015
the structure | plan your story
first check these 3 steps to an amazing story:
• 10 ...
Ulf Grüner | www.ulfgruener.de | 2015
the media | enrich your story
surprise your audience (and sometimes disturb)
• look ...
Ulf Grüner | www.ulfgruener.de | 2015
the media | enrich your story
• use effects carefully
• slow motion
• HD video
• col...
Ulf Grüner | www.ulfgruener.de | 2015
the narrative | tell your story
you‘re going to tell a story. not to build a picture...
Ulf Grüner | www.ulfgruener.de | 2015
the narrative | think mobile first
how about the mobile experience?
think mobile fir...
Ulf Grüner | www.ulfgruener.de | 2015
the narrative | storyline | structure
start
story
end
10
Ulf Grüner | www.ulfgruener.de | 2015
start
intro
info
cliffhanger
page 1
page 2
page 3
start quickly
do not bore your aud...
Ulf Grüner | www.ulfgruener.de | 2015
start
intro
jump into your story with (i.e.)
info
cliffhanger
• quote
• detail (phot...
Ulf Grüner | www.ulfgruener.de | 2015
start
intro
jump into your story with (i.e.)
info
cliffhanger
• quote
• detail (phot...
Ulf Grüner | www.ulfgruener.de | 2015
start
intro
jump into your story with (i.e.)
info
cliffhanger
• quote
• detail (phot...
Ulf Grüner | www.ulfgruener.de | 2015
start
intro
jump into your story with (i.e.)
info
cliffhanger
• quote
• detail (phot...
Ulf Grüner | www.ulfgruener.de | 2015
story
page 4 etc.
the narrative | storyline
• it‘s a story to scroll – so, use the
t...
Ulf Grüner | www.ulfgruener.de | 2015
story
page 4 etc.
set plot points:
events (i.e. action, quote, observation) that
spi...
Ulf Grüner | www.ulfgruener.de | 2015
story
page 4 etc.
set plot points:
events (i.e. action, quote, observation) that spi...
Ulf Grüner | www.ulfgruener.de | 2015
story
page 4 etc.
do not link outside your story
• show additional material inside
y...
Ulf Grüner | www.ulfgruener.de | 2015
the 2 types of interactivity
the narrative | interactive
it‘s an interactive story –...
Ulf Grüner | www.ulfgruener.de | 2015
the 2 types of interactivity
your audience can only
control the speed of your
story:...
Ulf Grüner | www.ulfgruener.de | 2015
the 2 types of interactivity
your audience can only control the speed of
your story:...
Ulf Grüner | www.ulfgruener.de | 2015
the 2 types of interactivity
the narrative | interactive
23
! make sure these extras...
Ulf Grüner | www.ulfgruener.de | 2015
end
the last page
the narrative | storyline
24
Ulf Grüner | www.ulfgruener.de | 2015
end
the last page
the narrative | storyline
short version
_ offer a quick overview
_...
Ulf Grüner | www.ulfgruener.de | 2015
end
the last page
• link back to 

the most amazing parts of your story
• link to re...
Ulf Grüner | www.ulfgruener.de | 2015
end
the last page
• link back to the most amazing parts of your story
• link to rela...
Ulf Grüner | www.ulfgruener.de | 2015
end
the last page
• link back to the most amazing parts of your story
• link to rela...
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
start:
thrill
29
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
start quickly
your first 3 pages...
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
start:
thrill
story:
depth
31
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
deliver more
indepth reporting
w...
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
start:
thrill
story:
depth
end:
...
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
start quickly
your first 3 pages...
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline
p 1
p 2
last
start:
thrill
story:
depth
end:
...
Ulf Grüner | www.ulfgruener.de | 2015
storyboard example | the narrative | storyline
p 1
p 2
last
36
Ulf Grüner | www.ulfgruener.de | 2015
storyboard | the narrative | storyline | copy template
p 1
p 2
last
37
Ulf Grüner | www.ulfgruener.de | 2015
• SRG: Qualität im Journalismus http://www.srginsider.ch/qualitaet/
• SRF: ikrk.srf....
Ulf Grüner | www.ulfgruener.de | 2015
Software:
http://shorthand.com
http://pageflow.io/
https://www.storehouse.co/
https:...
Ulf Grüner | www.ulfgruener.de | 201540
Thanks for great discussions, feedback and additions:
Jeremy Caplan,
Director of E...
Nächste SlideShare
Wird geladen in …5
×

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

3.503 Aufrufe

Veröffentlicht am

... NEW Version Oct 2015 ...
Please download this document for better reading. It's a small brochure, not a presentation.

Find this guide as eBOOK at https://leanpub.com/one-page-storytelling

- - - - - - - - - - - - - - - -
immersive storytelling:

how to build the most stunning multi-media story:
a small and concise guide to ONE-PAGE-STORYTELLING.
types – storyline – storyboard – examples.
For use with Shorthand.com and other tools or platforms.

A small guide to plan and produce one-page aka parallax storytelling: with links to examples and resources, copy template for storyline and step-by-step instructions.

- - - - - - - - - - - - - -

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)

Veröffentlicht in: Bildung
1 Kommentar
8 Gefällt mir
Statistik
Notizen
  • Hi Ulf, thx for your comprehensive guide! On slide 22 you're talking about call to actions like dialogue, quiz and survey. Do you know good examples of that. And what current software is offering these functionalities embedded?
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
3.503
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
797
Aktionen
Geteilt
0
Downloads
56
Kommentare
1
Gefällt mir
8
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. 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
  2. 2. Ulf Grüner | www.ulfgruener.de | 2015 3 different types 1. one page 2. parallax 3. dossier 2 4. deep
  3. 3. Ulf Grüner | www.ulfgruener.de | 2015 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/
  4. 4. Ulf Grüner | www.ulfgruener.de | 2015 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
  5. 5. Ulf Grüner | www.ulfgruener.de | 2015 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
  6. 6. Ulf Grüner | www.ulfgruener.de | 2015 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
  7. 7. Ulf Grüner | www.ulfgruener.de | 2015 the media | enrich your story • use effects carefully • slow motion • HD video • color splash • stop trick • time-lapse • use interactivity: scroll animation 7
  8. 8. Ulf Grüner | www.ulfgruener.de | 2015 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
  9. 9. Ulf Grüner | www.ulfgruener.de | 2015 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
  10. 10. Ulf Grüner | www.ulfgruener.de | 2015 the narrative | storyline | structure start story end 10
  11. 11. Ulf Grüner | www.ulfgruener.de | 2015 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
  12. 12. Ulf Grüner | www.ulfgruener.de | 2015 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: • surprise your audience • start with close-up, with details • start right in the middle of your story the narrative | storyline 12
  13. 13. Ulf Grüner | www.ulfgruener.de | 2015 start intro jump into your story with (i.e.) 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 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 13
  14. 14. Ulf Grüner | www.ulfgruener.de | 2015 start intro jump into your story with (i.e.) 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) make your readers curious with (i.e.): • quote • first part of a stunning picture • collage • text page 1 page 2 page 3 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 14
  15. 15. Ulf Grüner | www.ulfgruener.de | 2015 start intro jump into your story with (i.e.) 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) 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 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 15
  16. 16. Ulf Grüner | www.ulfgruener.de | 2015 story page 4 etc. the narrative | storyline • 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
  17. 17. Ulf Grüner | www.ulfgruener.de | 2015 story page 4 etc. set plot points: events (i.e. action, quote, observation) that spins your story in a new and/or unexpected direction the narrative | storyline • 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
  18. 18. Ulf Grüner | www.ulfgruener.de | 2015 story page 4 etc. set plot points: events (i.e. action, quote, observation) that spins your story in a new and/or unexpected direction the narrative | storyline • 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 use magic moments: _ quotes, facts, pictures _ catharsis, clearing, aha! 18
  19. 19. Ulf Grüner | www.ulfgruener.de | 2015 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 the narrative | storyline • 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 magic moments: quotes, facts, pictures catharsis, clearing, aha! 19
  20. 20. Ulf Grüner | www.ulfgruener.de | 2015 the 2 types of interactivity the narrative | interactive it‘s an interactive story – use animation parallel to your text and add interactivity: 20
  21. 21. Ulf Grüner | www.ulfgruener.de | 2015 the 2 types of interactivity 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 the narrative | interactive 21
  22. 22. Ulf Grüner | www.ulfgruener.de | 2015 the 2 types of interactivity 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 the narrative | interactive 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. 23. Ulf Grüner | www.ulfgruener.de | 2015 the 2 types of interactivity the narrative | interactive 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
  24. 24. Ulf Grüner | www.ulfgruener.de | 2015 end the last page the narrative | storyline 24
  25. 25. Ulf Grüner | www.ulfgruener.de | 2015 end the last page the narrative | storyline short version _ offer a quick overview _ „this story in 10 seconds“ 25
  26. 26. Ulf Grüner | www.ulfgruener.de | 2015 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 the narrative | storyline short version offer a quick overview, „this story in 10 seconds“ 26
  27. 27. Ulf Grüner | www.ulfgruener.de | 2015 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 the narrative | storyline short version offer a quick overview, „this story in 10 seconds“ 27 offer dialogue: invite to comment invite to talk
  28. 28. Ulf Grüner | www.ulfgruener.de | 2015 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 the narrative | storyline short version offer a quick overview, „this story in 10 seconds“ 28 offer dialogue: invite to comment invite to talk call to action: motivate to share this story
  29. 29. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline p 1 p 2 last start: thrill 29
  30. 30. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline 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
  31. 31. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline p 1 p 2 last start: thrill story: depth 31
  32. 32. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline 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
  33. 33. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline p 1 p 2 last start: thrill story: depth end: action 33
  34. 34. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline 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
  35. 35. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline p 1 p 2 last start: thrill story: depth end: action 35
  36. 36. Ulf Grüner | www.ulfgruener.de | 2015 storyboard example | the narrative | storyline p 1 p 2 last 36
  37. 37. Ulf Grüner | www.ulfgruener.de | 2015 storyboard | the narrative | storyline | copy template p 1 p 2 last 37
  38. 38. Ulf Grüner | www.ulfgruener.de | 2015 • 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
  39. 39. Ulf Grüner | www.ulfgruener.de | 2015 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
  40. 40. Ulf Grüner | www.ulfgruener.de | 201540 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 |

×