The Big Picture: When Design meets Storytelling

storytelling in design

Not every visual story has to be interactive! Repeat it after us: Your visual story does not have to be interactive to be effective!

Your story, however, must be engaging.

Engaging visual storytelling is a powerful approach that can, when done right, compel users to convert more effectively than any other element of optimization. But that doesn’t imply your site to be filled with crazy visual callouts or is way too minimalistic.

It’s all about making your story as apt as it needs to be: no more, no less. If your story can be told with a single image, don’t use twenty. But if it does require twenty visuals to work well, then don’t try to sum it up in ten.

In this article, we’ll explain you the 3 approaches for creating an interactive story.

#1. Spin your story around your users

One of the easiest ways to directly engross your user is to make them a character. They immediately become invested in what you’re telling them when they get to see themselves in a new role.

The Slavery Footprint can perfectly teach you how to engage your customers with your design.

storytelling in design

But what makes it more compelling is the way the website uses a guided questionnaire to make their users feel at home. They make the information they’re presenting pivot around the user which makes it directly about them, rather than just some general, faceless person.

storytelling in design

#2. Sunny side up: Give your site an “Easter Egg” effect

Who doesn’t love Easter Egg?

The joy of discoverability can be one of the most memorable experiences for users. One great example of a website using this tactic well is The Museum of Mario. The site showcases the evolution of the Super Mario and related video games.

Storytelling in design

Different areas on different screens are designed to perform a variety of actions, mimicking gameplay and revealing information about characters and games. But the one thing to notice is that The Museum of Mario still gives you an option to experience the whole history of the game without ever using the hidden click feature.

Why? Because when designing for a better user experience, it all comes down to the USER.

Before you design anything, know your users inside and out. Be sure that they actually understand and enjoy this kind of playful interaction. Prioritize the tasks. Actions that are critical for user goals must be explicitly visible, while those that are sporadic can afford to be less visible or even hidden.

#3. Make your website respond

Adding visuals that respond to user actions is another way to make your design speak for itself. From simple animation to static gifs, make these visual reactions triggered by clicking, scrolling or a more complex action like a form submission.

Take the Babel app for one great example. As you scroll down, Babel – the title cat character seemingly falls from the sky, tumbling on the way down. Stop scrolling, and the cat rights itself, holding onto an umbrella.

storytelling in design

A simple yet interesting way to keep you intrigued, isn’t it?


Engaging design isn’t an ornamental branch of web design – It is the core that allows the users to become part of your story, which makes them more of a participant than a passive observer.

Make your visual story as simple or complex as it needs to be to get the job done. Don’t add interactive elements just for the sake of adding them and consider carefully those that you do add to ensure they add value to the end user, rather than just being there to “impress”.

For more tips on designing better websites through storytelling, stay tuned to the 42Works’ blog.


About Neelabha Mahajan

A programmer with writing as passion. She love shoes, nail paints and everything Harry Potter. A recently turned social butterfly, she swears by storytelling in her content. When not searching for the latest marketing stories or shopping for shoes, she likes to paint. Her big dream is to have her own venture and to figure out the mystery of a perfectly winged eye-liner.

Read More from Neelabha Mahajan

Leave a Reply:

  1. DaveJr says:

    A new dimension in Design. Nice viewpoint. Please write something more about the same. Would love to know more!


Leave a Comment:

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Word on the street

We Love Listening to You

With whom do we have the pleasure of speaking?

Pleasure to meet you, . What business are you from?

How can we help you?

What’s on your mind? Tell us a bit about your project.

Have a current website or reference link?

Any estimate on the budget for your project/campaign?

Great, Where shall we email you?

And how about your phone number?

How did you find us?