Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Storytelling techniques for web design

Thursday, October 9th, 2014 by Servage

The Web design world is always in the search of wonderful ways to engage and engross their audiences. Storytelling is the ancient way to do so. Let’s see how it practically becomes effective to achieve our goals for tons of traffic and conversions in this post.

Storytelling on the Web

The art of storytelling has developed with the evolution of the human race. Drawings in caves are clear evidence of the love of human beings towards storytelling and conveying messages in innovative ways. On print, it has limited scopes of expressions, but with web it has innumerable ways to do storytelling in highly effective ways using various tools of computers, smartphones, and tablets.


Before the mobile era, it was easy to go with various ways of storytelling on the web, but now it is a daunting task to craft a story in a responsive design. As far as storytelling techniques are concerned, we have some innovative ways other than texts/copies or images. However, we can’t deny the effectiveness of images in storytelling if you look on the web closely.


The Welcome page of oDesk, LinkedIn, etc. still leave deeper impacts of images stuck in a gallery. Various faces of different humans from different races are indicating its universal acceptability and happy faces depict great satisfactions of the users.


Storytelling with Images But with Personality Flavor

Recently, I have observed that one smart website owner has added some personality flavors in simple human images of their team. Pet Relocation is the name of that website. When you reach them at their my team page, you will find photos of some team members and some dogs/cats.


When you hover your mouse over any image, the real miracle will happen and that image will turn into a meaningful posture of that personality with some describing text. At first glance, it seems very funny, but captures the immediate attention of the visitors and gradually visitors see all images one-by-one with great interest.


Perhaps, this the smartest way I have seen ever on the web to tell the story of the work of the team as well as to deliver website messages in highly effective ways.


Storytelling with Intuitive Illustrations & Mascots

Naturally, the art of illustration is quite common since ancient time to tell stories, but its efficient usage on the web is quite challenging after the Flash era where mobile devices are supporting that great vector art. No problem, standstill vector drawing too can hypnotize the audience, if applied smartly.


The Home page of Evernote Web Clipper is one of the best examples of using realistic illustrations against some abstract drawings on the other websites on the modern web. Evernote has taken the help of illustrations and texts together to tell stories efficiently. Their work flow seems like a real storybook and delivers the core messages of website effectively.


Mascots are more refined form of illustration, but deliver branding messages in superb ways that mere images, copies or illustration cannot do. Freddie, a mascot developed by MailChimp, an email marketing giant, effectively engages its users with its brands/logos. This mascot with a simple smile, winking, and broad smile is leaving a heart touching impression on their users and their personal messages.


Storytelling with Parallax Scrolling

Scrolling is a favorite activity of both desktop and mobile users so latest parallax scrolling makes things easy and engrossing for users. Recently, I have seen the Royal British Legion website with this modern parallax techniques. They have depicted their services and other stories of their success in sumptuous yet engaging manners.
References & More Reading
Telling stories on the Web, the hottest way to engage your users
Royal British Legion
Pet Relocation

Storytelling techniques for web design, 5.0 out of 5 based on 1 rating
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.