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

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

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?

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

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

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

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

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