A Guide to Storytelling in Web Design: What is Your Story?

Photo by Suzy Hazelwood from Pexels

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.

  1. Good stories are simple
  2. Good stories are emotional
  3. Good stories are truthful and believable
  4. Good stories are real
  5. 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.

Freytag's Pyramid
Image from the Harvard Business Review

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.

1. Images

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

2. Illustrations

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.

Illustration from Evernote

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.

4. Mascots

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.

5. Words

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.

Screenshot of the Camp Cretaceous website
Screenshot from https://www.awwwards.com/websites/storytelling/

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.

6. Personality

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.

Recording of the website

8. Interactivity

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.

10. Video

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 diagram
Image from TNW: https://thenextweb.com/dd/2015/09/02/how-to-design-a-foolproof-website-with-storytelling/.

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

Usability

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

This Post Has 8 Comments

  1. Hi Paige,
    Thanks for sharing! I really enjoyed your blog post and learning about storytelling in the web through various lenses. I liked how you broke down Freytag’s Pyramid and explained each act on the pyramid in terms of what it would look like in web storytelling. I also thought that your use of numbered lists worked really well for this post and kept information organized. I’ve seen websites with parallax scrolling before, but had never heard the term, so I was happy to learn more about it! I appreciated the short video that you included demonstrating parallax scrolling as well as providing a link to the website. It was interesting to see the seven deadly sins of website storytelling compared to someone giving a presentation. Like the Freytag Pyramid example, I liked seeing these connections and thought you explained them well. I was really interested in parallax scrolling, and found a website that outlined the pros and cons of implementing it in a website (https://www.bluleadz.com/blog/what-is-parallax-scrolling). One of the pros was that parallax scrolling can actually help with SEO, as Google favors websites that users spend more time on. It also emphasizes professionalism and creativity, and can gain respect from your users. On the other hand, parallax scrolling doesn’t always translate well to mobile use. It can slow the site down and should not be used for the mobile version of the website. It is also very possible to overdo it and run the risk of hurting your SEO and confusing the user. It was interesting to learn more about these dos and don’ts of parallax scrolling!

  2. Hi Paige! I really enjoyed your blog! The organization of your content is logical and easy to digest. I am familiar with Freytag’s Pyramid, but I am feeling even more informed after reading that section early on in your blog. Something I was not familiar with was the seven deadly sins of storytelling. A common theme I understood from those seven things were that each brand needs their own niche to construct their own thoughtful, purposeful, professional story and story telling strategy. Not every “story” or personality is unique, but the delivery and positioning is what makes story telling successful and captivating for various brands, products, people. I can’t help but think about how I can modify my website to better incorporate storytelling. While my group has the business plan, that does not convey the real story or essence of the bar our website is for. Also incorporating storytelling with usability features is a something to consider. This blog truly inspired these future improvements to my website! The source below shares websites around the world that do an excellent job using storytelling strategies on their website. This is an awesome inspiration resource for making modifications to your own website as well as seeing innovative stylistic designs associated with story telling and usability. You should take a look!
    https://medium.com/toilmoil/examples-of-visual-storytelling-websites-on-the-around-the-world-2fb07f2e058e

  3. Hey Paige! I thought this topic was really interesting, and your blog post did a great job keeping that level of interest for me. I always find myself more engaged with websites that, like you said, make the visitor a part of the story. So many aspects of this class have heightened my website awareness, and I’m now noticing just how important storytelling is, and how effective it can be. I like how you outlined the sins of story telling– the first one caught my attention the most. So many people, or businesses, whether in person or on their website, want to use the first moment they have to get their story, message, plan, etc. out as quickly as possible, but that gets boring and old fairly quickly. Successful story telling reminds me of the show, Shark Tank. While there are the standard introductions, the most successful business pitches have a full set, lay out a scene, and paint a picture for the investors, they don’t just explain their idea. Another interesting trick to use with story telling is to take advantage of what eye-tracking has discovered. In this article: https://www.justinmind.com/blog/guide-to-visual-storytelling-for-ux/. For most people, their eyes tend to track/scan information in patterns that resemble F and Z. Using this knowledge, information can be laid out on a webpage to make it easier for the visitors eye, which is a subtle but effective way to keep them engaged! You should check it out!

  4. Hi Paige! Good job on this week’s blog, I really appreciated how you kept your information very organized through lists of headings in order to explain every part of concepts such as the tips on storytelling in design, the acts in Freytag’s Pyramid related to websites, the 10 ways to incorporate storytelling, the seven deadly sins of storytelling, and all the bullet points added as well. I felt that it was very easy to follow along with the information you were conveying and the descriptions helped to emphasize the points that you and the readings were trying to make. One concept that I found especially intriguing was parallax scrolling. Personally, I find it to be a feature that can make exploring a website more engaging and fun, however I also feel that it is something that could be overwhelming to a user if overdone. I found an article (Best Practices For Parallax Websites | Adobe XD Ideas) that highlights the pros and cons of parallax scrolling and how to best utilize it so that it enhances the user’s experience.

  5. Hi Paige! I really enjoyed reading your blog post this week! I think that this topic is very important and you did a really good job of breaking it down and explaining the topic. I really appreciated the multiple lists that you used for organization and the visuals that you used were very informative. The only thing is that I wished that each item on your list of 10 Ways to incorporate storytelling had visual examples like how you had for ‘Words’ and ‘Illustrations.’ However, this just made me go look for my own examples to connect your points visually in my head so I could get some good storytelling ideas for my own website. I really liked the personality item on the list, I think about us pages are essential for websites and I like how the way that other parts of this list can interact with each other to create personality. Each of the elements do not exist on their own, but the way that the words combine with the images and the interactive elements can make a website have more personality, and also social media helps contributes to the personality of the overall brand identity. One website that I think has really good personality is the website that I analyzed for the usability testing. Even though they are just selling tea, they show their personality through bright colors and cute images to communicate that the personality of the brand is not to soothe like most tea companies. Additionally, the ‘about us’ page does a good job of showing their bright personality and the goals of the brand. I think they are a good example of different elements interacting to create personality. https://www.stashtea.com/pages/about-us

  6. Hi Paige,
    I like how in-depth you went into storytelling on websites. I also appreciated how organized you kept the information, making lists, ordering them, and creating great headings. The video in the center of the article grounded me in the understanding of what good storytelling looks like on a website. Oddly enough, what stood out to me the most was the “throat-clearing” portion of the 7 Deadly Sins of Storytelling. If I were to attempt a good storytelling website, I would not have thought of this crucial point. If the storyteller keeps interrupting themselves in order to explain things, it is hard to stay focussed on the story with all of those distractions. It is like if someone was telling a story out loud and you were engrossed in it, imagining everything, and then he adds in distracting details that don’t matter to the plot. You want the viewer to be hooked. I found this website: https://whocares.bigbump.fr/ which is a very good example of storytelling. It’s very fun to navigate which is saying a lot considering the fact that I am sick of being on my computer so often lately!

  7. Hey Paige!
    You’ve done a really great job with this post. You really drew me in as a reader when using videos, imagery, and even the heading starting with “Seven Deadly Sins”. This is an exaggerated heading that captures the attention of the reader and makes them want to keep reading. This works by association of this phrase. Anyway, I really enjoyed the overall topic of your discussion. I think that it’s important for companies to know when they are not sharing enough or sharing too much. I know it can be difficult because there is a sense of not wanting to brag, but also describe the accomplishments that they have made over time.
    I also enjoyed looking into the ways you can create an immersive storytelling experience. The video you recorded of this fascinating scroll feature really caught my eye. I have seen multiple websites use this feature and it always catches my attention and makes we want to say longer. Here is an article about keeping your users’ attention: https://www.towermarketing.net/blog/winning-the-fight-against-a-website-users-attention-span/

  8. In addition to trying to build a brand, storytelling is also something that eludes me. I would rather write research papers, proposals, argumentative essays, rather than trying to take a reader or user on a journey. However, your simplification of the Freytag’s Pyramid is very useful and valuable. Next, I like your examples of how to execute storytelling. I like the inclusion of the video to explain parallax scrolling. Most importantly, I think my focus needs to lie on what NOT to do. Specifically, I like your comment about how senses can build a brand. How can I show senses, besides visual, on my site? I found this article that goes more in depth about the senses and design. https://www.business2community.com/web-design/boost-online-presence-incorporate-senses-website-01802717 She uses examples such as descriptive language, specific visuals and being mindful about the sounds Incorporated with posts or design. The tone of that sound will convey a lot of information to the user.

Leave a Reply

Close Menu