Show only the required details
Icons help users recognize a class of object. This AIGA icon for example 
can be instantly recognized as a bus. The icon does not show many details like rear view mirrors or grills. But they are not going to make the user recognizer the icon any faster. In fact it may increase the time to recognize since the user has to process more information. So once I selected the object to be used as an icon, reduce the object to its most basic elements. This reduced the amount of work I had to do.
Design icon in the size they will be used
I wanted icons at 16x16px. Our team a had purchased a library of vector icons, which could be scaled to any size. But when I reduced them to 16×16 px many details of the icons got distorted and the icons were not legible. So I created bitmap icons at 16x16px, either from a blank slate or retouching the vector icon at the required size. Vector icons don’t always get distorted, but I think there is a range of sizes beyond which a icon looks distorted.
Contrast across icons
It is important that icons are distinguishable from each other especially if icons are going to be shown next to each other. Otherwise the user would take longer time to recognize the icons, which defeats the whole purpose of icons. Whenever I have to design for contrast, I refer to Bertin’s retinal variables: Hue, Shape, Texture, Orientation, Size & Value.
Since all icons have to be similarly sized, I could not use size and position for showing contrast. But using only shape, hue, and orientation I could show sufficient contrast across the icons. I didn’t use texture, since it would be harder to perceive texture at small sizes and also it needs more illustrating skill.
Google’s icons are a good example of icons having contrast across hue, shape and orientation. I like how the icons for Blogs and Realtime have the same shape, but different hue and orientation. It captures their conceptual similarity and differences beautifully.
One thought on “Three Principles for Designing Simple Icons”