Jerry Cao – “Every design tells a story. Every story has a design.”
In order for your website to be effective, it must tell a story, and you may ask why you need to tell a story. The answer to this question comes from Andres Stanton’s greatest commandment, “make me care.” If your website has no story, why would visitor’s care about your website? They wouldn’t, which is why we are going to talk a lot about how you can tell your story through web design.
According to writer and designer Paul Jarvis, there are 5 elements of a good story.
- Good stories are simple
- Good stories are emotional
- Good stories are truthful and believable
- Good stories are real
- Good stories are valid and work for almost any audience
Tips on Storytelling in Design
Now that we know the elements of a good story, we are going to look at some tips and tricks on how to create a story in your own design. Jerry Cao gives us 3 techniques to consider in his article.
1. Every Brand has a Story, What’s Yours?
Start with your story. What is it? What is the story of your brand, restaurant, business, app, etc? This is the first thing you’ll have to figure out. Think about the elements of a story – character, plot, action, emotion. You will need all of these in your story.
2. Storytelling is about Stories, Big and Small
There are two parts to every story, the grand component and the smaller journeys that help you move along the story. In web design, this is the same. The big story is the framework for the website. It is why you have a website in the first place. The small stories help visitors create a course of action as they interact with your design. What is your big story, and what are your small stories that make up the big story?
3. Design the Story
Designing a visual story is a lot like writing a book or play, so treat it the same way. Many books and plays follow Freytag’s Pyramid, and you can do the same.
First create a story arc to help plan the story. The story arc is made up of acts as pictured above. Let’s look at them closer.
- Act 1: This is the visitor’s first impression. You must draw your visitors in, whether it’s with a heading, image, video, etc.
- Act 2: This is the set-up and scene setting. Use small cues that tell the visitors about your company.
- Act 3: Why should visitor’s purchase this product? Why should employers look at you work? What sets your company apart from others? These are key questions to the conflict of your story.
- Act 4 and 5: This is when your visitors are satisfied by what they have found, bought, learned, etc. on your site. You have fulfilled their purpose.
Now that we’ve covered some beginning tips on how you can start thinking about your story, let’s look at ways you can incorporate your story into your design.
10 Ways to Incorporate Storytelling
Good storytelling is important in every web design. According to CX insights, there are 10 different ways to incorporate storytelling into your design.
Images are a great way to wrap your message in a visual story. They are easier to process and remember than text.
Think about what the images are doing for your story. Are they creating context for your company, portraying an emotion, displaying what your brand represents, etc.?
Illustrations are similar to images, except they can be very realistic or more abstract. They can be a more flexible way to tell your story because you can illustrate sequential steps, conditions, or relationships between elements. Let’s take a look at an example.
In this example from Evernote, detailed illustrations and textual explanations are used to tell a story. How can you use illustrations in your design?
3. Background Images
Background images can take on any role you want them to. They are a powerful tool to wrap your entire website in a story. You can create a feeling of depth with them, have them play a more semantic role, or keep them quiet and subtle.
Mascots are a great way to personalize the character of your story. The character either tells the story as an outsider, or takes an active role in the story.
Words are just as powerful as images. Words are anything from the words used in your navigation to the words that make up your content. You want to be consistent in your communication. Let’s look at an example.
What do these words do? They make you want to explore the website. They’re inviting. They create excitement. They are the beginning of a story. This example comes from Awwwards, a website filled with great examples of storytelling in design.
Personality helps you to be real and connect with your site visitors. It can help you tell a story about yourself, your company goals, or products. Think about including an “About Us” web page. This is where personality can shine.
7. Parallax Scrolling
Parallax scrolling allows you to show different layers of you design and have these layers respond differently to the scrolling behaviors of your site visitors. It engages your visitors and can guide them through your story. This can be a very powerful tool because it places the control in the visitors hands.
Take a look at the Niika Agency Portfolio website for what parallax scrolling looks like.
Interactivity can turn your visitors into characters within the story you are telling. This engages your visitors and gets them involved in your story. Are there any areas of your website where visitors have to fill in information about themselves? If so, this is a potential area of interactivity.
9. Social Media
Social media can help you build a loyal community around your brand. The numerous platforms allow companies or even yourself to connect with customers, employers, etc in a casual and informal setting. You can use them on your own portfolio websites or on professional websites.
Videos are a great way to tell you story. You can just video yourself telling your story, but you can also create an informative and fun story around your product, company, etc. They can include customer testimonials about your product or company.
Take a look at Icon Agency’s website, and how they incorporate a video to tell a story of their company.
Now that we have gone over the tips and tricks of storytelling and different ways to incorporate storytelling in your own website, let’s look at the techniques you don’t want to incorporate.
Seven Deadly Sins of Storytelling
According to Ideo, there are seven sins of storytelling or seven things you don’t want to do when telling a story. Some relate directly with website design, and others can be translated into website design.
1. Excessive Throat Clearing
“Throat clearing” is anything like laying out your agenda, defining your terms, introducing yourself, and more. When telling a story, your first 30 seconds are used to grab the audience’s attention.
The first 30 seconds of your website is the top and maybe middle portion of your homepage. When designing your homepage, use something better than “throat clearing” to engage visitors.
2. Professional Boring Mode
“Professional boring mode” is when you replace emotion and feeling with business jargon and data. Don’t do this! Stories rely on emotion. It is what makes stories memorable and engaging.
Your site visitors may not be familiar with the jargon you use within your business. Use words that visitors can understand, otherwise you risk the story you are telling.
3. Reading the Slides
One of the biggest mistakes when telling a story is putting too many words on a slide and then reading them. This doesn’t engage the audience because they can read what you are saying before you say it.
When placing this in terms of web design, it means laying everything out there on the homepage. You want visitors to engage with your website and explore it. Use words and calls to action to push them in the direction they want to go, rather than placing everything on the homepage.
4. Failure to Rehearse
Many ameature storytellers fail to rehearse their story, but every great presenter or storyteller must rehearses their story. As the saying goes “practice make perfect.”
What this means in web design for you may be practicing presenting your story through different formats. Try creating a video. How would the story look delivered through illustrations, images, parallax scrolling, etc? Practice using a technique you haven’t used before.
5. Living in the Abstract Place
Stories run on specifics, and audiences remember detail. While abstract and objective ideas and truths may be interesting, they don’t help visitors remember your story. People engage with stories through their senses.
When designing your website, think about the senses. What do you want your site visitors to feel through your images? What context are you creating? Think about these things when designing your website and story.
6. Not Knowing your Audience
You must know your audience. If you tell the wrong story to the wrong audience then you will lose their attention. This is key in telling a story. The story you want to tell may not be the story your audience wants to hear.
Every website is created for a specific audience. Who is your audience? When telling your story, use words your audience knows. Incorporate images your audience can relate to. These are all key techniques to ensure your audience resonates with your story.
7. The Non-ending Ending
The non-ending ending is when you leave your audience hanging. You don’t want to leave your visitors with unanswered questions by the time they have navigated your site. This is where personas can help. Think about what questions your visitors will have about your company, products, etc. Make sure you answer them all.
We have covered a lot of ground so far, but we have one last thing to talk about because while creating a story, we can not forget about user experience, user interface, and usability.
Connect your Story with UX, UI, and Usability
User experience, user interface, and usability have to tie into your story in order for visitors to be successful on your website. The diagram below looks overwhelming, but let’s take a deeper look at each aspect.
User Experience (UX)
When thinking about your story, you must also think about user experience. Here are a few ways to incorporate storytelling while also thinking about user experience.
- Incorporate perfectly-timed surprises that visually engage the user
- Use an emotional design for experiences users remember longer
- Incorporate gamification that encourages visitors to become the main character of your story
User Interface (UI)
Not only do you have to think about user experience, but also user interface. Here are some techniques to use to create a better user interface within your story.
- Use color to create the emotion you want visitors to have
- Incorporate plenty of negative space to separate elements and focus visitors’ attention on the content
- Use a highly readable typography
- Find or create great photos, animations, videos or other imagery that is engaging
To tie everything together, you must ensure your website is usable for everyone. If it is not usable, the story you want to tell will not reach your entire audience. Here are some ways to ensure your story and website is usable for all.
- Create a simple navigation that allows visitors to move between the three acts of your story
- Use a responsive and adaptive design so that you communicate the same story across all devices
- Create a simple information architecture so that visitors navigate easily