Feature
Post

Category
Design


Visual Metaphors: 7 rockstar examples on the web

What’s a metaphor? Let’s take a trip back to high school (or over to Wikipedia), shall we? A metaphor is a direct comparison between two or more seemingly unrelated subjects describing one subject as being alike to another subject in some way. Metaphors are useful for illustrating ideas, simplifying complex subjects and making people think.

Metaphors should not be confused with a simile because a simile makes the comparison by using “like” or “as”. Metaphors are commonly used in poetry, music, writing, advertising and traditional art. If it still sounds a bit confusing here are some written examples:

  • “You are my sunshine.”
  • “They need a financial safety net.”
  • “Let me play the devil’s advocate.”
  • “It’s raining cats and dogs.”

Why visual metaphors work?

Metaphors visually enhance the subject at hand. Metaphors make you think, inviting you to analyze how two subjects relate. On the web, visual metaphors can enhance content and a site’s purpose dramatically. This works magnificently if you seek to capture the attention of an audience for more than a quick glance. A metaphor consists of two main parts: the tenor and the vehicle. The tenor is the subject to which the metaphor is applied. The vehicle is the metaphorical term through which the tenor is applied. These two parts come together to reach a point of similarity known as a ground. 1

In a world where many websites embrace simplicity by providing content in an easy to digest format, visual metaphors will always steal the spotlight. While you have a visitor’s attention, give them a reason to stay and mull over an idea. Why not make your audience think?

Here are 7 excellent examples of metaphors at work on the web.

01 – Extended Metaphor

An extended metaphor sets up a principal subject with several subsidiary subjects or comparisons. Essentially the subject is developed at great length, occurring frequently in or throughout a work. A written example:

The winds were ocean waves, thrashing against the trees limbs. The gales remained thereafter, only ceasing when the sun went down. Their waves clashed brilliantly with the water beneath, bringing foam and dying leaves to the shore.2

Hope Garden is a great example of an extended metaphor. The tenor is "hope" and the "garden" becomes the vehicle. Thus, the flowers become symbols of desire from individual submissions. Hope garden becomes an extended metaphor when the flowers are “watered” with support from users illustrating the idea that hope will "grow".

Hope Garden

02 – Paralogical Metaphor

Paralogical Metaphors have no apparent similarity between the idea and the image.3 This means that two completely unrelated subjects are compared to create the metaphor. Example: "My toilet is the mailbox of the bathroom." (Ewww, that sounds disgusting!)

Post Secret serves as a wonderful resource for all kinds of metaphorical inspiration and often has examples of visual paralogical metaphors. (Not all secrets are paralogical but many are). Users submit the content so this one isn’t about the design of the site but the metaphorical beauty of each secret. Many of the submitted secrets have images which are not related to the secret but add to the subtext when absorbing a secret’s meaning. New secrets are posted every Sunday.

Post Secret

03 – Iconic Metaphor

This is the type of metaphor where icons visually represent a subject. Iconic metaphors have become common place on the web, such as a home icon representing the route to get back to a site’s index page or an envelope representing the contact page.

Davor Vaneijk uses icons prominently on the index page and as a consistent mechanism to represent each section. Icons are meant to be visually obvious and the beauty of this example is the simplicity and consistency of styling.

Davor Vaneijk

04 – Color as a Metaphor

Color metaphors are commonly used in art where red may represent passion, gold hues are flash-backs of the past, blue represents melancholy emotions and so on. Color metaphors on the web are often used as a way to represent sections of content and provide a sense of location in place of breadcrumbs.

An example of color used to represent sections of content is SharpIdeas.com.
This site uses colored shapes to represent the types of content. For example print is blue, brand campaigns are gray, design is pink and so on. These colors don’t represent the sections in an emotional sense but become a simple visual metaphor to organize the user experience.

Sharp Ideas

05 – Mixed Metaphor

This one is a bit confusing so let’s start with an example: "He stepped up to the plate and grabbed the bull by the horns". Mixed metaphors are different metaphors occurring in the same utterance that are used to express the same concept. Mixed metaphors often, but not always, result in a conflict of concepts. 4 This is one of the most difficult metaphors to pin-point on the web.

Pet Mustache is a close example of a mixed metaphor. The site is a viral initiative for Burger King. The entire concept is a mixed metaphor stating, "Next to a horse, every cowboy has a well trained mustache too. It’s time to bring out your inner cowboy, cowboy". The first part of the mixed metaphor is the pet mustache. In fact, you can not truly have a mustache as a pet but you can groom or "train" it. The second part of the mixed metaphor is the inner cowboy as a metaphor for bringing out your wild side. Interestingly, the BK King has a "well groomed" mustache too which is what probably inspired the concept.

This is a mixed metaphor because of the comparison of pet and mustache – and bringing out your inner cowboy.  I’m sporting my very own pet mustache below and that was me at age 4. I need to train my "stache" better; it’s looking a bit unruly. Yee-ha!

Pet Mustache

06 – Dead Metaphor

Even though it sounds a kind of creepy, it’s not. Dead metaphors, by definition, normally go unnoticed. 5 Essentially a dead metaphor is a metaphor that through overuse has lost figurative value. Example: "to grasp a concept" or "to gather you’ve understood." Both of these phrases use a physical action as a metaphor for understanding (itself a metaphor), but in none of these cases do most speakers of English actually visualize the physical action.

Capital Corporate Communications opens with the tagline “We Shape ideas”. This is a dead metaphor because it uses a physical action to give tangibility to the metaphor. It is a commonly used phrase where the user doesn’t visualize the physical action of shaping an "idea".

Capital Corporate Communications attempts to overcome this and demonstrate the metaphor by using origami to indicate each section of the site. The dead metaphor becomes illustrated through the unfolding of paper thereby changing its shape.

Capital Corporate Communications

07 – A Synecdochic [si-nek-duh-kee] Metaphor

This is a fun word to keep in your back pocket if you ever want to sound ridiculously smart. Synecdoche is a figure of speech in which a term denoting a part of something is used to refer to the whole thing, or a term denoting a thing (a "whole") is used to refer to part of it. Synecdoche is also a term denoting a material is used to refer to an object composed of that material. 6

A Synecdochic metaphor is one in which a small part of something is chosen to represent the whole so as to highlight certain elements of the whole. For example: "I dig your wheels!" [wheels = car].

A great visual paradigm of a synecdochic metaphor is the WDCS Life Size Whale. This example is synecdochic because as you view the whale you view small parts which represent the whole. This perspective also relates to the scale of humans in relation to the whale giving an emotional tie in perspective of our human view compared to the true scale of the whale.

WDCS Life Size Whale

Creating successful metaphors takes a lot of time and thought – but they can have big payoffs. Metaphors will add to the stickiness of your site and create buzz. They also visually stimulate your audience’s appetite for creative thinking.  The first step to creating a successful metaphor is to understand the types of metaphors. Next, think about what makes a metaphor work. Finally, focus on presenting your metaphorical concept in a visual manner. Step outside the box and start making metaphors!

References:

Did you like this? Please show Larissa some love and Digg It


  1. By Darren posted on August 6, 2007 at 11:51 am
    Want an avatar? Get a gravatar! • You can link to this comment

    A well researched post as always, with great examples. You know what they say. You learn something new everyday! Thanks.

  2. By Andrew Egenes posted on August 6, 2007 at 3:40 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Fantastic article!

  3. By Ivan posted on August 7, 2007 at 8:21 am
    Want an avatar? Get a gravatar! • You can link to this comment

    What a great article thanks Larissa. Very interesting to be made aware of things on the web that you register without actually realising why, I will be definitely be giving this some thought on future projects.

  4. By Stefan posted on August 8, 2007 at 1:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great article, Larissa, but
    i don’t think metaphors are for the web. Not for the whole web at least. It seems like we’re moving so fast that we can’t remember what we were talking about a few years ago. About clients, about target audience and things like this. I know that you won’t miss that at all, but it would be better to mention. Using such filed techniques and viewing such amazing sites (they are!) might lead us to loose the look for the more important things. If we would use this as a main part of a site, a part that is necessary for understanding contents an connections on the site, it could cut us off from our visitors. Most people don’t understand about metaphors and won’t at all. The web is for easy going. Fast informations. No understanding, no questioning.

    So far my few words. I really like those metaphors. I like the whole idea and concept (as i’m a fan of classic literature). What i also dislike are loading times and flash. It would be great if metaphors are integrated as small parts, little gimmicks, tiny extensions, everywhere they are appropriate.

    Best Regards,
    Stefan

  5. By Travis posted on August 8, 2007 at 3:52 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I disagree, the web is a medium to present information. Design elements take “absorption” to the next level… metaphors take it even further.

  6. By Christopher Munn posted on August 18, 2007 at 4:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great research and beautiful presentation. This page and the examples within really got the creative juices flowing. Thanks

  7. By Naomi posted on September 5, 2007 at 8:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This is really interesting. Thanks for sharing.

  8. By crazyleaf posted on September 26, 2007 at 5:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Good post, Larissa. Loved the one about the life sized whale.

  9. By Jason Walton posted on October 3, 2007 at 2:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the article.

    Love your Munny’s.

  10. By rosa posted on February 15, 2009 at 8:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great. I have been looking for a style ( not up tight) to explain metaphors to my students. This article was so on point. Thanks

  11. By Scott Smith posted on December 18, 2009 at 12:04 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for writing this. I don’t know whether I agree or disagree but it sure makes me think.

  12. TrackbackMinimology · Digital Playground of Chris GarrettLarissa Meek » Visual Metaphors: 7 rockstar examples on the webbiomechanikarl » Visual Metaphors: 7 rockstar examples on the webbiomechanikarl » Visual Metaphors: 7 rockstar examples on the webCeyhun AKSAN » Bağlantılar ve Derlemeler : AğustosDevlounge | No One Digs UsEnlaces para leer y ver 40 « el50Russia Mp3 Download » Blog Archive » 7 Elements-Take You HighMétaphores visuelles sur le webWhy visual metaphors work « Ambient Ideas’ Denver DevVisual Metaphors: 7 rockstar examples on the web | Devlounge(-)