31189a - Learning Activity 05

31189a – Learning Activity 5

Metaphor

Click on LINK 13 to visit the CSS Zen Garden website

• Choose three different designs that use different metaphors.

• Which of the three are you drawn to?

• Who do you suppose the target audience would be?

• How consistent is the design as you move about the site?

Answer

A metaphor is an analogy or theme for the site that helps unify the various pages. A great example of this can be seen at LINK 12 where different designers contribute themed CSS designs to bring a standard web page to life. Each example uses a different metaphor although the content is identical.

By using meaningful images and assets that support the metaphor, the user will find the environment clear and will be able to make sense of it.

Anyway, here are three designs (metaphors) of my choice:

http://www.csszengarden.com/217: this one takes on a somewhat colourful style that is a cross between the Swiss and Bauhaus styles; however, if you could include comic books, it would also take on a 1960’s pop art style as well. The text is easy to read on this style

Similar to this: http://www.csszengarden.com/221/ - a combination of the Swiss and Flat styles, though more Swiss because you can incorporate photography into it and it would be a good way to promote black and white photography; or architecture.

And one with a difference: http://www.csszengarden.com/213/ (steam punk type of metaphor) – incorporates vintage style photography with even older style drawings and diagrams (something Leonardo Da Vinci would do).

Right now, I am drawn to the third – if anyone is into marine biology or shipbuilding, even fishing, this one is bound to attract.  And if you are into steam punk, then this would be for you as well.

However, in terms of a more generic website or blog, the other two maybe more your style – as they are easier to read, and are suited for someone who likes more modern pursuits like architecture, cartooning and photography.