LearnStorytelling on the web

Treehouse
writes on December 11, 2009

We live in a world saturated with stories, then one day along came the web and suddenly anyone could design, write for and contribute to a mass of websites, and storytelling got lost in the mix.

This needn’t be the case though. Storytelling is the most powerful way of organising and communicating information so it lends itself nicely to the web, we just have to think of more appropriate ways of telling stories online and this can be achieved in several ways.

Know your story and your audience

story_diagram

Don’t assume you know your audience. Invest the time in finding out who is visiting your site and what their goals will be. Once you know this you can think about the story you want your site to tell.

For a small design studio for example, it might be the story of how the company came to exist and the work they do and the people they do it for. Every business has a story to tell.

When you are clear about the audience and story you will be able to tell it in the most appropriate way.

Vital to any project is thinking about the story at the beginning, it is too late when you reach the end or when design visuals are signed off, the story should be part of the process from conception to implementation.

The words you use and how you use them

Once you know your audience and story you can then convey this literally in the words you use. There doesn’t have to be a strict narrative but consideration to the actual words, the tone of voice and accounting for any cultural, political, or social factors will help with your storytelling.

However, with the web we often have to be succinct in our copy and tone of voice can be misinterpreted or hard to convey so the second strand to storytelling on the web is the design itself. For designers they have a story to show as well as one to tell.

Designing the story

Branding

If you have a brand or are developing one as part of your project then it can help tell the story. Key to branding are business goals and how they wish to be represented.

brands

Typefaces, logos and colours communicate all of this, and at the heart of it all are the brand values.

Typography

Typography is also an invisible communicator. Different typefaces connote different meanings and values.

20071119_mastheads

You only have to look offline at the mastheads of newspapers to see how their typefaces are representative of the type of reader.

Colour

Colour is an extremely powerful communication tool. Colours can have cultural, political and social meanings behind them and the moods and qualities that they connote can help tell your story.

If you are writing a case study relating to a project you did for a local farm shop for example, then colours linked to nature such as green and brown would help in your storytelling.

Ed: For more on how colour can communicate meaning read Rob’s article from October 2009

Signposting

Signposting is an article in itself but having signposts throughout your site that will help the user navigate and achieve their goal, is all part of telling your story.

It is important that your user knows where they are (the present), where they have come from (the past) and where they are or can move to next (the future). These three tenses are also linked to the old adage that every story has a beginning, middle, and an end.

Imagery

Imagery, when used in the right way, can tell far more than many words. If you choose the right image and put it in the right context then this can enhance your story.

Storytelling

Storytelling is the best way to emotionally connect to people. We all have stories in common so instead of listing facts and figures on your website, tell the story behind them. Instead of listing projects and clients, tell the story behind them.

An advantage to storytelling on the web is that because of the interactive possibilities and the fact that user’s can enter your story at different intervals, you don’t need a linear narrative, you can get creative, and that is after all one thing that both stories and the web needs, creativity.

A complex weave

If we think of all the individual elements discussed above as the thread, when we weave them all together we end up with the story. There are more strands to this than my word limit will allow me to mention so if you have your own storytelling process or ideas then please share them in the comments below.

43 Responses to “Storytelling on the web”

  1. Thanks for this great post really :))

  2. Stories catch our attention in a way plain text can’t. They draw us in and keep us hooked.

  3. Stories catch our attention in a way plain text can’t. They draw us in and keep us hooked.

  4. Thank you very much nice work 😉

  5. Great article. the key is knowing your audience and speaking with them in a language that they understand.

    logbook loans

  6. This tutorial helps me to be better in developing the site, thanks for sharing …

  7. Your blog is really good. This is true that the we can share our daily stories by writing a blog on the internet.

  8. Every brand is only as strong as the stories that people tell about you. And every act of marketing can be crafted and delivered.Thanks for share the information.Thankyou.
    workers comp
    car insurance mission viejo
    non profit insurance

  9. really great article and some important facts too, thanks for sharing 🙂

  10. Nice article to prove your point on how important it is to be creative online and by using visuals elements to tell creative stories that can add value to your message.

  11. nice one of teh first articles I have taken teh time to read on this particular website – and have to agree with some of teh earlier posters I was a little surprised at how brief and simple it is just a minor critique – nice site ill be back anyway

    ta

  12. Great article some interesting points here.

  13. Great article. The steps you provided are really such of big help. You have to impress your audience, likewise entertain them so that they will always find the time to connect on you.

  14. Superb article! Very interesting!…

  15. Nice post very interesting..

  16. I love your illustration pictures that showing as how to understand the audience with our media. Thanks for your meaningful post.

  17. Hi Rob –

    That’s an awesome post! I especially love your graphic about the perceived story versus the conceived story. This is the rub of meaning and interpretation that is king in this new age of communications. And one good reason why storytelling is the medium we should all be studying and applying. Every brand is only as strong as the stories that people tell about you. And every act of marketing can be crafted and delivered

    I’ve published a storytelling manifesto for change-makers, your readers might be interested in – its called Believe Me: Why Your Vision, Brand, and Leadership Need a Bigger Story. People can get excerpt at http://www.believemethebook.com, and later this week, I’ll be releasing a free digital download copy of the entire manifesto, as part of a global campaign to make 2010: The Year of the Bigger Story.

    Maybe you’d like to take part? it’s really easy to help spread the concept, and simply involves connecting your own thought leadership to the theme of bigger storytelling (something you’re already doing). Email me if you’d like to discuss this further.

  18. Storytelling on the web is important – it’s more of an art than a science, and you can’t really only learn it by studying what others do because then you’re just copying other blogs / web content managers. You need to try and work out content on your own in your own voice, because that’s what really makes you a great blogger!

  19. Useful article. Well broken out for the designer mind to grasp. Thank you.

  20. the article is nice more please

  21. Thanks for sharing this article.I just loved it.

  22. Brian Jones on December 14, 2009 at 1:24 pm said:

    Well put – nice article. Thank you for sharing…

  23. hi.. you may need this in your wedding day.. save the dates card for your wedding

  24. is this for real?

  25. Rob,

    I came across your post about story telling via smashingmagazine.com.

    This was a nicely written piece. It should certainly help all of us to think about who will read what we publish. Breaking things down into parts: message, audience, presentation, etc. seems quite effective.I liked the diagram early on showing the process of the author conceiving an idea and the audience member interpreting the information.

    Thanks for the thought provoking ideas!

  26. Good article, so inspiring!

  27. Thanks for the storytelling article!

  28. I hope I’m not being unfairly critical when I raise the following questions; I was excited to see a Carsonified article on the narrative aspect of web design, and was left disappointed upon reading it. Here goes:

    ~ In regards to your first point, for which audience was *this* intended? While I have found articles here to be easy to digest, they still provide thoughtful, well-researched information. This comes off as more of a Web 101 primer. I’d wager many Carsonified readers already know that, say, colors communicate emotion or that “different typefaces connote different meanings and values”.

    ~ Why gloss over so many basics rather than nail the main point? If I understood you correctly, the crux of the article was delivered here:

    “Storytelling is the best way to emotionally connect to people. We all have stories in common so instead of listing facts and figures on your website, tell the story behind them. Instead of listing projects and clients, tell the story behind them.”

    Unfortunately, this clear, concise paragraph is only made available after wading through saws like “the right image .. can enhance your story” and a table of logos informing us that they “communicate .. brand values” without offering any insight into *how* they accomplish this (or their application to storytelling).

    Lastly..
    ~ Why not apply your own suggestion – provide us with YOUR story and enthrall us while convincing us of the technique’s strengths? Instead of serving up a pu pu platter of well-worn web maxims, why not provide tips and tricks specific to storytelling?

    Asserting that stories are told through the combination of multiple media isn’t really groundbreaking, but giving in-depth coverage to the ways in which that’s accomplished would be.

    As such, a statement like “if we take all the individual elements .. when we weave them all together we end up with the story” is simply incorrect – many, if not most, websites utilize all the aforementioned elements, but use them poorly and don’t communicate a story.

    Simply having branding, typography, color, images and so on won’t tell a story – orchestrating a design with informed and considered decisions is what brings it to life.

    Some insight into THAT process would have made for a great piece.

    • Wow, you really put a bit of time and thought in to that one!

      Well done on a content rich reply. The way stories are told are so varied they are becoming far more clouded on the internet let alone the way the media use them as leverage

    • Completely agree. This article is so basic there is almost no point to it. If you take the time to actually study current thinking on narrative psychology you will find that narrative (storytelling) runs so deep in the human psyche it underpins our interactions with the world.

      The most important thing to understand is the concept of ‘qualia’ or ‘what it is like’ i.e what is is like for other people to experience something – which is very important to storytelling. This allows a designer to attempt to get inside the minds of users and to design from their perspective, which is very necessary if you want good UX.

      There is currently very little about narrative and design on the web. There is a new book by Rosenfeld media (not yet released) and an interesting article on the boxes and arrows site all of which can be reached through an article I wrote about narrative theory and design

      http://danlewisjames.com/resources/using-narrative-theory-for-compelling-designs/

      Apologies for the shameful plug, but my article contains a little more depth into the psychology of narrative.

  29. Stories catch our attention in a way plain text can’t. They draw us in and keep us hooked.

  30. hi.. you may need this in your wedding day.. save the dates card for your wedding

  31. Great article Rob,

    I think storytelling is super powerful and its amazing how few people spend time on it.

    This post will help us do a better job of telling stories, especially when we launch version 2.0.

    Cheers!

    • Robert Mills on December 14, 2009 at 8:52 am said:

      Hi Scott,

      Thanks for the comment. Glad you found the subject interesting.

      It’s quite a complex topic so hopefully the article acts as an overview and will be helpful for people.

      Cheers

      Rob.

  32. Thanks for this article, I love it!
    Rain-Water Tank

  33. I told a story a few years ago that made the rounds about a water buffalo gift. Philip Greenspun and I worked together to donate a gift to a family in need in China. I shot it, would love to hear what you thought about it. You can google water buffalo movie (not the youtube link, it got corrupted at 2 minutes…). Thanks!

  34. Nice, during our time my grandmother doing this story telling
    Rain-Water Recycling

  35. Annemarie on December 11, 2009 at 2:14 pm said:

    This was fantastic, having majored in English, I am very appreciative!

    Before going back to school, I advised clients on their WSYWIG websites. According to a clients and coworkers, the best piece of advice I ever gave was, ‘It’s not about you’….

    Too many of my clients had content and design that wasn’t user friendly,alienating and tacky. On the flip side it was very sweet to see how much they wanted share what they did and how eager they were to prove themselves to their clients . I likened website design like going to a bar or dating; he/she shouldn’t be ‘that’ person (too much cologne, skimpy outfits, calling every 10 minutes, trying too hard).

    Currently I am a web design student perfecting my craft (I savor all things web related and want to better myself) and hope to get my M.A in Technical Communication

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more