Visual Storytelling II - Tips from Our Pros

"I may not know much about art, but I know what I like."

It's a quote that's widely -- and wildly -- attributed. Anyone from Mark Twain to W.C. Fields is alleged to have made up this comment. I prefer to pinpoint it to "The Penultimate Supper" sketch by Monty Python. 

Art is subjective. Some people have a greater appreciation and understanding for its various elements; some people can trace a particular painting through its elements historically, to understand techniques and derivations.

And others just like what they see.

It's a primal, visceral feeling that stirs one's emotions. It can be either positive or negative. And it can be as simple as a feeling of "I like that," or "I don't much care for that."

A picture may be worth a thousand words, but if you're not making every one of those words count, then you've wasted an opportunity. And with only seconds to attract your customers' attention on a website, your visual storytelling elements must work to draw viewers deeper into your content.

It's a skill. And though I've had some layout and design experience in print and web, combined with a likely inflated sense of my abilities as a photographer, I decided to turn to Digital Echidna's Interactive Art Directors: Aaron Judd and Dave Rino for some tips

No One Size Fits All

If you're looking for one hard-and-fast rule -- something that you can bank on each and every time you design something, it's just not going to happen.

Every medium has different strengths and weaknesses. Each medium will offer you opportunities to explore certain visual elements that won't translate to other media. So one design isn't going to work.

Back in the day, some companies just wanted to translate their print advertising or styles to web. As we've grown and matured in the digital world, we understand that what works in print doesn't work on the web.

Heck, what works on some of the web doesn't even work on other parts of the web. A design that works well on a desktop doesn't necessarily translate into a successful design for mobile.

But the fundamentals of good visual design translate across all media: alignment, balance, contrast, repetition, and white space.

Contextualize Images

Stand-alone graphics in the middle of a field of text can confuse people. Make sure that the images correspond and add value to the text.

It's also important to remember your accessibility requirements -- ALT tags explaining what the images represent, in significant detail, must be included.

The best images are those that don't just exist, but complement and enrich an experience. You may be tempted to go with the ol' grip-n'-grin stock photography (or the Execution at Dawn), but try to be more creative with your images. Use real people from your business to add a layer of humanity to your operation; instead of a picture, consider graphics that help to illustrate a point; use pull-out quotes in dynamic fonts and styles to highlight key messages.

A Novel Idea

Graphic novels are a good representation of how images and text can interact. The story is told largely through visuals, which are then augmented by text.

When designing for the web, consider the presentation of graphic novels (or comic books). The images drive the story and the text is there to augment and contextualize. You don't have a lot of time, initially, to attract people to your content, so if you can do it in a visually arresting way, it's a benefit.

The "sound effects" (and you can even look back on the cheesy 60's-era Batman TV show for evidence of this) can be seen as your calls to action -- quick, punchy, and easily identifiable elements that encourage interactivity and draw your customer into further exploration of your content and opportunity.

Balance

A well-balanced composition. If you're going to tell a story, you're going to want to tell it in smaller, easily digestible chunks. Focus on one message at a time.

Image-wise, you want to ensure that the Rule of Thirds is applied. Think about balance not only in terms of content, but also in terms of composition. Have images "look into" text, not off the page; balance in terms of diversity... the usual.

You may have a lot of text and messages that you want to convey, but it doesn't have to be presented all at one. Focus on the main image and message and use clear calls to action or other contextual elements to draw people to deeper areas.

Again, I'll reference the "What's in it for me?" messaging. Up front, your content should speak to the vast majority of your users -- the 90 per cent who are going to act upon your message and put money in your pocket. Sure, some of them may be interested in your corporate history, but that shouldn't be a defining element visually on your initial page.

Balance does not mean equal. If 90 per cent of your audience is interested in one item, then 90 per cent of your efforts should be directed to getting them where they need to go. Being all things to all people and investing precious visual real estate all in the name of "somebody might be looking for..." is a waste of time -- yours and the vast majority of your customers. 

Equitable Curiosity

There's some debate, even internally, about the effectiveness of the Curiosity Approach. In general, I'm opposed to it because, too often, it's dishonest or it inflates expectations and creates an ingrained foundation of disappointment.

But I'm going to defer a bit to Dave, who argues that -- sometimes -- the curiosity approach can be an effective visual technique.

By creating intriguing visuals that pique the user's interest, you create a compelling call to action without actually creating a call to action. You are setting up a scenario where the user wants to find out more and will take action to do it.

Obviously, this works better for those companies that have tremendous brand equity already and are able to sell the new sizzle, because the customers are already aware of what the steak has tasted like in the past. Companies like Apple or the major automakers come to mind. You're selling style and the curiosity approach works for that.

However, if you don't have that kind of brand equity in place, I stand by the idea that showing and telling your customers exactly what they're going to get is a better place to start.

More Than Just Images

Remember that visual design is not just about pictures (or even graphics). There are so many elements that go into your design that make up the visual story you're telling.

For example, typography can be used to effect to convey a message. Scale, emphasis, weight -- the effective use of styles can make your visual presentation more engaging. And fonts tell a story in their own right. Think of what Comic Sans and Times New Roman represent to you.

In a mobile environment, consider the impact of scrolling -- how are you able to continue a story's progression in a vertical space? What elements can you use to encourage continued scrolling?

And now we turn it over to you! What are your thoughts on visual storytelling? Do you agree or disagree with any of these elements?