Today’s attention economy—where people have limitless information, but the same mental capacity—demands that ideas be conveyed quickly to be heard. It’s led us to swap the morning ritual of reading the physical newspaper with listening to podcast digests or scrolling through Twitter.
As a digital copywriter, I know that words are important—but in the age of scan, even a short sentence can’t compete with a well-designed graphic. This reality is nothing new, considering we’ve historically relied on symbols to express ourselves: From cave paintings to emojis, it’s always been more effective to show instead of tell.
But symbols can only go so far. With the evolution of communication, their capabilities needed to expand. Enter the visual metaphor, images that represent or symbolize an abstract idea rather than their literal meaning. Among other things, visual metaphors have been used in some of the most iconic advertising campaigns (remember the Volkswagen Think Small ad? Or the Absolut Vodka campaign?).
Now with digital product design, visual metaphors are even stronger because they add an additional element—not telling, or showing, but allowing the user to experience meaning through rich animation and scroll-able surprises. And those who utilize them get their sites noticed—just check out these recent Webby Awards winners and nominees:
National Geographic Plastic Pledge
The visual metaphor: Upon scroll, an iceberg reveals itself as a plastic bag underwater.
Why it works: The message of plastic becoming waste is one thing, but plastic replacing an iceberg tells the user that their waste has real ecological consequences. The addition of scroll is not just a fun reveal; it allows the user to directly engage with this message.
Adidas Nite Jogger
The visual metaphor: With very little copy to distract from the shoe, the focus is on the dark, mysterious image. When the user rolls their cursor over the shoe, the spotlight reveals what it looks like at night.
Why it works: Rather than simply say, this shoe glows in the dark, the user discovers and experiences it.
Wealthsimple
The visual metaphor: One Wealthsimple-branded coin is “invested” down the red track to then become three coins on the blue track. In other words, when you invest with Wealthsimple, your money grows.
Why it works: The use of animation adds a temporal aspect to the product offering: The coins multiply slowly, showing a complex idea in a simple way.
Animation Handbook: show don’t tell
Animation simply makes digital products more lifelike. In Animation Handbook, Ryan McLeod of Blackbox teaches you how to put animation’s power to use.
Collaborate to create strong visual metaphors
To create Webby-worthy designs, digital creatives must break down old processes and step outside their disciplines. It’s easy for writers and designers to create metaphors on their own, but adding another voice requires time and effort. Which is partly why, despite them being so effective, they’re not used as often as they should. But it doesn’t mean we can’t try. As with solving any problem, it’s good to lead with empathy: It’s as simple as writers asking themselves, If this headline were an image, what would it look like?, and designers, If I took this headline away, would my visuals communicate the message clearly? As one creative team, they can then lead the way for holistic digital product design, saying and doing more than they ever could alone—and maybe even winning a Webby of their own.
