How Designing a Website is Like Storytelling

by on 06/30/10 at 8:40 pm

When you’re planning to design a website, where do you start? There are so many pieces involved that thinking about all them at once can be quite overwhelming. Just like with any other monumental task the best way is to take it step-by-step. In this article, I’m going to show you how you can use the elements of storytelling to plan out your website. Each element of storytelling relates to an element of user experience. The elements of storytelling will help you remember what to think about before you design, so that you can plan for a successful user experience.

1)  Plot : Goal

Every story has a plot that ties the events of a story together. Quite similarly, every user experience has a set of GOALS that tie the website together. Just like when writing a story you need a plot, when designing a website you need a goal. At this point, you should think about what you want the website to do for users.

Think about:

  • What the ideal situation is, from the start of the interaction to the end. How do they become a better person from when they started using your website to when they finish using your website?
  • What value or benefits will they get from using your website? How will they get these benefits your website provides? Is the process and flow smooth and efficient?

2)  Characters : Users

What kind of story would you have without your characters? You can’t write a good story without understanding your characters, just like you can’t design a good website without understanding your user. Your users will either love, like or hate your website. Their satisfaction is dependent on the degree to which you understand and design for their needs and behaviors.

Think about:

  • What knowledge do users already have before they use your website. What are they already accustomed to? What is their pre-conceived mental model of your website?
  • What is the user’s mental state before, during and after they use your website? What are they thinking, feeling and wanting during each step of their flow?
  • What are their behaviors when they use a website like yours? Do they have any habits or tendencies you should be aware of and accommodate for?

3)  Setting : Context

What good is a plot and its characters without a setting to offer a sense of time and place. Just like how a story’s setting can affect how the audience perceives the plot and characters, the CONTEXT of a website can affect how users perceive and use the website. Where and when people use your website can decide how they use it.

Think about:

  • What is happening in their environment when they use your website. What pressures or constraints do they face?
  • What other things are they doing in their environment that might affect the way they use your website?

3)  Mood : Colors, Effects & Imagery

The mood of a story can be determined by the music, lighting and style of prose. All of these provide an emotional tone to the story that resonates with the audience. In order for your website to resonate with your audience, your website needs to have an emotional appeal derived from its COLORS, EFFECTS & IMAGERY.

Think about:

  • What colors best suit your brand and the type of content your website holds.
  • What effects could you use to spice up your website and make it more vibrant and alive (ie. gradients, shadows, animated transitions)?
  • What images or icons can you use that represent your website’s content?

4)  Movement : Functionality

Last but not least, all good stories have movement, where the sequence and flow of events progress and develop. Similarly, a good website will have good functionality, where the flow of events for the user never stalls, but always progresses. Be wary of any clunky or sluggish movements your website might have.

Think about:

  • What are the best technologies available for your website.
  • What are the common causes of poor functionality and how can you prevent it?


5)  Invisibility

This is an element of both storytelling and user experience. In storytelling, the audience’s awareness of the storyteller fades as the audience slips deeper into engagement. The same thing should happen when people use your website. When users are engaged in your content, the existence of the medium will be forgotten. This is why it’s important to not only have quality content, but to avoid over-embellished designs that distract from the content.

Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

Leave a Comment