Symbolism of Color and Web Design

When thinking about how the study of symbols and signs can factor into interface design (whether for the traditional web or a mobile environment) two questions come to mind.  First, up to which level of a semiotic sign – iconic, index, and symbolic sign – should symbolic meaning be dealt with in eBranding?  Second, how are aspects of color and texture as a semiotic signs related to the purposes of 1) increased brand awareness, 2) enhanced brand loyalty, and 3) cause to purchase/commit?

I’m characterizing the different modes of reference of color application through Pierce’s model distinguishing iconic, index and symbolic signs.  Especially iconic and indexical signs seem to structure representation in a new way from the design. The sign may refer as an icon, an index, or a symbol to its object (X). Color may represent icon index, and symbol by the viewer’s interpretation. So, color of the webpage may function as an iconic sign when it refers to another thing with a similar color or texture.  Tan may, for example, refer to limestone even though there is no real limestone imagery used.

An indexical unit draws attention by being existent and not similar as does the iconic item. The cultural and social background of the person interpreting the site’s images and colors the third level of “symbol”.  This means symbols are more subject to variation in response and reaction than icons, icons more so than indexes. Returning to the use of tan, it may reflect a sense of the exotic by tying it to underlying associations with the desert and the Western construction of mythical representations of the Middle East. The point is that color is more than we think and can be remarkably powerful in helping establish connections with the user. It is a symbol and symbols have tremendous value.

Signs do not function separately, but form multilayered references.  The complexity of a sign is increased because the references are not stable or fixed qualities of the product.  Since references of the sign can be interpreted differently at different times and contexts, it means they display greater variability when not grounded in iconic and indexical messages.

So how do we use this when developing a site? Execution means integration, resemblance, and metaphor:

  • Colors can integrate, that is they create a visual unity of the elements shown.
  • Color can make objects and scenes resemble very closely what they look like in reality.
  • Through symbolic metaphors, colors, images, and textures address themselves to the imaginary and imply comparisons.  Identity is transferred from one object to another (i.e. website to prospective consumer).
Advertisements

Published by gavinjohnston67

Take an ex-chef who’s now a full-fledge anthropologist and set him free to conduct qualitative research, ethnography, brand positioning, strategy and sociolinguistics studies and you have Gavin. He is committed to understand design and business problems by looking at them through an anthropological lens. He believes deeply in turning research findings into actionable results that provide solid business strategies and design ideas. It's not an insight until you do something with it. With over 18 years of experience in strategy, research, and communications, he has done research worldwide for a diverse set of clients within retail, legal, banking, automotive, telecommunications, health care and consumer products industries.

Join the Conversation

3 Comments

  1. Very great post. I simply stumbled upon your weblog and wished to say that I’ve truly loved browsing your weblog posts. After all I’ll be subscribing in your
    feed and I am hoping you write once more very soon!

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: