“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton).
 
This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website!
 
What does it mean actually?
 
It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible.
 
Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user.
 
Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike.
 
OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message?
 
First, you answer to this 3 major questions:
 
  • Who is your audience?
  • What goals have you set up for your brand?
  • Which is the message you want to convey?
 
Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling:
 
 
CONTENT     IMPACTFUL IMAGERY   INTERACTIVITY
 
 
Then, you take a close look at our 10 design principles for incorporating storytelling into your web design:
 

1. Let the Images Tell Your Story
 

Face it: people would always “assimilate” images way better than long, text-stuffed content!
 
Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that.
 
After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand.
 
It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds. 
 
In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship.
 

2. Tell It Through Words, Powerful Words

 

And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book).
 
Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself.
 
Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right).
 
It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance.
 
Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power!
 
Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product. 
 

3. Put a Face on Your Storyteller(s)

 
In other words “breath” some personality and authenticity into your website! Breath some “life” into its design.
 
It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”.
 
In other words: let your team tell your company's story. They're the ones that know it better!
 
Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness).
 

4. Instead of “Telling” Your Story, How About “Illustrating” It?

 
Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images!
 
The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images.
 
Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used).
 
They're far more dynamic than images, so consider them turning into your storytellers!
 

5. Tell It Through a Video

 
Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think?
 
Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile.
 
You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video).
 
And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website. 
 
To be continued, with our other 5 tips in our next post! 

Recommended Stories

Bringing Gutenberg to Drupal: A Modern Admin UI, a Better Editing Experience in Drupal 8
It's a robust, flexible and admin feature-packed CMS, there's no point in denying it. And yet: Drupal (still)… (Read more)
Adriana Cacoveanu / Aug 17 '2018
How to Get Gatsby to Work with Drupal: Building a Gatsby Site with a Decoupled Drupal Back-End
Just imagine: putting together the powerful UI creation tools of a static site generator — more of a modern front-… (Read more)
RADU SIMILEANU / Aug 13 '2018
3 Essential Steps to Convert Your Website to a Progressive Web App
Thinking to convert your website to a progressive web app? And why shouldn't you? Since the benefits are obvious… (Read more)
Silviu Serdaru / Jul 24 '2018