Visual Storytelling on the Web

Designers face many challenges when creating for the modern web. When embarking on a new project, we bounce around words like style, layout, mark-up, usability, visibility, and the flow of content. These elements are crucial to a cohesive online presence, and overlooking any of them would be a mistake. In our process, we sit down and conceptualize solutions that embody all these traits, but yet it's easy to overlook a key element of design: storytelling.The art of telling stories has evolved quite a bit since the dawn of humanity. The oral traditions of folk legends made way for the printing press, allowing stories to travel far and wide, and allowing artists to mix words with images to further convey their thoughts, ideas, and experiences. In the modern world, storytelling is an integral part of our lives -- from the daily papers and fiction paperbacks that we read to the clever advertisements between our favorite television shows. Good storytelling has the ability to transcend mediums, help people relate to a theme, and (most important for us designers) cohesively intertwine content and presentation.

Weaving a Tale Online

So how does good storytelling relate to good web design? In its essence, the web is a platform for communication. Unlike other forms of visible communication, the web has the gift and the curse of being a medium in which content can grow and change on a whim. It's our responsibility as designers to create solutions that can transcend this problem while still maintaining the theme, upholding its correct messaging, and applying an intuitive visual structure.

So how do we do that?

I’d like to break this question down into three separate chapters; message, tone, and voice. Each is uniquely important on its own, but together they make up the trifecta of online storytelling sauce. Tasty.

Defining a Message

Message is more than just marketing jargon. Creating a strong, constant visual flow to a site can make or break the aesthetics of the user’s experience. I’m defining site message as the act of choosing key ideas and visual elements that will drive the overall goals of what you’d like the user to take away after they’ve navigated on to somewhere else on the inter-web. We can even say, loosely, that the site message is the “moral” of our story. Every aspect of the design -- from the icons, typography, photography, and interaction -- should be carefully and consciously selected to help to support the thread of the story, which leads us to the tone of the site.

Setting the Tone

While message is all about the main aspects of a site, the tone you set is all about the back-story. Creating visual cues that help to draw the viewer into your site is almost as important as the site’s overall message. Grabbing the user’s interest quickly is critical to keeping them on the site. We wouldn’t want to have a great story to tell, only to have our audience bail out before we had a chance to open our mouths. Proper planning though the use of moodboards and a creative definition can really help to set the tone early in the game. It’s then just a matter of extending that concept and staying true to our initial intent as we flesh out the site in the comp phase. Creating a visual environment that supports the content and marketing goals of our clients -- as well as encouraging exploration -- can help solidify a client’s web endeavors as part of their overall brand strategy ... not just an extension of it.

Finding a Voice

If message is the content of a book, and tone is the front and back cover, then voice is the binding that holds them together. Defining what will be driving the narrative of a new site can help dictate the design direction. There are lots of different ways to invent the visual voice of a project; playing with descriptive keywords, asking questions like, “If this site was a car, what kind of car would it be?”, or even giving it the voice of a real-world celebrity. These exercises can help jump-start our creativity by getting clients to consider the project from multiple angles.

Next up in defining a voice is digging into the written copy for the site. The content of a site has the opportunity to shine when properly supported by its two counterpoints. It’s unfortunate that content is ever an afterthought to the design. This mistake often leads to a very typical formulaic site consisting of an exciting home page supported by rows upon rows of lackluster interior pages. This cycle can be broken, however, by treating content as an integral part of the wireframing and site-mapping exercises undertaken at the start of a new project.

But, let’s be honest; it’s not a perfect world, and there will be times when content can’t be prepped and ready to go so early in the game. Faced with this challenge, the designer has the opportunity to help define the role of the content. S/he shouldn’t be afraid to introduce ideas and options about how the content of the site should be phrased and positioned.  But those suggestions shouldn't happen in a vacuum, of course -- working with marketing experts on keywords, metatags, and metadescriptions (for example) that will help to boost the site's performance in the search engines at/post-launch is imperative.

A Fairy Tale Ending

Not all sites are interactive games for Coca-Cola or sneak-peek interactive experiments for upcoming movies. Some sites rely heavily on user-generated input (e.g. blogs), others are more UI driven, and more still need to be e-commerce sites capable of showcasing large amounts of inventory . Thankfully, good storytelling is rarely a linear endeavor. Bending rules to solve new problems is a key element of a good storyteller. The preconceived limitations of a site might be an opportunity to try to reevaluate how the data, content, and design are executed, no matter if that execution is a Flash game or an online application process.

After all, a good story always has bumpy plot twists, maybe an evil wizard or two, and thick forests to traverse before the fairy tale ending can be told.