Telling stories on the Web, the hottest way to engage your users

Default avatar.
June 10, 2014
Telling stories on the Web, the hottest way to engage your users.

Storytelling is virtually as old as the human race itself. Ever since human beings could talk, they used storytelling as a way to communicate ideas, lessons and concepts. Web design is all about communicating ideas and concepts, as well, which is why storytelling on the Web is the perfect way to engage users.

As web designers get more creative and look for new ways to enhance the user experience, they’re increasingly turning to storytelling in their designs.

When designers incorporate storytelling into a website, they’re also drawing the user in more efficiently, which makes for a more engrossing experience. Storytelling can take the shape and form of many different devices, and various types of sites are jumping aboard the storytelling trend.

Telling stories with social media

These days, social media and web design are increasingly integrated. Most businesses and publications on the Internet have all of their social media buttons laid out on every page, making shares and publicity easier than ever. Social media encourages users who feel passionately about a brand to connect with the product or service more efficiently than ever.

Social media can become a great way to market by way of storytelling. You can tell the story of your brand to your captive audience of loyal customers/users. Social media relies on any number of ways to tell the story of a brand with passion, purpose and hype.

Take Tommy Hilfiger’s Facebook page. This epitome of classic American prep fashion has more than 8.7 million followers as represented by the likes on the page. This many followers is the instant audience the brand can tell its story to. Hilfiger constantly shares news of its design launches, celebrity partnerships and promotional events with its followers. The brand also uses pictures and videos to make its story more engaging for the community.

Telling stories with images

Sometimes, storytelling can be effectively achieved by the straightforward and unassuming use of images. There’s the old adage about how a picture is worth a thousand words, after all. This makes a lot of sense when you think about it because a picture is easy to absorb, so a message can be communicated very efficiently.

LinkedIn’s sign-up page illustrates this to a tee. First of all, note how little copy there is on the entire page! This is obviously done on purpose to allow the group of pictures of (very diverse) individuals to greet the user of the site.

Just by observing the box of pictures, you can already get a sharp impression of what LinkedIn’s about: it’s really for everyone. The pictures show men and women of various ethnic backgrounds (even if they didn’t include older people) gladly and confidently smiling away due to their LinkedIn experience. Anyone not familiar with the social-networking site immediately understands that people from all across the planet use the site for networking and doing business.

Telling stories with Illustrations

Illustrations or drawings can work the same type of magic that photographs have. They’re also visual helpers that make it easy for the site visitor to understand the story a brand is trying to tell. Illustrations can go in one of two ways: the abstract route or the more realistic route. We’ll look at the latter type.

On the website of Evernote Web Clipper, you’ll notice three blocks of illustrations going from left to right. Yes, the blocks of illustrations are accompanied by handy text at the bottom to help explain how Web Clipper works, but said illustrations bring to life, almost like a storybook, what the user flow will look like.

As a result, no one is left wondering that they can use Web Clipper to collect and access various elements from the Internet whenever they want and from wherever they wish.

Telling stories with copy

It should come as no surprise that the words used in site copy are exceptionally potent at great storytelling. It makes a world of sense when you consider that words are at the heart of great storytelling, and it’s been this way since man first put pen to paper.

A site that exemplifies how copy can be used to tell a captivating story is The Tourist Eye. The Tourist Eye relies on punchy and engaging copy to immediately inform users what they’ll get in return for using its service. Straight to the point, the site copy makes it abundantly clear that you can find a host of ideas and tips for stuff you want to do—on big trips and small getaways alike.

Then, as the user scrolls down the page, the copy walks him through additional features and options that are available. These include the handy and desirable opportunity to create wish lists and a chance to get The Tourist Eye on your mobile phone as an app.

Telling stories with mascots

When it comes to the comical and lovable, mascots have the edge. Companies know that mascots are an easy way to ingratiate themselves with customers, and they also help a brand tell its story in a humorous, accessible and conversational way. Take MailChimp, for instance.

It has a pretty famous mascot by the name of Freddie that does a bang-up job at storytelling by communicating the company’s corporate philosophy. The company espouses a light-hearted and not-to-serious approach to business and life in general, which is easily seen in the depictions of Freddie on everything MailChimp-related.

Whether it’s Freddie just smiling, winking or with a pencil on his ear (and smiling broadly), you know that the brand is communicating its down-to-earth and personable style to users. This mascot can be seen on almost all pages of MailChimp, in one way, shape or form.

Telling stories with parallax

Parallax scrolling’s been around for a few years now, and it's still just about trendy. It is probably the easiest way through which to demonstrate how deadly effective storytelling in web design can be. That’s because the nature of scrolling down a website is just given to revealing more and more layers of information (read: storytelling), almost like peeling the subsequent layers of skin off an onion (minus the tears, of course).

Take the example of The Royal British Legion – Follow the Poppy website. It provides curious site visitors with vital information about how donations to the Royal British Legion are spent—boy, are they ever well spent. Through interesting and vibrant storytelling as you scroll down, you get to see the numerous, helpful services that the Legion provides. This includes helping British military families (complete with specific examples of real families) and career help for those veterans who leave the service to try their hand at something else.

Telling stories with personality

Personality has begun to comprise an ever-more vital element in contemporary web design. It’s especially potent and powerful to help businesses and brands humanize themselves, thus connecting on a more personable level with their site visitors, fans and buyers. All this equates to more people wanting to buy, so greater profits follow, too, naturally.

Personality allows your brand to tell a great story, too. Take the example of Pet Relocation. Under the site’s Team section, all employees are spotlighted, but it’s far from your typical about page! All employees (and some of their dogs, too) are shown smiling widely, but when you hover your cursor on each picture, you get a bonus surprise: a silly/attitude-filled pose from each employee. That tells site visitors how casual and relaxed the corporate culture is at Pet Relocation.


Storytelling has been with the human race since the first, primitive humans were still eating their meat raw and drawing on cave walls. It’s because it’s a powerful and effective way to get things across. It’s no surprise that, at long last, this technique is catching on in the web-design world.

The more that brands and businesses see how appealing this approach is, the more you’ll see site design after site design that incorporates this technique.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…