How to use storytelling to connect with your audience

Media studies textbooks usually discuss narrative theory as it relates to film. We can also use it on the web, but we need to keep in mind that:

"Narrative theory suggests that stories share certain features, regardless of media and culture. Particular media are able to 'tell' stories in different ways." (Branston and Stafford - The Media Student's Guide.)

This means that while we can learn from the narrative theory of other media, we have to modify it to suit the web. Our goal - engaging an audience with our story - is the same, but we must tailor our stories to suit the media we're telling them with.

Narrative theory

Traditional narrative theory came from studies into folk tales and fairytales. These types of stories are primarily concerned with character function and plot development. We can't just take these and apply them to the web: when would we ever design a website with a clearly defined hero and villain?

What we can take from these stories is how a set of conventions exist for each media. This consistency will help audiences engage with, and understand your story.

For example, if you go to see a disaster movie you probably know enough about that genre to have certain expectations about what will happen. Similarly, many users these days know different types of websites, and so will have a level of expectation about how they will function.

Learning from other media

Narrative is evident in many media including photography, comic strips, and films. We can learn from these to improve our online stories.


Narrative is usually thought of in relation to movies and books. But it is also present in photos. A photo captures a moment of time, but a great photo makes us imagine what happened before the moment was captured, or what happened soon after.

Image credit:

Image credit:

Narrative is signalled here, depending on the content of the photograph. Don't underestimate the power of imagery as a contributor to your story.


The power of film is how much it can communicate at once through visuals, costume, cinematography, dialogue, character function and story.

Films can teach us the art of slowly revealing a story, piece by piece. They can also teach us the value of deciding what to show (and not to show), what adds to the story, and what is simply 'noise'. Like film, the web is really visual storytelling. A great example of visual storytelling in film is the Disney Pixar production, Wall·E. The movie has relatively little dialogue, with emotion conveyed through expressions and gestures.

The Director of Wall·E, Andrew Stanton, knew the story had to be engaging for the film to work without dialogue. He says "action is more generally understood than words. The lift of an eyebrow, however faint, may convey more than a hundred words" (The Art of Wall·E, Tim Hauser).

Online, we don't even have the luxury of expressions and gestures. That means we have to focus on the details. Great storytelling doesn't come from dialogue alone.

The lack of dialogue in silent movies, Wall·E and on the web, forces the creator to tell the story in other ways: through visuals, colour, hierarchy of information, content and so on. As Stanton says, "simplicity and clarity give the visual storyteller room to grow".

On the web we can't just throw in some dialogue to explain everything. It has to be inferred and laid out by carefully choosing:

  • Imagery
  • Tone of voice of the copy
  • Symbols, icons and colours
  • Hierarchy of information
  • Navigation

As you can see, we need to bring together a number of elements to tell stories online. The lack of dialogue is also a limitation of the web as a storytelling medium. We need to consider what the web can do that other media cannot, as it will have a significant impact on our story and how we tell it.

Storytelling constraints online

In many ways the web is an ideal storytelling platform because it's largely concerned with presenting information. But there are some constraints you need to be aware of when storytelling on the web.

Truncated communication

Sometimes the web restricts the amount of information we can give. This, along with it needing to be scannable so users can find the information they need, means we need to tell our stories quickly and efficiently.

Non-linear narrative

There's no guarantee that users will land on your site's homepage. They could land anywhere on your site, which means they may be joining the story partway through. Your site need clear signposts and well-considered navigation to let them know not only where they are, but also where they can move to next (and how they can get there).

You need to decide where your story begins. This will have a profound impact on the story that follows. Thinking back to Little Red Riding Hood, imagine how different the story would be if it began with the wolf eating Little Red Riding Hood.

Communicating the tone of voice

You can achieve tone of voice through the words you choose - informal or formal, full or jargon or easy to read. Even the sentence structure can influence the tone and pace of the voice.

Finding your story

Before you can know what conventions will help you tell your story, you need to know what that story is and, just as important, who it's being told to. Once you understand that, you can start applying the conventions. Who are the characters? What codes will be useful? What will the tone of voice be? Learn from other media, but don't forget to adapt the conventions to suit the online environment.

Words: Robert Mills

This feature is an edited extract of Mills' book A Practical Guide to Designing the Invisible.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.