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".
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.
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.
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.
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!
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.
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.
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!
- 1 cod.edu: Parts of a Metaphor
- 2 Writesville: Examples of a Metaphor
- 3 Wikipedia: Types of Metaphor
- 4 sil.org: What are mixed metaphors?
- 5 Wikipedia: Types of Metaphor
- 6 Wikipedia: Synecdoche
Did you like this? Please show Larissa some love and Digg It