5 Ways To Incorporate Storytelling Into Your Website Design and Copy

by 4 08/31/2012

We all love a good story.

Our lives are filled with millions of stories- historical and factual, mythological and fantastical, personal and public, long and short. Stories are how we make sense of the world around us, gain knowledge and insights, get inspired and situate our own existence in the overwhelming narrative around us. Stories are engaging, enveloping and entertaining.

And through my personal experience, I’ve often found that the best designers and copywriters are the ones that tell the best stories in their work.

Here are 5 lessons from powerful storytelling that can help you create great design and high-conversion copy:

1. Know your audience

Popular British children’s author Enid Blyton once responded to scathing criticism with a quip that still rings true: she wasn’t interested in the critique of anyone over 12. So for anyone who looks down upon Comic Sans, there is a segment of the audience that it still works for.

In pursuit of superior aesthetic or fulfilling personal ideas of what “should be,” designers often forget their target audience is. Keeping your audience’s preferences, attitudes, tendencies and desires in mind is crucial to creating effective user interfaces that combine tailored design with targeted copy.

The Babba Co. landing page assimilates itself to its target audience- parents of children aged 3 to 5- by using lots of visuals of happy children and parents, and by asking for their child’s name and gender, a personal touch that will immediately form a connection with a parent.

2. Set the mood and scene with details

A great storyteller knows that the authenticity of any work is in the details.

The richer your descriptions, the more convincing you will be. On a related note, the best lies are always the ones that are the most detailed. Good storytellers know when to reveal searing truths and go for gritty realism, and when to create fiction. But whether the story you’re telling is a true account or a tall tale, the only way you will engage your audience is if you’ve worked extensively on your scene setting.

Providing rich descriptions is an essential part of making any story believable to your reader. In design, this translates to paying meticulous attention to your artwork and the user experience you are creating: Does your design manage to convey the objective? Does it do a good job of establishing context? Is your copy coming across as believable and honest? Are the elements on your website streamlined and coherent?

One way that designers can easily lend purpose to their creations is through the use of Skeuomorphism. Skeuomorphism- the design practice of making digital elements look like their real life counterparts- can be a great tool for establishing the mood, purpose and sense of your digital interfaces.

Apple’s iBookstore is a definitive example of Skeuomorphism.

Ideo Labs uses images of paper stacks and post-its to create a realistic journal feel.

3. Make sure you have a hook

Remember reading books that you just couldn’t put down? You stuck around because you just had to know what happens at the end.

Thinking about elements that build curiosity and anticipation is also part of the process behind great storytelling through design and copy.

Just as the right hook can make or break a story, the first impression created by your visual design or the first few words of your copy can make or break your website. Most great authors start with an irresistible hook and then maintain readers’ engagement with tight narratives that keep them glued to the book.

When designing landing pages, the objective is the same: capture the attention of your visitors and get them interested enough to stick around on your website.

The Emailography landing page has a sub headline that is not only clear about the website’s purpose but also targets the potential customer directly.

Manpacks grabs your attention with a curious hero shot and the headline, ‘Part-time Girlfriend?’ Tell me that doesn’t get your attention.

Clearvale uses nothing but an enticing signboard to make their visitors curious. It works wonderfully.

4. Use the right action words

One of America’s most beloved short story authors, Flannery O’ Connor, taught me something that will stay with me forever. In her famous short story ‘A Good Man Is Hard to Find’, O’ Connor uses the word ‘rattling’- instead of the conventional ‘shaking’- to sterling effect.

Even though the meaning conveyed remains virtually the same, the particular word choice makes a world of difference. By using action words- words that leap out of the page and conjure images in our heads, you can communicate with your customers with a language that is much richer than plain text.

Shall I Buy is not only a distinctive and action-filled name for a business, but it also has a sense of urgency that would not have been present in a generic alternative like ‘product recommendations’ for instance.

5. Make stories sharable

From Facebook’s Timeline to the hundreds of digital scrapbooking sites, it’s apparent that the modern user wants to share their lives.

Instead of being passive observers, we want to play an active part in crafting our stories. The success of social networking is built around the simple fact that we want to create our own stories.  We establish narratives by both creating content of our own and sharing others.

If your website lets your users personalize their experience and tell their story, you are leveraging the power of story.

The entire concept behind popular website Proust is letting users share and build their personal stories.

This list of similarities between storytelling and great user interfaces is in no way exhaustive.

There are innumerable ways in which you can design better websites and landing pages by thinking of them as stories. Your user interface is like a narrative and, whether you’re a designer or a copywriter, your happy ending depends on how well you tell a story with visuals and words.

How do you incorporate story into your copy and design?  Let us know in the comments.

Print Friendly

About 

Babar Suleman is a visual storyteller and a communication planner. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer in creating meaningful user experiences and effective branding strategies.

You can contact Babar at his official website or on the social media channels below.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

4 COMMENTS

Meagan Dahl

I agree 111% with your insights! Any online marketing/branding endeavor requires a good storyteller to be successful, and being that storyteller is a rewarding (and sometimes stressful) job. I was recently hired by a digital strategy firm to be their brand evangelist. I had no idea what that meant, but in the interview I told them one thing: I am a storyteller. I don’t do SEO, I don’t know search tactics, I’m not even a trained marketer, but I know social media and I can tell a dang good story. They were smart/crazy enough to hire me because they believe storytelling is the foundation of the strategy behind brand building.

August 31, 2012 Reply

    Russ Henneberry

    Very cool Meagan! Thanks for sharing that! Cheers to good storytelling!

    September 4, 2012 Reply

Sylvain Gauchet

Another awesome post, thanks for the tips. Man I just love that blog.

I have to experiment with action words. That book about words that sell is still waiting to be read..

September 2, 2012 Reply

    Russ Henneberry

    Hi Sylvain. Words That Sell is more of a reference book like a dictionary or a thesaurus. But it does help to browse through it when you first get it to get an idea of how it works.

    September 4, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>