Have you noticed that these days every brand has a story and every designer is a "storyteller"? Storytelling is the buzzword of our days. From marketing experts to motivational speakers, everyone tries to entertain and engage people with a story they want to share, retell, or participate in. What it may look as a new trend, actually is as old as the humankind: storytelling is the primary way we absorb, manage, store, access and communicate information, as well as connect with others. In a world overloaded of messages and products, the interest in this discipline has grown fast and stories are seen as a way to engage in some sort of decision-making or action in order to create a resolution. However, building a powerful and memorable story on the web is not easy: it is no about how a medium can help you to communicate your stories but it is about how you can incorporate storytelling in your medium in order to communicate your messages more effectively. In this talk, following the three-act structure that Aristotle came up with over two thousand years ago (beginning, middle and end), I will introduce some important elements that all stories have – characters, plot, action, emotion – and how we can connect them to leverage all aspects of web design into one beautiful visual story that compels your users to continue scrolling down their pages!

1. How to Create Powerful
Visual Storytelling on the Web
CHIARA ALIOTTA, UNTIL SUNDAY

2. Who in the world am I?
Ah, that's the great puzzle.

3. 3:55
MIN
OH DEAR! OH DEAR! I SHALL BE TOO LATE!

4. 3:55
MIN
OH DEAR! OH DEAR! I SHALL BE TOO LATE!

5. THE
Narrative Voice

6. STEVE JOBS CHRIS DO
RONALDMCDONAL
D

7. StorytellingON THE WEB
DRINK ME
01
02
03
04
CHARACTERS
PLOT
ACTIONS
EMOTIONS

8. CHARACTERS
Play a big role in the story.
Well developed personality.
Know your users well.
01

9. ROLES
Protagonists and users
are part of the narration.
Their personalities need
to be well developed.
Know your users well
before you plan your story.
THE PROTAGONISTS THE USERS

10. PLOT
All plots have a beginning,
middle and end.
Plot is not linear.
Develop the “wait and see”.
02

11. LINEAR PLOT
BEGINNING
In a story the plot dictates
the order the main events progress.
END
MIDDLE
01
02
03

12. LINEAR PLOT
BEGINNING END
MIDDLE
01
02
03
non-linear
The beauty of creating storytelling
on the web is the unpredictability.

13. YOUR STORY ENDS HERE...
...with a boring form to fill,
but an amazing surprise for you!
Name and Surname*
Email*
How did you hear about us? *
SEND
GRAND FINALE
Mario Rossi
mariorossi@email.com
at J and Beyond 2018

14. GRAND FINALE
Mario Rossi
mariorossi@email.com

15. ACTIONS
Assist the user during
the navigation of the website.
Interact with the user
on different levels.
DRINK ME
03

16. PLOT TWIST
Developing the unexpected.
EAT ME
ALICE IN WONDERLAND
CINDERELLAMERLIN

17. ACTIONS
The web gives us the chance
to interact with the user on different levels.
VISUAL LEVEL
The way the information
is presented.
The way the information
is connected.
CONTENT LEVEL

18. EMOTIONS
Create a good story
to stimulate the brain.
Entice the user to want to know
‘What happens next?’
04

19. YOUR TOOLS
You can use different elements
to create a good story.
Images and videos
Real brand experiences Authentic testimonials
Change the perspective

20. EXAMPLES OF
Good Storytelling

21. Elements used
Real protagonists.
Video, images, music.
Challenges.
FAFSWAGVOGUE

22. Elements used
Real stories.
Superb combination
of words, images and music.
Video.
IN MY WORLD

23. Elements used
Imaginary characters.
Sounds and
narrative voice.
Humour.
PLAY DOH

24. TELL A GOOD STORY…
… and take your next web project to another level.
FOCUS TEACH
ENGAGE
INSPIRE

25. Begin at the beginning
and go on
till you come to the end:
then stop.
The King of Hearts, Alice’s Adventures in Wonderland
Lewis Carroll

26. THANK YOU!
@ChiaraAliotta