Icon Craftmanship

Boxes & Arrows has a nice article by Uday Gajendar about the craft of icon design.  As I mentioned a few days ago, the Army Men were spawned by my own team’s process for generating icon ideas, so this article is timely.

I’m not a graphic designer, but I’ve worked with them – and substituted for them – my whole career.  I identify with many of the points that Uday makes about flow and pixel level judgement, creating an icon brick by brick.   I’ve never felt my skills were adequate, but I think I’ve managed to improve visual appeal and communication ability in much of my icon work. 

Uday discusses the contrast and relation between high-level wire frames and low level pixel production in icon work.  He talks of using those higher level design skills to guide the low level production.In this last round of icon generation on my team, I also experienced the opposite affect: ideas, concepts, and heuristics that could be generalized to the entire interface from the color and placement of individual pixels. 

In the past, many of our icons were produced piecemeal, as they were needed.  We now have so many icons – and decorators that overlay icons – that we have to start understanding and articulating the visual language we want to emerge in the product as it evolves over time.  Existing icons will be overhauled when possible, and new icons will be generated based on the visual guidelines we discovered and articulated.

Here are some of the basics we’ve decided on at the moment:

  • Individual object icons are the basis for the representation.  If you are designing a button to do something to a network, or a panel to display the state of a network, or anything else related to a network, have a clear, consistent representation that means network throughout the interface.  Use the full-range color palette and be as representational as possible.  And, of course, limit yourself to 16×15 pixels.
  • Collections of objects are underlaid with a folder representation, either open or closed based on whether you can see what is in the collection at the moment or not.  Unfortunately, years ago we adopted the pale-yellow folder icons that Microsoft used in Windows 95, so we can’t stray too far from that color scheme.  But make the folder appear behind the object representation, both through the graphic form and color layering.
  • Represent the state or configuration of an object with a smaller overlay graphic (or two or three).  A network fault overlays a little yellow triangle with a black exclamation point.  A paused task overlays a little pig snout VCR-like pause icon.  Use subtle coloration, no bold saturated colors, because these states should be obvious when inspected, but not draw attention in themselves.  Separate the state icon from object representation with a  geometric outline in black and a flat fill color.  Try and make these fit in a decorator of less than 8×8 pixels that can be placed on top of the object representation.  The same decorator should be used with different objects if their states or configuration are similar.
  • Represent actions or commands – such as Add or Delete or Run – with overlays as well, but use saturated colors and more complex shapes.  Rarely does an action decorator need to be used in tandem with either the state decorators or the collection underlays, so use whatever real estate necessary to make the action clear along with the object representation.  But never more than 16×15 pixels please!

To graphic designers in the audience, especially those who do a lot of web icon work, these guidelines probably seem naive and simplistic.  However, it is a breakthrough for us and our product because we’ve never taken the step to articulate a clear visual language.  The complexity of the product has exploded as its function has acreted over the last ten years.  We need a language to operate within to avoid redundancy, conflict, and misrepresenation in our icons.  It’s nice to know we have started to speak a single, explicit language.

This entry was posted in Interaction Design. Bookmark the permalink.

2 Responses to Icon Craftmanship

  1. Anonymous says:

    Re: Icon Craftmanship.
    It is said by many a Graphic Designer, that most new graduates that enter into the workplace have no understanding of traditional typesetting. And it could be true?

    Icon craft will be compared with the art of Typesetting in years to come. It is defeninetely a course stream that would add value to any university’s curriculum.

    Good read, thanks.

  2. Anonymous says:

    Hi Jarrett…Thanks for linking to my article on B+A and also sharing your thoughts on the icon design process. I actually never took a formal class on it but the application of graphic/communication/information design principles stemming from logo design or typography is at the heart of icon design, with craft to round out the end result, as I’m sure you’ve discovered in your icon experiences 🙂 The creation of a visual language and general guidelines (no matter how simplistic or naive) totally supports that process well…What’s really interesting down the road is the evolution of that language as users start to learn the lexicon and demand changes, etc. Good luck and thanks again…

Leave a Reply

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