Everybody loves a story. Stories have always been a powerful mode of communication. So why not use storytelling to deliver your website information in a more engaging, memorable and fun way? It’s no wonder that storytelling became a popular trend in website design, to add drama, humor, real-life flavor and believability to the message.
An immersive experience, a choice of story paths
Storytelling websites tell their story in a user-friendly fashion, using multimedia to create a rich, immersive user experience. As the user scrolls down the page, the website morphs along the way through the use of animations and user interactivity, making the experience visual and exciting. In some sites, the user can choose from a variety of paths through the story using different media, each complementing different aspects of the story without duplication.
Multimedia elements
Multimedia storytelling uses a variety of design and media elements from text – headlines, subheads, captions and call-outs to images – photos, graphics, mascots and illustrations, to infographics, data visualization and tables, timelines and message boards, to virtual tours, video, audio, sliders, slideshows, maps, flyovers and more.
Presenting long-form content differently
Thanks to online ads and the advent of social media, the web is noisy and crowded with banners, news feeds, short tweets and short posts bombarding you every moment. But there are people looking for a deeper, more rounded reader experience. Magazines have found subcompact publishing to be a method of keeping readers interested in reading.
A skilful storywriter tells the reader what the story is about: its highlights and main actors, and gives reasons why she should read it – drama, excitement, humor, or things to learn, among others.
With a storytelling approach, the reader can skim through a long scrolling piece and get an overview of an article by spending just a few seconds on each part of the “story” that unfolds on the web. If the reader finds the experience of skimming through the story outline interesting enough, she may come back and read the piece in detail.
Storytelling websites use multiple design elements
Words, images, infographics, video, slideshows, audio, tables, timelines, maps are all used to deepen the experience of the story.
What do storytelling websites do best?
1. Storytelling websites can present facts in a gripping narrative. The New York Times article Snowfall combines investigative journalism with narrative non-fiction presented with multimedia elements. Snowfall tells the story of an avalanche and professional snowboarders trapped in it, using long-form copy, photo galleries, infographics, audio and video, animation, video, audio, slideshows, personal profiles and maps. The story is laid out in tall single-page sections with parallax background effects. Note the nav bar on top taking you to different parts of the story.
Snowfall set off the “Snowfallen” trend to multimedia journalism, with many others following suit. However, some readers see the interactive elements in this piece as distracting the user from reading the main content rather than enhancing the user experience.
Firestorm, the interactive feature about Tasmanian bushfires was created by The Guardian. This article explains the process behind creating the ‘rich article pages’ in ‘Firestorm’. Interactive elements engage the reader in the article – like audio clips of the people involved, their personal losses, their decision to stay on and rebuild despite the real danger of bushfires recurring.
Tomato Can Blues is the New York Times story of a gun shop robbery and the search for a suspect – a small town cage fighter who faked his own death. The story is illustrated in comic book style with parallax animation, and has an audio version. As the reader scrolls down, call-outs in hand-written text and more parallax animations draw attention to the dramatic progression of the story which is based on police records, witness accounts, photographs and the reporters’ notes.
2. Storytelling websites can build a brand. The My Girls Adidas website uses digital storytelling website design that incorporates video, photo-story and ecommerce elements.
You can meet Adidas users, see Adidas products in real-life environments and buy them online – as a seamless website design. Branding not hard-sell, and the focus is on the story, although the girls wear and demonstrate Adidas products in action. See how one story moves to another, and experience the authentic feel to the whole event, with highlights shared in the user’s own language. The site showcases a young, female, outdoorsy, competitive target audience for Adidas products – girls looking for excellence in their chosen field, enjoying team activities in a spirit of camaraderie. The site encourages users to share their real-life experiences on social media.
Dove played on an insight into women – that a woman doesn’t think highly of her looks. Dove then conducted a social experiment designed to inspire women and raise their self-esteem. “You are more beautiful than you think!” is the message in Dove Real Beauty Sketches. Naturally the rub-off on Dove’s products is a positive one.
3. Storytelling can communicate a complex process in a simple, easy-to-follow way by identifying with the problems of its users and providing a solution. Loggly is a site that offers log management services via the cloud.
The site presents data that supports its claim of being “the world’s most popular log-based cloud management system”. Loggly’s video on this page using illustrations and animation explains the process visually and makes it simple to understand, giving the user good reasons to invest in the Loggly solution. The beaver mascot is engaging and friendly and the free trial at the end of the video provides a call to action.
4. Storytelling can connect people by sharing human experiences. Cowbird is a social network for storytellers, connecting people who share deeply personal stories. Its aim is to build “a library of human experience”, using photos, text and audio.
5. The demo is the story, as illustrated in the website for the new Coin product that substitutes all your credit cards and can be swiped and used to make payments just as you use a card.
As the reader scrolls down the page, the entire message of the ease of use of Coin is delivered through simple text and animation. The video at the top presents the Coin concept and usage in more detail. Text, animation, images and video work synergistically to communicate a new product concept.
Shopify uses success stories of entrepreneurs from everyday life, to demonstrate how simple it is for ordinary, non-technical people to create an e-commerce website and launch a successful web business with the Shopify website building product.
6. The company is the story. The GE Show helps us understand the technologies that are changing our lives – from the innovations in locomotives and railways to healthy hospitals, aircraft, electric vehicles, manufacturing and more.
With interactive games, diagrams, videos and behind-the-scenes look at the technology that makes things tick in,say, a hospital, GE gets across the message that it’s always thinking ahead to serve people better, and uses the latest technology to do this.
The HSBC Global Connections website provides a ‘Business without Borders’ platform to reach out to their target audience of global companies. Licensed content on the site from leading business publications like The Wall Street Journal, The Economist and others, along with guides on specific topics provide global companies with articles of interest in their industry or business segment.
Coca-Cola’s corporate website has become an online newsmagazine where customers engage with the product through promotions and connect on social networks.
Stories from Coke’s rich history to stories about its customers all over the world, to its participation in major events like FIFA World Cup football, to the current fad for selfies, to an article on why tiny houses are a big deal – Coca-Cola’s website has a wide, wide spread of topics to interest just about anyone. Recipes, brands, snapshots from Coca-Cola’s Moments of Happiness promotion, events, videos and lots more make this site fun to visit and explore, while promoting the brand through human-interest stories.
7. The person is the story. Personal websites of designers, photographers, authors, entrepreneurs and creative people can tell the story of their experience in the field.
How to tell a good web design story
Whether you are telling the story of a company, a person, a product, a process or a brand, keep the following in mind:
The Magazine has used a minimal design approach to set off the trend to subcompact publishing – keeping magazine sizes and articles shorter, yet featuring four or five long-form articles per issue, and keeping publishing schedules fluid. Issues of The Magazine download in seconds, compared to the minutes or hours for download of other digital magazines. To put this development in the context of the print newspaper business – the transition from print to digital media means has shrunk newspaper audiences, making the investment in quality long-form journalism too expensive to sustain long-term. The Magazine may prove to be a sustainable digital format for long- form journalism.
Some digital visual storytelling tools to create a storytelling website
Dipity combines micro-blogging and timeline so you can add short or long articles, videos and photos which display in a timeline. This is a good way to document your company’s milestones and events, and share news stories relevant to your industry.
infogr.am helps you build interactive infographics. Infographics shared on Twitter are re-tweeteed more than images and articles.
Projeqt integrates social media, interactive maps and streaming video into a modern presentation.
Storywheel is an Instagram and Soundcloud collaboration. You can upload your Instagram photos into a slideshow and add an audio clip to share a narrated short story. This is a good way to present the story behind a product or app you’ve created.
Meograph is a four-dimensional storytelling platform where you can insert photos, infographs, video, audio, text and interactive maps into a video-like format. The scrollbar for the video doubles as a timeline.
In the mood for storytelling? Let your next web design tell a powerful story!
