PyrusMalus | Design

Icon Design

Process

Designing the perfect icon takes a number of steps, and a number of iterations. Read on to find out how we go from a pencil-sketch to a fully-rendered icon.

Concepts

The first stage is to come up with a number of overall concepts for the icon design: concepts that represent or interpret the purpose of the icon itself. The design of an application icon may be inspired by the name of the product, or its purpose; a toolbar icon will have to represent its own functionality but also fit in harmoniously with other standard toolbar icons. The conceptual designs aim to capture the true meaning in its simplest form, with the visual rendering of the icon left until subsequent stages.

The conceptual design will have to take into account the context, or environment, for the icon: the platform it will be appearing on; the nature of the application; and the target audience. Each platform comes with its own culture, each application has its own purpose, and each guest to the application or website has their own knowledge, experiences and perceptions. The conceptual design of the icon has to integrate with all of these requirements.

As an example, the Aqua User Interface Guidelines for Mac OS X indicate that an application icon should follow specific rules: the perspective should be as if they are sitting on a desk; and should incorporate the media that the application creates or views; and also a tool that communicates the type of task involved.

Of course, guidelines are often designed to be broken, and some application designs for Mac OS X choose to incorporate different visual styles, whether to differentiate their product from the others; or to provide a common appearance across multiple platforms; or just because they can.

Tests

The design concepts are then subjected to usability tests: to determine whether they convey the appropriate meaning or functionality. A design that may have appeared obvious or intuitive to the designer may be confusing to a guest using the website or application. The design should be intuitive — guests don't want to have to learn the meaning of the icons — and memorable — guests don't want to have to search for the icon in a toolbar of confusingly-similar icons.

The usability tests will help to determine which of the conceptual designs work best, and should therefore be taken to the next stage.

Treatments

Different platforms have different visual guidelines: designing icons for a web site has obviously far fewer restrictions than designing icons for a Mac OS X application, for example. The underlying philosophy for that platform's user-interface guidelines will have been incorporated at the conceptual design stage, but this is the stage where the visual treatment is applied, and the icon really comes to life.

The treatment stage has to incorporate the visual style required: it may be that the icon is to fit in with other icons; or it may be designed to stand out. The visual style of the icon, particularly for application icons, may also be required to work with other marketing material: from posters and banners, to packaging and stationery.

The treatment may be carried out in a variety of applications: from 2D drawing and painting applications, to 3D modeling and rendering packages. The choice of tool is determined by the desired visual style for the icon. The work doesn't stop there: the icon is then optimized to ensure that it works well at a variety of sizes.

It is also optimized to ensure it works on a variety of backgrounds.

During the treatment stage, the icons are subjected to continual testing and review to ensure that the visual treatment does not obscure or confuse the meaning of the icon itself.

Copyright

The images featured on this page are the copyright of the respective owners.