You are currently using a browser that is no longer supported and may therefore cause display errors. Feel free to switch to another browser to experience a better design.

Cookies help us in providing our services. By using our services, you agree that we save Cookies. Learn more.

Close

Thinking Out of the Box

Resolution Independent Icon Design – Part 3: The Centigrade Way

Thomas Immich

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.
Home metaphor as scribble and as final icon

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.
Print icon in two different sizes using detail reduction
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.
Stock icon in two different sizes using detail enhancements

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.
Barchart icon with and without raster correction/grid fitting
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.
Product icon with and without contrast enhancement

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.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Corporate Experience Manager
+49 681 959 3110
Contact form

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Germany
    Saarland
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Germany
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    Germany
    Bavaria
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Germany
    Hesse
    On the map

    +49 69 241 827 91

    +49 681 959 3119