Using metaphors in web design

Graphic design is all about communication, and on a website we usually want to communicate something about a service or product or organisation. We probably want to tell people about its benefits and strengths. Of course one way to do this is to tell people directly – to write down various facts about your service or product. Another way is to help shape a viewer’s emotional response to a web page by the way it is styled – particular uses of colour, contrast and typography are used to create a particular ‘look and feel’. This is communication working on a more subtle and ‘emotional’ level. A third method we can use is to sort of combine the two and create a metaphor that communicates the essence of your message in a non-literal way. It’s something that we see around us in advertising all the time.

To give an example, at ILRT we were recently working on a new website for the Worldwide Universities Network, an alliance of 18 universities across the globe that join together to encourage interdisciplinary research. The main audience for the site are academic researchers who may be interested in starting a new collaborative research relationship with another group in another WUN university. In this case it was useful to distill out a key message for that audience – one that summarised the benefits offered by WUN – and marry that to an image that illustrates that message metaphorically:


The benefit of this type of design is that it allows you to communicate your message in a visual way. Images are more instantly accessible than words and require less effort to process. In this case the distant expanse of horizon ties in with the idea of looking at the future and meshes with the tag line. Tag lines can often be used to clarify the metaphor you are making and anchor a non-literal image to the actual subject of the design.

Here’s a homepage for a software company:


In this case we determined that the immediate appeal of the company’s software products was to help it’s clients stand out in the market place. So I set about trying to capture that concept in a non-literal way. In a literal sense, of course, fruit has very little to do with software. But the image implies the concept of ‘standing out from the crowd’ or ‘being special’ which is what we wanted to communicate in this case. The fruit also has a secondary connotation – that of being tasty. Images of delicious food work on our senses in a more immediate way than software usually does.

As a web designer, using conceptual or non-literal design solutions can be liberating. You know what it’s like, you’ve just landed a new job to design a website for a firm of accountants. The obvious choice is to use images of people in suits reading documents, perhaps a close-up of a spreadsheet or a calculator. Not the most inspiring stuff to work with. But perhaps we can look at it from another angle – what kind of function does a good accountant really perform in the life of a business? He is a necessary part of helping a company grow and flourish, helps to keep things in order. Something like a gardener perhaps? You could then shoot off to your favourite stock photo site and start looking at images of tended gardens or beautiful trees growing.

3 thoughts on “Using metaphors in web design

  1. Pingback: metaphor man

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>