Overview
In this Monday Masterclass, we examine some great examples of sites that manage to nail storytelling in web design.
Using storytelling in your websites, you’ll be able to:
✔︎ Captivate your visitors and increase dwell time
✔︎ Increase your conversions and improve your CTA
✔︎ Offer a more streamlined user experience
✔︎ Tell your client’s story better
The elements of storytelling we are going to cover include the message, emotion, characters, opening scene, story development and call to action. Each element helps with establishing a well-structured website with a clear storyline.
Transcript
books movies commercials songs all rely
on creating a captivating story and a
website is no different although not all
websites tell a story in this tutorial
we’re going to review three sites that
provide great examples of storytelling
through web design now storytelling in
websites is nothing like storytelling in
film or TV you can’t exactly scroll
through a whole episode of Grey’s
Anatomy but while some of you wish that
they could do that there are in fact
some similarities we’ll be analysing
each of these three websites according
to our web design storytelling criteria
the message the main idea that the
website is trying to convey to the
visitor or to borrow storytelling lingo
the moral of the story the emotion the
way that we drive that message to the
audience through happiness fear
nostalgia etc this is something that
will become apparent as we explore our
own examples the characters these are
the main figures the stars of the page
in many cases as we will see the main
character the hero is in fact the user
now when it comes to the structure of
our story we begin with the opening
scene our intro it pulls in the audience
it entices them to stay to continue
reading and it should have a hook that
also hints at what is going to come in
the following sections the opening scene
may present a problem or perhaps a
solution from here on our story develops
and expands upon our opening scene
eventually there is a call to action
which we act upon why because we’re
hooked so let’s examine those websites
and find out how we can harness this
form of storytelling in our own websites
our first website is one that we’ve
actually featured in one of our
showcases it’s a website for camp nap
camp a youth camp in northern Spain now
some of you may recognize that this site
was built using Elementor and that the
language of this site is Catalan
but before we have Google translated I’d
like to go over its design and examine
the way that the visual elements manage
to convey the story to the visitor
regardless of whether or not we
understand the text so straight away we
sent a clear and specific emotion this
site is related to something playful
youthful happy sporty energetic and fun
the splashes and scribbles have kind of
give us that feeling that kids could
have contributed to this design and they
were having so much fun doing it now
notice the reoccurring colors like the
teal or turquoise and the orange or
terracotta that creates a sort of motif
that teases us to follow it down the
page and join in the fun now let’s
activate Google’s translate option so
that we can appreciate how the text
itself is designed to tell us a story
imagine a place we’ll have to forgive
Google there Katalin isn’t what it used
to be imagine a place where children
boys and girls spend their day playing
outdoors dressing up singing and dancing
and laughing non-stop we can already
appreciate the fairy tale like opening
scene and the way it grabs our attention
and interest this is typical of sites
with a great storytelling structure they
rely on well-known storytelling
conventions like a great opening line to
motivate us in urges to read on and find
out more for me here arm the story
develops further expanding adding
information and building up to reach a
crescendo here
this place is NAT cam the design wants
us to reach the unquestionable
conclusion that I will find all of these
things that I’m interested in at this
place now beyond the high point of our
story we ease into more details about
the youth camp the characters of this
particular story are of course the
children who have had a wonderful time
as well as those who are promised this
wonderful experience in the future there
may also be some elements of nostalgia
for the adult visitors revisiting
memories of themselves when they were
younger and going to a summer camp
perhaps then hoping that their children
will enjoy a similar wonderful
experience here finally we have the call
to action an invitation to join the camp
and perhaps live happily ever after by
declaring I want to come so the
conclusion that we would make having
reviewed the site’s story is that its
overall message directed at kids aged 6
to 17 years old is this if there is one
place that can almost guarantee the
wonderful experiences of nature
activities and friendship that place is
camp NAT cam the next site that we’ll be
looking at this time in Dutch is a
one-page website for expose a nonprofit
organization dedicated to fighting human
trafficking and expose the heart
behind the prostitution industry in the
Netherlands this here is part of a
campaign to criminalize the purchase of
sexual services which to date has
collected the signatures of more than
50,000 supporters again this site has
been featured in our monthly showcase
because of its wonderful use of
Elemental widgets and the various motion
effects like the scrolling sticky and
entrance effects to create the
interactive timeline which we’ll be
looking at okay let’s activate Google’s
translate option to find out what this
text means in English
as you can see Google’s Dutch is as
rusty as its Catalan so this translation
is also a bit off at the top of the page
we have our opening scene in movies we
would call it the establishing shot the
designer is setting the scene and the
tone the feeling that something is
sinister something is seedy and shady
this is what we called the emotion that
feeling that the designer awakens in the
viewer by using certain conventions of
composition and color deliberately
pulling at those strings to invoke a
particular feeling in us to affect the
way that we perceive and interpret the
information that the site is presenting
and all this is to drive the viewer to
convince them to eventually commit to an
action here there’s a dark Amsterdam
skyline and in the foreground a facade
of a building familiar to the red-light
district the neon sign flashing it been
in bottle bar I am priceless
perhaps we noticed that there’s
something wrong lurking behind the
scenes we scroll down to discover that
the facade is in fact a vending machine
using the same symbolic colors selling
something as priceless as a human being
as a cheap commodity this is the first
part of our story arc Act one we have a
setting a situation and a problem and
suddenly there’s action this print out
receipt appears
it’s clearly printed on used crumpled
paper the receipt documents the outcome
of purchasing sexual services the
reality of people forced to work in the
industry we’re now in the second part of
our story arc things are going from bad
to worse and continue that way in a
snowball effect
suddenly it’s shredded thrown away and
turned into money that continues to fund
immoral activities and still were drawn
downwards as things get worse till we
find there’s a solution a better way
where we can help the victims and stop
human trafficking making it illegal and
putting the money to good use and how we
can take action now to make this happen
share a video donate or follow the site
this is the end of the second act and
the beginning of the third it’s the cusp
on the last part of the story arc
notice how the tone has slowly turned
from dark to light there is hope there
is a solution if we take action the
right action this story will have a good
or happy ending the characters of this
story are clearly the people who are
being forced into the industry there is
powerful use of emotion that makes us
feel that having been made aware of
these facts we – a part of this story
here the viewer is the classic hero on
the journey and having witnessed this
terrible injustice throughout act 2
knowing that there is a solution at the
beginning of act 3 this is what the
designer has led us up to and where they
leave us at the place where we must
decide if we are going to take action
and save the day the next site is a
different example of storytelling
through design till now we’ve seen
concepts and ideas conveyed through
story mechanics what we have here is an
actual story a true and troubling story
told through great use of the mechanics
of the design elements themselves the
page was published earlier this year by
the Norwegian newspaper Verdeans gang or
VG for short and it’s the story of the
investigation
of the tinder swindler an unscrupulous
man who has seduced and swindled young
women out of millions the format is
episodic ‘l you might see the parts as
chapters in a book or episodes of a TV
series indeed a very familiar and
convenient format which when used online
offers a unique reading experience just
as with photojournalism or graphic
novels the designers have gone to a lot
of effort
choosing the right visual for each
episode or scene as well as keeping the
text to a minimum each line carefully
crafted to keep us in suspense for what
happens next
clearly this isn’t the kind of typical
page designed to promote businesses
products or services which is why we can
expect it to convey a different sort of
message and call for a different kind of
action however the classic story arc is
still apparent in act 1 we have the
setting the storyteller introduces us to
the tinder swindler a catchy nickname
for the criminal who is unfortunately
named Simon l’viv we are also introduced
to Cecile one of his victims the emotion
is the same form of suspense we are
familiar with from TV crime drama or
documentaries at the beginning of the
story things are good
then things become bad really fast and
throughout act 2 they get progressively
worse each of these episodes a clever
use of a series of video clips and
animated gifs draws us in and hooks us
very quickly by the end of act 2 we’re
dying to know does this guy get captured
is there going to be a happy ending the
message here is clear to generate
awareness of the tinder swindler and his
crimes and the call to action which is
less direct asks that visitors keep
their eyes open for this criminal who is
still at large somewhere in the world I
should also mention that all this really
stands out when viewed on a mobile
screen where each image or video takes
up the whole space of the screen with
the text appearing above it which is
probably why we find
that this new and innovative website
reminded us of a graphic novel
as an extra bonus we thought that we
would add an extra website to review
according to everything we’ve been
discussing up until now last but not
least we’ll look at an example that is
probably more familiar to you to show
you how storytelling can be used in
another way right off the bat the scene
opens and it’s very stylized very
dramatic probably drawing on our
experience of Agatha Christie murder
mysteries it’s trying to create a
similar emotion we’re drawn to the
attributes the odd accessories that each
character has what do they say about
that person what does it all mean
unlike the primary engagement that gets
the viewer to scroll down that we saw in
the other examples here there’s a clear
mental engagement we’re trying to solve
a puzzle
what is this site all about what is it
trying to tell me it’s a great opening
it gives us the impression that this
agency has a unique style and that
they’re adventurous and avant-garde this
alone gets the intrigued visitor to
continue scrolling down where we’ll find
a series of portraits some are stills
some animated but each one is an essay
about the person in the portrait they
give us an idea of their sense of humor
what styles they like some are more
eccentric than others I mean look at
this one with the pineapple it’s
introducing us to a wonderfully eclectic
cast of characters as we progress down
the page we get a peek into what life is
like at this office we learn the inn
jokes and catch up with the cool stuff
that goes on throughout the day this is
something that a TV sitcom does very
well it establishes the fact that
there’s a great chemistry among a
colorful group of people and having
shared some intimate details about
they’re in a circle they invite you to
join them and be a part of this
wonderful lifestyle personally I am a
sucker for things like this so as soon
as I see this simple straightforward
call-to-action
Who am I kidding of course I’m gonna
click on it to find out more we’ve seen
examples of different ways to use straw
are you telling in web design we also
saw how each website built its own
storyline with the fundamental elements
of message emotion characters an opening
scene the story development and a call
to action I hope that you enjoyed this
masterclass and we’ll implement
storytelling in your next project I hope
to see you again next week till then as
always we’d appreciate any comments
insight and criticism that you may have
and obviously any helpful tips that
could help other users after all our
goal is to be the best at helping others
excel at their craft make sure you never
miss another episode by clicking on the
subscribe button and tap that bell
thanks for watching
