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. 001

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. 002

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. 003

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. 004

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. 005

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. 006

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. 007


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 marcschenker​copywriter​.com.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …