The previous part explained why both a pure pixel-based or pure vector-based approach to icon design implies drawbacks. As Centigrade provides professional icon design services, we continuously investigate how to make our icon design process more efficient and overcome technical shortcomings.
Preparation Phase
During the first step of our icon creation process we don’t care about pixels or vectors at all – it is all about finding the adequate metaphor. This is because, first of all, an icon should be self-explanatory or at least easily learnable to legitimate its existence. Aesthetics are unimportant during this stage of the design process. The mapping between the metaphorical world and the conceptual world must be intuitive and unambiguous. For example, using a cogwheel as the metaphor for the concept of an action is intuitive. Using the same metaphor for task would be intuitive as well. However, if our conceptual world included both actions and tasks, using the cogwheel metaphor for each concept would be ambiguous and confusing for users. We need to make up our mind to maintain a one-to-one mapping between metaphors and concepts. That’s why we at Centigrade do not design a new icon in a vacuum – we always try to consider in which context the icon is used and what other icons/metaphors are already occupied or still needed to avoid any ambiguities.
When we have clarified all relevant metaphors we define a visual style that integrates well with the clients’ software product. In order to let clients participate in the style definition phase, we
- present existing icons in different styles to them
- produce one or more rough paper and pencil sketches per icon to be able to efficiently juggle ideas or
- create four or three finalized and readily-polished icons in different styles
In any case, some communication is required when it comes to creating individual high-quality icons as it is important to find out a client’s preference.
Main Phase
Not before this preparation work is finished we dive into the pixel and vector-business using decent tools such as Microsoft® Expression® Design, Adobe® Photoshop® or Adobe® Illustrator®.
In either of these tools we create each icon as a vector graphic, at first optimized for one certain pixel size, preferably a size in which the icon will be primarily used (as of today mostly 32×32). When a reasonable set of icons at that specific size is finished, we send them out to the client for a first design review discussion. This is the chance for clients to introduce requests for changes. As an icon designer, even if you are a master of your trade, you need to get a feel for the clients’ tastes in order to perfectly match their expectations. That’s why we at Centigrade have installed the possibility of one modification request per icon as a standard in all projects.
Finishing Phase
After an icon at a specific size has been embraced by the client we start working on the remaining sizes. Due to the vector rasterization dilemma this is a manual activity and unfortunately cannot be automated by any existing tool. However, as we have already put some more time into the preparation phase, this activity does not entail any revisions – so at least it is a singular piece of work. The activities I am talking of are: detail reduction/enhancement, raster correction/grid fitting and contrast enhancements.
Sometimes these activities require the small size versions of icons to be made from scratch for the sake of better recognizability. Though it is an ungrateful job, it is important for design quality. Look at Apple’s Mac OS X Leopard: in my opinion the most notable improvement regarding their icons is not that there are now even larger size icons at 512×512 pixels – it is more the fact that they have completely remade their 16×16 icons so that they have become more recognizable.
Let me introduce a short example for each of the necessary activities.
Detail Reduction/Enhancement
In this step we have to distinguish whether an icon is scaled up or down. For downscaled icons we use detail reduction, for up-scaled icons we use detail enhancement. Detail reduction means removing all the graphical elements that are not absolutely required to recognize the icon. This is a tightrope walk as we cannot entirely ignore the fact that an icon also needs to look aesthetic and interesting – both are visual aspects that actually result from using details. For very small icons, not only graphical elements are removed, we even abandon any perspective or three-dimensional effects.
Detail enhancement is a more thankful job. It means adding details such as light effects, shadows, reflections etc. – the very things that finally elicit “Ahs” and “Ohs” from clients.
Raster Correction/Grid Fitting
Vector graphics have a lot to do with math. And in this case math has a little to do with aesthetics unfortunately, because the mathematical algorithms of vector tools interpolate a vector path that does not perfectly lie within the pixel raster rather than compute what would be its best visual position. For example, if a black vector stroke lies (mathematically) in the middle of two pixels, the graphics tool will display it in gray (50% black) color rather than 100% black.
This results in blurry, low-contrast icons as explained in the previous part. We at Centigrade look at each vector path that’s used for the icon and potentially move it to avoid interpolation issues. Most often this is pretty straightforward, but especially for small scale icons it can become really tedious. Sometimes we even have to accept the fact that we cannot achieve the desired results using vectors. This is where we fetch the good old pencil tool and pixel the necessary graphics.
Contrast Enhancement
When an icon consists of several colors, these colors start intermingling in the eye of the beholder as soon as the icon gets downscaled. The designer has to counteract this natural consequence by using higher color contrasts. In other words, color values have to be “exaggerated” (e.g. by applying more hue) to separate them more distinctively and finally make the icon recognizable again. This step demands considerable skill from a designer as it should never be consciously recognizable that the smaller icons actually use different colors than the larger ones – at least not when they are shown one after another (of course showing them simultaneously inevitably destroys the magic). It’s a bit like with music: a song does not feel “groovy” because everyone is playing right in time – it is because, for example, the drums are consistently playing a tiny bit earlier than the rest of the group – just as much for it not to be consciously hearable.
Conclusion
The structured icon design process, divided into preparation phase, main phase and a finishing phase avoids as much manual or unnecessary work as possible. The three enhancement steps of the finishing phase guarantee that even vector-based icons keep their stunning look at all possible sizes. Though they require a bit more work, they result in much better results – and much happier clients.
In the next and final part we will speculate a bit on how the process could be improved even more – namely by leveraging adequate tool support.
