Home > design > Real-Life Metaphors for Web Design

Real-Life Metaphors for Web Design

When I started on thinking on how I was to build my all new awesome website, I pretty quickly decided that all I need is a private beta sign up screen. Now all that was left was to style it up with some CSS. My first instinct was to see what the big boys are using (Apple, Google, Facebook), then it was to turn to the up and coming companies from various awards crunchise2010, Webby Awards or TheNextWeb. Maybe turn to some expert advice in the field Smashing Magazine – web design trends 2010. Plenty of gradients, shinny buttons, 3D effects and the like. I want something more!

So let’s step back a little. In real life when we want to paint a wall white, we try everything to make the finish as smooth as possible. We would hate anyone to notice a brush stroke, an uneven paint roller mark, where we cut in with a hand brush or any unevenness were we masked for a 2 tone finish. On the web on the other hand if we want to paint a screen white we just set it to white .body {background-color: #FFFFFF;} and absolute perfection.

The thing is we don’t want perfection, it is so perfect that it does not look right. Change the colour a little and adding a gradient makes it much better immediately. This is where all the 3D like effects have come from. Mimicking lighting and other effects to give a sense of real-ness, roundness, to entice the person to press that button. Maybe a bit of a glimmer of light across the button to remind the user that
they may want to press it.

gradient below on modern browsers

So if we have taken the 3D paradigm across from the real world to web design, what else can we bring across. What other real-life metaphor can be used in web design?

I started to look around at the web and found some interesting articles but mostly about existing paradigms. The interest is also more in interface metaphor and how users will operate an application. Others like Smashing magazine – web design trends 2010 real life metaphors and css3 adaptation looked like almost the answer but around existing web sites and analysing which real life metaphors are at work. Usually for practical reasons (navigability, discoverability, usability) and not only for aesthetics although these things can go hand in hand. Promising is this paper on The Role of Metaphor in Interaction Design – Dan Saffer (PDF) where the author discusses the use of the galaxy – depicting data interrelation and geological stratification depicting data stacked over time.


So what is an example of a real-life metaphor for web design? One that may not have been used yet? Well I argue that they are all around us, question is how can we apply them to web design and ultimately are they a good idea.

Lets take the theatre as an example. There is the curtain and the facade for the viewers, and then there is the reality of the backstage.


The same could be done for a web site. The front end of the web site pristine and the admin interface with on purpose less finish and in fact many of the underlying structure (ropes) uncovered so that the operator can see what the effect of pulling a rope is. This is kind of what we already get. The idea would be to extend that and highlight it, make it even more obvious.


I haven’t found the secret sauce of the “next best” real-life metaphor for web design but I am planning on putting forward some real-life metaphors and seeing how they could be applied to web design. I expect most will be failures and simply an analysis of the grimy world we live in. I am hoping that inside there will be a gem and it will be worth waiting for.

Categories: design Tags: , , ,
  1. No comments yet.
  1. No trackbacks yet.