Using Visual Metaphors in Web Design: Part 1

This is the Guest Post by Jeff Boshers. If you are interested in writing for us then check out the details here.

Metaphors are everywhere! Just travel over to wikipedia, take a stroll around and you see that there are many different types of metaphors. Here we will explore how visual metaphors can enhance the overall design and take it to the next level.

Metaphors are Natural

The human brain loves to seek the correlation between two objects. Example: What does the earth and bread have in common? While your brain is churning over that one let’s look at the definition of metaphor.

Metaphor – n.

1. A figure of speech in which a word or phrase that ordinarily designates one thing is used to designate another, thus making an implicit comparison.
2. One thing conceived as representing another; a symbol.

Oh and by the way, both the earth and bread have crust.

Why Metaphors work

Like earlier stated, the human brain loves metaphor. As a designer, using those metaphors will allow for deeper intrinsic meaning and the ability to trigger deep emotions without saying a word. Metaphors can also be looked at from a usability standpoint. Someone with a learning disability would be able to understand simple visual metaphors easier than a block of text explaining the same thing. Metaphors also allow for a more creative design process. Instead of designing the standard played out blues and grays with pictures of people in white coats for a physician’s group, using the metaphor of doctors being gardeners opens up the color palate to greens, yellows, with the imagery of palatial gardens and other nature settings.

Anatomy of a Metaphor

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.

First on the Chopping Block: Active Metaphors

Active metaphors are easily noticeable and stick out like a sore thumb. In fact I’m willing to bet, that if you go back and look in your portfolio there will be at least one piece of your work with an active metaphor in it. In an active metaphor, the tenor and the vehicle are simply stated and the ground is found quite quickly.

Mutant Labs

Take Mutant Labs for example. The tenor in this situation is Mutant Labs themselves. The vehicle is that of being scientists. By drawing the correlation between scientists and themselves, it’s implied that they are in a league of their own; experimenting with new and exciting areas in design.

Attack of the Web

Attack of the Web’s metaphor is as in-your-face as active metaphors can get! The tenor is the designer and

the vehicle is the anthropomorphic computers that are catching a beat down. This metaphor is implying that by employing this designer, he can make the web bend and submit to his client’s will.

Flourish

Flourish uses active metaphors in a more subtle fashion. The tenor in this case is Flourish’s skills with usability, visibility, aesthetics, and flexibility. The vehicle is trees and greenery that is seen on screen. The implication in this metaphor is that by using Flourish’s skills the sites that are made by them will prosper and grow just like a mighty oak tree.

Code Monkey

Code Monkey uses a clever play on words to create their image. The tenor in this situation is the coder himself. The vehicle is the monkey on the site. The message implied is that no matter the design, the code monkey can make the design into beautiful code by focusing on the task with his undivided attention.

Citrus SEO

Citrus SEO uses the image of citrus soda to describe their business. The tenor being Citrus SEO and the vehicle being the citrus soda conjures up images of refreshing soda. The mission of this metaphor is to relate the company’s abilities to refresh, revitalize your SEO rankings while doing it in a clean and organic manner. The color of this site also plays heavily into this metaphor but more on that in my next article.

In Closing

In choosing to work with metaphors, you open a new world of possibility for you and your client. By using active metaphors, you’ll be able to effectively grab the attention of the end user while communicating in a more direct manner than most other forms of metaphor. Next time will look into using colors as metaphor.

header image by h.koppdelaney