Grow Your Website

How to Use Storytelling to Create Unforgettable Websites

Cai EllisRobert Brandl

By Cai & Robert

storytelling for your website

It is an ancient form of communication as old as humanity itself, a timeless pastime that remains one of the defining characteristics of every society throughout known history. Before movies, music, books, or even art, our greatest ideas were passed down through the oral tradition of storytelling. The power of a great story cannot be underestimated. A story moves us, inspires us, makes us laugh, cry, cheer, and contemplate its message long after the tale has been told.

Storytelling makes us feel fundamentally human. No matter how far technology platforms advance, we’re drawn to stories.

So it’s no surprise that the marketing industry has now caught on to this eternally effective tool of persuasion. All the top brands today utilize storytelling in their customer outreach, creating ad campaigns that (they hope) will forever stay at the forefront of your consciousness. Every time you turn on the television, radio, or read a product’s packaging, it’s impossible not to be absorbed by a story!

But what about storytelling for websites? As the medium is relatively still in its infancy, many web designers have not yet considered the significance of incorporating storytelling into their work. Every good website, however, should serve as an extension of a business’s brand—and that means harnessing storytelling techniques wherever possible to influence your vital online market. In short: by integrating storytelling within your website, you can maximize user engagement in some very exciting and effective ways.

Why Your Website Should Incorporate Storytelling

Although the most commonly assumed purpose of a narrative is strictly to entertain, storytelling actually serves as an amazing tool for communicating ideas. Complex problems and mundane data can be broken down into more digestible (and exciting) snippets when presented with engaging visuals, a sense of humor, or in a manner that elicits an emotional response. Not only is the message received with greater clarity, but audiences will also retain its meaning for a much longer period of time.

DID YOU KNOW? Psychological studies have shown that people’s attitudes and habits are considerably more affected by a story than from other forms of writing. Being transported into another world leaves audiences emotionally open and susceptible to the storyteller’s induced hypnosis. Hmm….

Think about what the main objective of any website is. In most cases, it’s designed to motivate a user to take some form of action in support of a business. Under the spell of a good story, users let their intellectual guard down and allow themselves to be driven purely by emotion; when this happens, they are more eager to actively participate in the intended experience of a website. There is scientific evidence to back this up: A Princeton study revealed that the brains of both the sender and receiver of a story become synchronized, allowing ideas, thoughts and emotions to be implanted at will. What an opportunity for sliding in a “Buy Now” button!

Storytelling also fosters trust in your brand. Emotionally engaging material builds a relationship with your audience, who will hold you in higher esteem because you’ve spoken to them on a deeper, more meaningful level. A brand that can capture people’s hearts will always reign supreme. Bonus points if you can make them laugh!

The Elements of a Good Story

Firstly, you can’t have a complete story without a beginning, middle, and end. For the purposes we’re concerned with, this essentially means the story behind your website will contain a Setup, some form of Conflict, and a Resolution.

Setup

This is the opening moment when a storyteller leans into his audience and whispers, “Hey, you wanna hear something amazing?”

The setup is where we capture curiosity. In marketing terms, it’s about arousing attention and interest. Give your audience immediately something that challenges the status quo of their lives. Promise them that, if they stay and experience your website, they will walk away with some aspect of their lives being further enriched.

QUICK TIP: Use a Hero Image or Banner to convey important information succinctly and overtly.

Conflict

Without conflict there is no story; otherwise, it’d just be a monotonous listing of events. While conflict is the essential building block of narrative, it functions a bit differently for websites. You don’t necessarily need to ramp up dramatic tension in order to generate revenue, but there is of course opportunity on your website to target your audience’s hopes, dreams and fears—and tailor the experience accordingly. This is the marketing principle of stirring emotional desire for a product or service.

To do this effectively you need to know how to get inside your audience’s head and understand what drives them to action. What sort of language do you use that will compel an accountant’s market to schedule a consultation? How might this language differ for a health and wellness coach? What visuals and color scheme will give the best impression? Above all, how are you going to ensure your users experience an emotional reaction to your story, where the only way to satisfy their desire is by taking direct action through your website? We’ll look at some ways to achieve this in a bit.

Resolution

Every story must lead to an ultimate conclusion, and every step along the way builds to this final moment. It’s up to you to decide what this is for your own website, and then carefully plan every element of your site in support of this climax.

Think of the resolution as your goal. It’s the main driving force behind the existence of your website. Everything leads to a primary course of action: signing up for a newsletter, scheduling an appointment, buying a new product, etc. If all the steps preceding this point were justified and emotionally honest, then the resolution will be both satisfying and inevitable.

QUICK TIP: A Call-to-action button or banner is a popular method for reaching a goal. Usually a simple contact form, appointment scheduler, or direct download, they are often placed at the bottom of a web page or at appropriate break points throughout content when the opportunity calls for it.

More Pieces to the Story

Here are some other common elements that make up a complete and satisfying story:

  • Characters – These could be key people in your business whose personal story influences the overall message of your website, a company mascot, or perhaps you’ve found a way to integrate your audience as a character itself. Either way, the crux of your story must revolve around a persona that an audience can easily identify with, for characters serve as our window into your narrative.
  • Plot – Remember that you’re not just dumping boatloads of information onto your audience. No one will pay attention. Instead, you must find a way to present your message in a way that leads people on a journey. The best plots divulge their secrets only at the last possible moment, keeping their audience in a constant state of anticipation. Apply this same tactic to keep users interested enough to scroll all the way to the bottom of your webpage or scour your entire site to completion.
  • Emotion – What do you want your audience to feel? These are often considered the six basic human emotions: happiness, sadness, fear, anger, surprise or disgust. It’s up to you to decide which of these emotions the story of your website must elicit; when you do, make it a point that every piece of your site works in service of this feeling.
  • Theme – Try thinking of theme as the underlying purpose of your website. Are you out to raise awareness for a certain cause? Maybe you want to prove that high-end clothing can also be affordable? Whereas emotions stir the heart, theme rouses the intellect. The best stories leave us with something to ponder. Wouldn’t it be amazing if a website could do the same?

Storytelling principles - Rule of Three

The copywriting agency Rule of Three appropriately takes users on an immersive storytelling journey using interactive effects and powerful messaging.

Applying Storytelling Principles to Web Design

Now that you know the elements that compose a story, it is time to to apply them in the appropriate places. There are essentially three distinctive areas of web design that make up any site’s artistic value or functionality; your opportunity for telling a story can be found in the site’s content, design or user experience (UX).

Content

The most obvious vessel for storytelling could be found in the site’s text. Here you have direct communication of story by utilizing clever copy that reflects the personality and values of your brand. Every paragraph, headline, button, menu item, and single word is a chance to connect your audience to the message you’re putting out.

Remember that websites differ from books or movies in that someone could pop in at any moment and experience the story out of order. Sticking to a central theme will help ensure a cohesive experience. When all of your blog posts follow an overarching subject, a reader will understand your brand immediately if they’ve stumbled upon a single article through search engine results. By also making every page easily connected to each other, users can navigate the story at will and fill in the pieces as they go.

Design & Visuals

All good storytellers agree that the most effective way to engage an audience is to show, not tell. With research showing that visuals are processed 60,000 times faster than words, a strong design presence on your website is a no-brainer for connecting with your audience.

The look and feel of your website says a lot about your brand. Some of the primary factors in how you can influence perception through aesthetics include:

  • Color – The colors you choose for your brand can powerfully influence your users’ behaviors, mood and psychology. Each color has its own emotional association, so understanding how to choose the right ones for your website can play a significant role in guiding your audience to the resolution/goal of your story. For more in-depth info, read our color psychology article on the subject.
  • Typography – Font selection is one of the simplest and most direct contributions to a website’s character. As roughly 95% of the entire world wide web is text, it’s easy to see why the greatest opportunity for conveying tone and personality is through how that text actually looks. Learn more about choosing your website’s typography.
  • Images – Great images make for great design—crazy, right? While pretty pictures are always nice, what we’re really after is if they support or expand on the site’s content. Do they tell their own story, so that a user can gather everything they need to know about your brand without reading a single word? If you can convey the same thousand words’ worth of content using a single image, then forget the text and go for the image.
  • Video – The same rules above apply here, only video is now the new king in town on the modern web. If the research is to believed, one minute of video equals 1.8 million written words. It is my belief that video is the pinnacle of storytelling, a synthesis of all the other forms combined—and there is definitely demand for it. Get your cameras rolling!
  • Whitespace – You are making strong design choices even in the absence of design. Plentiful areas of whitespace tell their own story. They can break apart or call attention to sections of important content. Whitespace helps direct the eyes and inspire a natural flow from one element to the next. Give your story breathing room or your audience may become fatigued from too much at once.

Storytelling pricinciples - visual interaction example

Bellroy shows through visuals and interaction how their product will significantly slim your wallet. It’s marketing that is both memorable and fun to experience.

User Experience

Every form of storytelling has at least one element to it that belongs exclusively to that medium. For instance, the process of editing a motion picture is unique only to cinema—no other art form allows for storytelling through the cutting and mixing of footage in a sequential order.

User Experience (UX for short) is web design’s own unique form of storytelling.

Modern web technologies allow for some intriguing methods of storytelling—some of them revolutionary, some of them experiential, but all of them exciting. Here are just a handful of ways to apply user experience in service of storytelling:

Interactivity

Employing small interactive flourishes throughout your site goes a long way towards establishing personality and maintaining user interest. It can be little things like how many milliseconds a hover effect should last. It can be more noticeable effects like scroll-based animations, such as an image popping in based on how far a user has scrolled down the page. It can be in-your-face, like popups that appear when a user tries to close the window. The web is full of user interaction, and the potential for its creative implementation is boundless.

Simplifying large data example

Gosquared breaks down large numbers and data on the London Olympic games in a way that is interesting and easily digestible.

Feedback and Signifiers

When you submit a form on a website, it’s nice to know that your time and efforts weren’t in vain. A simple response message that confirms the form was sent successfully is a small gesture that gives peace of mind to users. This is particularly true when monetary exchanges are involved.

Real-time feedback offers a subtle but satisfying call-and-response to storytelling. When a user clicks on an element like a button, it is surprisingly gratifying for the button to respond by swelling, shrinking or changing colors. The extra thought that goes into interactivity like this makes for a more fun story to navigate. Apple is exceptional in this area with iOS.

Feedback signafier example

Slaveryfootprint.org gets a strong message across while also being immensely satisfying to navigate due to real-time feedback and scroll-based animations.

Parallax Scrolling

Parallax scrolling is a popular new tool that allows separate layers of elements to move, interact and change based on a user’s scrolling. It can create a stunning sense of depth to your visuals and a new layer (no pun intended) of immersion all based on a user’s input.

Parallax scrolling can be a powerful aid in storytelling, giving your narrative a quality reminiscent of an interactive comic book. Visual elements and words are heightened to dramatic effect—and it’s also quite addictive to replay their animations by scrolling up and down the page.

Parallax scrolling example

Parallax.js shows a mind boggling example of the potential of parallax scrolling.

Gamification

Like video games, users are actively engaged when they browse the web; their decisions and actions have direct influence on the outcome of the experience. Gamification is a new trend that seeks to make websites or apps more like playing a game. This isn’t necessarily just translating PAC-MAN into HTML5; it’s about deep consideration and implementation in how a user’s actions have a direct cause and effect on your website’s story.

UNICEF and ING Direct devised a brilliant website (unfortunately offline now) that tells the story of a monster who prevents children from attending school in developing nations. At a certain point in the narrative, you are given the choice to make a donation to help these children. The outcome of the story is dependent on what choice you make. It’s a “Choose Your Own Adventure” in website form!

Conclusion

The hot topic in marketing these days is all about employing storytelling to connect with audiences. We’ve seen that “storytelling” can take many forms—and is not limited to solely the traditional hero’s journey of popular literature. With exciting developments in web technology, and rising consumer demand for fresh new ways to ingest content, it is now more important than ever to consider how your website can utilize storytelling to its advantage.

Are you looking to be “just another website”? Or are you hoping to capture your users’ imaginations, lead them on an emotional journey that rouses desire, and then bring them to a satisfying resolution with clear and simple actions to take in support of your business?

To put it another way: Have you ever not enjoyed the experience of a good story? Me neither. If your website can weave a good story, your audience will be forever appreciative.

You might also like7 Must-Know Rules When Writing For The Web

The authors

Learn more about us

Cai Ellis

SEO Manager

Hi! My name is Cai. Over the years, I've used countless hosting providers, built innumerable ecommerce stores and picked up a bit of SEO know-how too. If you've got questions about these or any related subjects, I'll be happy to help!

Robert Brandl

Founder and CEO

Hi, my name is Robert Brandl! I used to work in a digital marketing agency where I managed website and email marketing projects. To optimize my client's campaigns, I always had to find the optimal web tools. Tooltester offers this knowledge to you, hopefully saving you endless hours of research.

Learn more about us

THE BEHIND THE SCENES OF THIS BLOG

This article has been written and researched following a precise methodology.

Our methodology

Comments

website creation ebook cover page

The Step-by-Step Guide to Website Creation

Are you keen to learn the basics before you get started? In our ebook, “Website Creation for Absolute Beginners” we’ll show you the steps you need to take to create your own business website.

Note: We will never share your email address with anyone except our email service provider. Of course, you can unsubscribe at any time.