Icon Design — Basic Concepts and Rules

posted by: Iaroslav Lazunov, in Articles / Theory/ Comments:

Icon Design is one of the most important trends in design. The number of web sites is increasing every day, number of applications grows, and all these contain interfaces, therefore, need to have icons. Today we will talk about the basic principles of creating icons, their types and trends in this area.

A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device (Wiki).

What are the icons for, maybe we could do with just text symbols?

I do not think so and here is why.

A human remembers pictures better than text.
Icon, in contrast to the inscriptions, may have characteristics that help to find it quickly on the screen. These characteristics are the shape and color. Inscriptions do not differ from each other by shape and color. In order to distinguish one inscription from another, you need to read them. In the case with icons, just one glance is enough.
Icons help to save screen space. The size of interface icon is usually smaller than one of an inscription.

What are the basic principles you should follow when creating icons?

If you create a set of icons, they should have the same style. Icons should not be considered in isolation from the environment where they will be located. That means that you need to take into consideration interface design, website design, and so on.
Icons of the set should be equally illuminated. That means that reflections and shadows must correspond to the same light source.
If you create multiple sizes of the same icon, design it from scratch. This is especially true for small sizes 16x16 and 22x22. If you just reduce the large icon to the desired size, ignoring this rule, it will transform into a dirty spot. When designing an icon for a smaller size, reduce the number of objects, do not use shadow and small glares. If a large icon looks like a 3D object, draw it in the frontal plane for the small size.
When you create small icons in vector editors use the pixel-perfect technique. Objects must lie exactly on the lines of the pixel grid. Otherwise, anti-aliasing future blurs the boundaries of the image, and the icon will not be clear.
Icons should not contain unnecessary elements, it complicates their perceptions.
Take into consideration cultural and national differences of users. Some symbols in different cultures can be interpreted in different ways. If you do not exactly know the audience, try to use global symbols that are understandable to all parts of the globe.
Icons in the set must differ significantly among themselves. If the user will be confused with the icons, then the whole point of their creation will be lost. In the first place an icon should be a "visual anchor".