Oct 24 2012

30 Compelling Examples of Visual Storytelling on the Web


Storytelling is a powerful approach that can, when done right, compel users to convert more effectively than what any amount of optimization, crazy visual callouts, or awesome interactive elements can do otherwise. Much like how we expect to see a moral at the end of a book, we expect to find a purpose at the end of a site with a storytelling experience. When the path to the “moral of the story” (or conversion point, to be more specific) is laid out clearly in front of our users’ eyes, the rest of the work lies simply in convincing them that the purpose is really worth grabbing on to… which is great since with storytelling, a user is normally in the mindset of learning more about what the story has to offer. So take a look at the examples below and experience how their visual storytelling compels you to continue scrolling down their pages!

1. MoMA Century of the Child

2. Analysing London 2012 (https://www.gosquared.com/london2012)

3. Believe in 2012 (http://www.soleilnoir.net/believein)

4. Defend the Internet (http://defendtheinter.net)

5. Inception Explained (http://www.inception-explained.com)

6. Tinke (http://www.zensorium.com/tinke/index.html)

7. Slimming Your Wallet (http://us.bellroy.com/pages/slim-your-wallet)

8. Rule of Three (http://rule-of-three.co.uk)

9. Summer Under the Stars (http://www.tcm.com/summer/)

10. Startups, This is How Design Works (http://startupsthisishowdesignworks.com/)

11. The Hybrid Graphic Novel (http://graphicnovel-hybrid4.peugeot.com/start.html)

12. Single (http://singlecard.co.uk/)

13. Think Green Meeting (http://thinkgreenmeeting.com)

14. Jenny and Grayden (http://www.jennyandgrayden.com/)

15. La Moulade (http://lamoulade.com/#!/home)

16. Bagigia (http://www.bagigia.com)

17. Well Done Team GB (http://www.welldoneteamgb.com)

18. You Waste a Lot of Time at Work (http://www.atlassian.com/time-wasting-at-work-infographic)

19. Mangrove (http://www.mangrove.com/en)

20. These Are Things (http://www.thesearethings.com)

21. 2011 Annual Report (http://www.fordfoundation.org/2011-annual)

22. Dangers of Fracking (http://www.dangersoffracking.com)

23. Babel the King (http://babeltheking.com/eng)

24. The UK Energy Consumption Guide (http://www.evoenergy.co.uk/uk-energy-guide)

25. Lapka (http://mylapka.com)

26. Slavery Footprint (http://slaveryfootprint.org)

27. Talent Garden (http://www.talentgarden.it/en/#!/home)

28. inTacto 10 Years (http://www.intacto10years.com/index_start.php)

29. The Future of Car Sharing (http://futureofcarsharing.com)

30. Reverend Danger (http://www.reverenddanger.com)

The end! Know any other fantastic story telling websites we missed? Let us know in the comments below!

About the Author:

Jessica Moon is an Art Director at digital-telepathy, a user experience design studio that specializes in creating products like SlideDeck, Impress, and Filament. She has a passion for illustration and design, and enjoys blogging and tweeting about what she’s learned. You can also find her on Google+.

Leave a Response

11 Responses

  1. Oct 26 2012
    James Gill

    Thanks very much for mentioning GoSquared, Jessica! Some great examples here :-)

  2. Oct 26 2012
  3. Oct 30 2012

    Great site i found many answers here thanks for ll the storyes special thanks to ms. Jesica Moon

  4. Dec 04 2012

    Brilliant selection! Love them all. I’m subscribed to almost all of them, except these few I didn’t know about. Thanks for posting.

  5. Pingback: 30 compelling examples of visual storytelling on the web [Moon]

  6. Dec 12 2012

    Wow, great examples here, Jessica. My daily inspiration has now been filled! Thanks!

  7. Pingback: How a Brand Shares Its Culture through Visual Storytelling | Superhype

  8. Jan 22 2014
    Michael Gough

    Great article to revisit a year on! Especially with the growth in this immersive user experience. You only have to look at what the New York Times has been doing to see the development that has happened over the last twelve months or so. (http://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/)

    I also think there is something about the actually act of scrolling that helps to build on the story telling too. The visitor feels in control of the narrative and time their investing in the way watching a video doesn’t.

    We’re starting out in this area and founding it a great way to engage our visitors on our site. (http://www.sparks-studio.com/blog/141/2013/12/how-to-improve-your-rankings-on-google-/?upgrade)

    Love to know what you think.