2012_storytelling_featured2 Design

10 Ways To Incorporate Storytelling In Web Design

Stories have always been a powerful tool to entertain, educate, and to teach people moral values. Back in the days when there was no mass media, stories were passed on from person to person, from generation to generation. Later, they were written down, duplicated, and easily accessible to the masses.

Now, in the age of the Internet, it is time to turn things around. It’s no longer about how a medium can help us to pass on our stories. It’s about how stories can help us get the most out of this new medium.

Jonathan Gottschall describes storytelling as the Ultimate Weapon. He explains how stories can function as Trojan Horses: “The audience accepts the story because, for a human, a good story always seems like a gift. But the story is actually just a delivery system for the teller’s agenda. A story is a trick for sneaking a message into the fortified citadel of the human mind.”

So, obviously, stories are a very powerful tool of communicating a message. Storytelling helps us to engage people and make them listen and accept what we have to say. Let’s take a look at 10 different ways how to incorporate storytelling in your web design in order to communicate your messages more effectively.

Images

Let’s start with images. Images are a great way to wrap your message in a visual story. People prefer images over text because visual information is much easier to process and remember than text, or even numbers. Very likely, you want something from your website visitors, not the other way around. So don’t ask too much of them. Instead, make their visit on your site as pleasant and convenient as possible. That means, if you can wrap essential information into images, do it.


Images are a great way to wrap your message in a visual story.

For example, Dove uses lots of images of selfconfident, happy women. These images are chosen very carefully to communicate their main value propositions: soft skin and a natural, healthy feeling. Even without reading any text, without knowing the exact context, these images tell a story about the brand Dove — it’s products, their effects, and who uses them. Check out the results of our demo case to see for yourself the emotional effect that images have on us.

Illustrations

Illustrations have all the visual advantages that photos have, too. However, they can either be very realistic, or rather abstract. Illustrations can also be collages, combining different aspects of a message. That’s why illustrations might even be a more flexible way to tell your story. You can illustrate sequential steps, conditions, or other relationships between different elements.


Illustrations can combine different elements of a story.

Evernote uses very detailed illustrations to explain how their product works. The way the three blocks of illustration and text are arranged leave no doubt that the visitor is supposed to read them from left to right. Both the illustrations and the textual explanations tell us a story about Evernote: Different elements from the web can be gathered and accessed anytime, from anywhere.

Background images

Another, also very effective way to tell stories on your website are large background images. These large visuals have the advantage that they can take in any role that you want them to. They can stay quiet and subtle in the background, creating a certain sphere based on their color, focus, and motive. They can also add a feeling of depth to your design, being blurry in some parts and focussed in others. Or, they can be very clear and central, taking in a semantic role for your design. In any case, background images are a powerful tool to wrap your entire website in a story.


Background images are a powerful tool to wrap your entire website in a story.

In this example, the website of Square uses a large background image to tell a story about their product: The square reader allows you to accept credit cards anywhere. Even though the image is partly blurry, it shows the square reader in action on a busy weekly market. This doesn’t only explain how to put the product to work, but also demonstrates its flexibility. For the user, this is probably the fastest and most convenient way to explain the idea behind Square.

Mascots

One element of a traditional story is the character. This character either tells the story as an outsider, or he takes in an active role within the story. Mascots are a great way to personalize the character of a story. The story becomes more personal and more authentic. Mascots can either take in the role of the narrator, or actively participate in the story.


*Mascots can personalize the character of a story. *

Axure shows us how mascots can help you to tell a story. Their little UX Man appears on multiple pages, offering additional information in a funny and engaging way. On their homepage, the UX Man is the main character of a little story, explaining the advantages of user experience design in a very humorous way.

Words

Let’s take a step away from visual approach to storytelling. Words are just as powerful. And I’m not talking about long, textual stories that people can read for their own benefits. I’m talking about any words you show on your website, from your navigation menu to the content you offer, to the text on your call to action button. Every single word contributes to the story you tell to your visitors. Only if you have thought that story through in detail, you can be consistent in your communication.


Every single word on your website contributes to the story you tell to your visitors.

The site Tourist Eye is a great example of how the entire copy on your site works together to tell your story. Their tone of voice is self confident, maybe even a little presumptuous, but at the same time extremely simple and user-focussed. The way they present their own product, and also how they engage with their visitors is very consistent and authentic. On every page, the copy is to the point and addresses the visitor directly. Browsing through the site is almost like engaging with an actual person. Their words become a story that helps us connect with the company, and the product.


The right design can make your words even more powerful.

Sallee design shows how well words and design can work together to tell as story. Design your words effectively to guide your visitors’ line of sight and draw them in. Invite them to listen to your story and to enter your site.

Personality

Personality has become an increasingly important aspect of modern web design. It helps you to be real and connect with your site visitors. This relationship can make all the difference when people choose between different services or websites. Personality can also help you to tell a story about yourself, your company goals, or your products. Stories that are told in person, or at least if we get a clear picture, of who is telling the story, become much more authentic and trustworthy.


*Personality can help you to tell a story about yourself, your company goals, or your products. *

The team behind Fancy Rhino shows how personality helps them to tell an authentic story about themselves. The team is presented with funny and likable images, and at the same time they use very personal copywriting to introduce each person. For example, Drew is described as follows: “At times we wonder if Drew is actually human, or if he is entirely composed of dreams, ambitions, and wild creativity. The word impossible has no place in his lexicon. For Drew, storytelling is King. It’s the blood pumping in his veins, and the blood pumping through the Rhino too.” The consistency of creative design, imagery, and copywriting tells a very vivid story of who these people are: a group of likeable professionals, who are committed to their work.

Parallax scrolling

Here is a rather new approach to storytelling in web design: parallax scrolling. This new technique allows you to show different layers of a design and have these layers respond differently to the scrolling behaviour of your site visitors. It creates a sense of depth, allowing for multiple simultaneous effects, controlled by the visitor. Engage your visitors, draw them in, and guide them through your story. The interactive nature of this parallax scrolling effect is very powerful, because it puts the visitor in charge.


*Parallax scrolling allows you to guide your visitors through a story with multiple layers. *

The Japanese site of the Nissan Note demonstrates perfectly how powerful a story told with parallax scrolling can be. Even if I couldn’t read any of the text, I scrolled down all the way to the bottom of the page, just to see what would happen. What happened was that I was told a very convincing story about a car for the entire family.

Interactivity

Parallax scrolling requires the user to interact with a website in order to get to the end of the story. This can turn your visitor into the narrator of your story. However, there are also other ways to engage your visitors by getting them involved. Make them part of the story you want to tell, for example by making them a character.


Engage your visitors by making them part of the story you want to tell.

On the site Slavery Footprint you can find out how many slaves work for you. The interactive survey tells us a story about slavery and educates us about the affects our personal lifestyle have on slavery. The fact that you have to fill in personal information about yourself and that the results also reflect your very own connection with slavery, make you part of the story. I think this is a great way to call attention to this delicate topic.

Social media

Social media is becoming an increasingly popular marketing tool for many businesses. The personal nature of these platforms allows brands to connect with their customers in a casual and informal setting. Social media can help you to build a loyal community around your brand. This community becomes an audience for your story. Make sure you tell a story that is worth listening to. A story that is rich in meaning and community spirit. You can use anything like discussions, images, events, or free giveaways to tell your story.


Social media communities are a grateful audience for your story.

Starbucks does a great job in storytelling via social media. For example, Starbucks has more than 32m Facebook followers, which they listen to and engage with on their timeline. Also, they share lots of photos, videos, and events about their products, production methods, and their brand values. Starbucks is also using other platforms, such as Pinterest to tell the story about their company within a personal and fun environment.

Video

Last but not least, you can use videos to tell stories on the web. Of course, you could sit down behind a camera and just tell your story. You can also build a story around your product and make an informative and fun video of it. Decide if you want to tell the story yourself, or let someone else tell it for you, for example by showing customer testimonials. A lot of companies today have chosen for a video to tell a story about their product or service.


Videos are a fun and convenient way to tell your story.

For example, Loggy has built a great story around their product. A rather abstract topic becomes concrete and easy to follow. Instead of having to read through a bunch of boring information, you can just lean back and watch this fun video to find out what Loggy does.

Final thoughts

There you have it. 10 different ways how to incorporate storytelling in your web design. Which one best suits your own site and audience is up to you. Just keep in mind that people love stories. We are much more likely to listen to and remember a good story, rather than some boring facts that might even be troublesome to gather.

According to the filmmaker Andrew Stanton (Toy Story, WALL-E), “any good story should give you a promise that it will lead somewhere that’s worth your time”. Watch his presentation on the clues to a great story to find out more about his guidelines on storytelling.

Have you incorporated storytelling in your web design? What do you think makes a good story? Let us know what you think in the comments below.

2 comments

  1. HoangLeAnh

    Your article very interesting, I will share them with everyone: D

  2. Digital

    Simple yet powerful! And because i like all visual stuff i liked all methods mentioned here ;)

    p.s. you have broken link to Slavery Footprint webpage

Leave a Reply

Your email address will not be published. Required fields are marked *