Now imagine that you're an iconographer for Google Maps. Your job is to create compelling images that convey unambiguous messages in a universal language -- on a canvas 16 pixels by 16 pixels in size. You need a 16x16 image that's going to say, "pub." Or "hotel." Or "Funky B&B for the young and the young at heart." How would you go about it? My friend Patrick Hofmann happens to be the iconographer for Google Maps, and what he's learned about visual information can teach us a lot across a whole raft of disciplines.
The thing about icons -- as compared, for example, to logos -- is that they need to be instantaneous and utterly clear. An icon is not about evoking a feeling or stirring an emotion; it is about creating a light-speed information shortcut.
Patrick's role is to create this kind of instant recognition, and one thing he knows is that the more detail an image has, the more work we do interpreting it. If you have a silhouette of a woman with a bob haircut, you may distract the viewer into irrelevant thought patterns: Is she stylish? Old-fashioned? Posh Spice? If, on the other hand, your silhouette just has a circle for a head and a triangle for a skirt, there's no room for value judgments about the fashion of the icon.
advertisement
advertisement
The more detail we remove, the less complicated our reaction becomes. We stop thinking about the way our mother used to wear her hair and how we really need a haircut ourselves, and focus instead on the simple fact that this is the ladies' room.
There is an art to stripping a visual image down to its absolute core essentials. For example, Patrick might take a square frame and put four circles in it that look like the elements on a stove. No detail, no interpretation, no fond memories of the Aga your grandmother had back on the farm.
What happens, though, is that when you get down to those core essentials, you often introduce an element of ambiguity. Is it a stove top? A square Lego brick? One side of a die?
To handle that ambiguity, you add back in the smallest possible increment to differentiate the icon from those other contenders. In the case of a stove, Patrick added four dots at the bottom to represent the dials, immediately removing all uncertainty as to what the image was meant to represent.
When people are searching, we need to perform a similar function to help them find us. What is the absolute essence of what we're trying to convey? What is the core piece that will allow searchers to instantly recognize that we are the ones they are looking for? Strip your message down to the heart of its nakedness.
Then remove ambiguity. Ask yourself: will people be able to distinguish us from others transmitting that message? How can we make ourselves unambiguous? How can we remove all doubt?
When all you've got are 256 pixels, there's no room for uncertainty. Why should we create uncertainty, just because we have more space to play with?
I'd love to hear your thoughts in the comments, or via another symbol you may recognize: @kcolbin.
An icon (from Greek ????? eik?n "image") is a religious work of art, most commonly a painting, from Eastern Orthodox Christianity and Catholicism. More broadly the term is used in a wide number of contexts for an image, picture, or representation; it is a sign or likeness that stands for an object by signifying or representing it either concretely or by analogy, as in semiotics; by extension, icon is also used, particularly in modern culture, in the general sense of symbol — i.e. a name, face, picture, edifice or even a person readily recognized as having some well-known significance or embodying certain qualities: one thing, an image or depiction, that represents something else of greater significance through literal or figurative meaning, usually associated with religious, cultural, political, or economic standing.
http://en.wikipedia.org/wiki/Icon
Kodak was kicking ass as always, even in our client Ilford's black & white category. So we chucked the category's expected iconic language of the photos themselves...and got to this absolute essence... http://thezlotnickgroup.com/wordpress/ilford-photo/
http://www.thezlotnickgroup.com/wordpress/ilford-photo/