Get Our Free Ebook
Beginners Guide to HTML

  Web Design Design Principles Why Storytelling in Web Design Is so Crazy-Effective

Why Storytelling in Web Design Is so Crazy-Effective

Storytelling in web design is becoming a trend that's catching fire more and more. Partly ushered in by various parallax-scrolling sites that use the angle like nobody's business, storytelling in web design can be a creative and effective way of engrossing your site visitors while telling them about your products and services. This approach sure beats the dry and impersonable approach of some websites in the past.

Storytelling has been with the human race since the very beginning, when early man was just learning about fire. It's no surprise that this cultural aspect has migrated to the Internet, where, in the 21st century, so much of the world gets its information.

In the realm of web design, storytelling is not just limited to text although typography does make up the vast majority of web-design applications. Storytelling can take on various forms in web design, with visual storytelling being as effective, too.

Using Text to Tell a Story: Campaign Monitor

Perhaps the most effective way of telling your site visitors a story about your brand is still the old-fashioned way of using text. After all, as much as a whopping 95% of web design is typography. This means that the written word can still be the most useful way of getting your brand's story across.

Take a site like Campaign Monitor, which is the site for a popular, email-marketing software. Going old-school, the company educates its site visitors about what it's all about through its "Our Story" page. There, you can read all about Campaign Monitor's history, its business philosophy and how it provides a solution for its clients. If you want to know more about "about" pages, read our great guide to them.

Using Visuals to Tell a Story: Airbnb

On the other side of the spectrum is the school of thought that uses visuals for web storytelling. This is the far simpler way of storytelling since it does away with that pesky thing called reading and replaces it with nice-to-look-at pictures.

It's necessary to point out that visuals don't entirely replace text, but they complement text to be the main star. Images are a powerful method of storytelling since people are visual creatures, and images can be more easily absorbed than digesting text.

Airbnb, a San Francisco-based marketplace for booking interesting accommodations all over the planet, invites you onto its homepage with detailed and impressive background images. In fact, you obtain a new one for every new travel destination you select. Talk about letting the pictures do the talking.

Using Animation to Tell a Story: Google Email

Everyone knows that animation can tell a story, as it's been a medium used for ages to convey themes, messages and entertainment. Leave it to Google, only the most popular web company in the whole, wide world, to come up with something simple though interesting to tell a story.

While Google's not hawking a product or service like our two previous examples, its "Story of Send" qualifies as a textbook example of using animation to explain something of value to site visitors. In this case, the company teaches you about just what happens when you click the "send" button in Gmail...only it uses child-friendly animation to convey the specific journey of an email from outbox to inbox.

Using Video to Tell a Story: Droplet App Website

In this day and age of parallax-scrolling radicalism and other nifty ways of web storytelling, we mustn't forget the old favorite of video to tell a story. It can be just as effective, and the website for the Droplet app makes this crystal clear.

In the video for the Droplet app, site visitors are taken on an excursion through the city of London. They see common issues that people may have when it comes to paying for certain different things, and they also see the various ways in which the Droplet app helps them solve said problems! It is marketing and effective storytelling all rolled up into one, pithy video that informs and entertains.

Clocking in at just under two minutes in length, it also won't take up too much of your sweet time.

Using Audio to Tell a Story: Dumb Ways to Die Website

Public service announcements need to make a comeback! Sometimes, you just have to scare people by talking truth to them in the bluntest of ways if you want to stop society from going down a downhill slide due to dumb and self-destructive misbehavior.

Metro Trains in Australia understands this all too well, which is why it came up with a public service-announcement campaign in the form of the Dumb Ways to Die website. The site encourages people to mind their rail safety, and it accomplishes this by utilizing song and a music video, to boot. Overall, it's an entertaining, interactive website. Hey, if you're trying to preach to the public about what they should be doing for their own good, sometimes it helps to package it up as entertainment, so people don't even realize they're being social-engineered!

Web Design and Storytelling Go Well Together

It almost seems that websites and storytelling were made for each other, based on the above examples. As web design has grown more sophisticated, so have the techniques used to sell products and services or simply provide information about different concepts. One of these techniques is the storytelling approach that's gotten more traction lately.

As you can see, storytelling in web design has been crazy-effective. Do you agree or disagree? Tell us all about your deepest, darkest thoughts on the subject in the comments section!


Marc Schenker

Marc Schenker is a freelance writer, blogger and editor who's written on web design, conversion, photography and entertainment. You can find out more about him on

subscribe to newsletter