Icon Do It!

Richard Hallas presents some ideas about designing good-quality icons for applications

The following article is a slightly updated version of a feature which was originally published in RISC User magazine, issue 12:8 (November/December 1999), not very long after the initial release of RISC OS 4. Being over three years old, it is therefore somewhat out of date in certain details (Mac OS, for instance, has moved on a great deal since the icons depicted in figures 1 and 2, and the face of RISC OS has also changed somewhat with the release of Select). However, minor details aside, the fundamental points made by the article are just as relevant now as they were three years ago. Perhaps more so, in fact, in that the interfaces of both Mac OS X and Windows XP represent complete redesigns which implement many of the ideas under discussion here. This article is here, though, mainly as a preface to the complementary article about the new icon set designed for RISC OS 5.

From time to time in the past I have written about my disappointment at the lack of presentational standards in RISC OS software, and also in RISC OS itself. I believe that presentation counts for a lot, and that it accounts in large part for the popularity of Macintosh systems, for example. Whilst it's true that there are some RISC OS applications that are very well presented, there are also plenty that are not, and in general it's a consideration that is too often ignored by RISC OS programmers.

So, in this article I'd like to present some hints for creating better icons. I've drawn lots of icons for both commercial and freeware RISC OS applications over the years, and have quite a lot of experience of making successful icons.

What makes a good icon?

An icon is a very specific kind of graphic, and I think it's necessary to take a unique approach to icon creation. Attention to detail is paramount because, in an icon, every pixel should count. There isn't room for 'waffle' and extraneous elements. It's easy to make icons overcrowded or confusing, and that's not at all helpful. A successful icon needs the following attributes:

Realism: if it represents a real-world object, it should look as realistic as possible.
Clarity: it should convey its function as clearly and succinctly as possible, without an excess of elements (its design should not be overcrowded).
Uniformity: if the icon is one of a series of similar designs, then the related icons should share common design elements.
Individualism: whilst maintaining similar overall 'family' design elements, icons in a series should each be sufficiently individual to allow their different meanings to be obvious at a glance.
Size: icons should not be excessively large: they should conform to any space constraints that may exist (such as the 34×34-pixel limit of file icons) if at all possible, and if there is no limit on size, they should be no larger than necessary.
Colours: icons should use only as much colour as they need; use too little rather than too much. In a very real sense, the 16-colour desktop palette of RISC OS, to which most icons had to conform until the arrival of RISC OS 4 (which supports 256-colour icons), was a benefit rather than a limitation. By providing lots of shades of grey, it allowed edges to be smoothed, and the eight available colours were also well chosen to allow a wide range of graphical possibilities. Yet the restricted numbers of colours imposed their own style. Now that this restriction has been removed, a certain loss of direction has arrived with the increased freedom that 256 colours bring.

Types of icon

Speaking broadly, there are two types of icon:

Objects: an icon may simply represent a real-world object that relates to a particular function, such as a brush for a painting program. The trick is to make the object you're drawing appear as realistic as possible whilst also being distinctive.
Ideograms: alternatively, your icon may have to represent an idea rather than a real-world object. Such 'ideograms' are harder to do than 'object' icons because they must convey an idea clearly and with a minimum of fuss.

Examples

Let's have a look at a few examples of both good and bad icons. Starting off with the good, have a close look at figure 1. This is the set of icons that Apple has produced for QuickTime 4 on the Mac. The Mac does have some advantages when it comes to displaying icons, as it supports 32-bit colour and multiple levels of true translucency, so it's easy to create nice shadows. Nevertheless, there's no denying that the icons in figure 1 are superb. Figure 2 shows a close-up of a few so that you can see some of the detail more clearly.

Figure 1: Apple's set of Mac icons for QuickTime 4

Figure 2: A close-up of three icons from figure 1

Comparing them with the design attributes listed above, we can see that all the criteria have been met. The icons look extremely realistic, and the purpose of each is clear. They all sport the jigsaw puzzle 'Mac OS extension' shape and the QuickTime logo, so they're clearly a family, but each member's unique elements make it stand out from the rest. They're all the same size, and even though there's no restriction on the colours they use, they don't look garish. Colour is used mainly to create detail, and to produce nice shadows.

Now examine some of the icons that Acorn commissioned for RISC OS 4 in figures 3 and 4.

Figure 3: A selection of RISC OS 4 file icons, designed by Acorn for the Phœbe Risc PC 2 (and in some cases touched up slightly by RISCOS Ltd to replace the original Acorn nut logo with the RISC OS 4 'cube')

Figure 4: A close-up of three icons from figure 3

By now you will probably have got used to them, or to their RISC OS Select-based derivatives (some of which have been improved in terms of clarity). Nevertheless, try to look at them here with a fresh and critical eye, and compare them in particular with Apple's QuickTime icons, shown above.

Are they realistic? Well, look at the finger in the Squash file icon; need I say more? What about clarity? Some are clear, but the Draw file icon is hopelessly overcrowded, and the edges of all the icons are indistinct on the grey window background. The icons look very flat and two-dimensional, even though some of them contain 3D elements like drop-shadows. There is no real attempt at any kind of anti-aliasing, and the edges of the curled corners look very blocky.

As for uniformity, all the file icons are the same size and have curled corners, and some have a standardised look with a dithered blue background (though the choice over which icons take this form seems arbitrary). Unfortunately, these blue icons are very hard to distinguish from one another at a glance, and the icons as a whole make excessive use of lots of particularly bright or pale colours. Also, given that a 256-colour palette is available, should such obvious chequerboard dithering as is used in the blue icons really be necessary? Overall, the RISC OS 4 icons fail to meet several of the criteria listed above; and apart from that, they just don't appear very well drawn or artistic.

Colour

Figure 5 shows an example of one particular aspect of good icon design: clever use of colour. These are icons used by Photodesk, and the designer has opted to make a feature of blue and yellow. The fact that they're well drawn, too, means that they're classy and professional.

Figure 5: The Photodesk icons make a feature of the colours blue and yellow; they may only be 16-colour icons, but the clarity of their designs and uniformity of their colour scheme makes them excellent

In general you should avoid using too many different colours; an excess of colour can convey a sense of childishness. When using colour, it's often a case of 'less is more': you should not go overboard. Sometimes you don't need to use any colour at all, as in figure 6. Often the greatest advantage that 256 colours (or more) provide is to allow you to apply more subtle shading than would be possible in 16 colours, even though the icon doesn't appear, superficially, to use any more colours. See figures 8 and 9, below, for an example.

Figure 6: Realistic dustbin icons, drawn using just eight grey levels; notice how the edges have been anti-aliased (more obvious on the bulging bin)

Borders

Icons shouldn't need to have heavy black borders. The best icons have edges which are distinct enough to separate the icon clearly from its background, but which are not so heavy that the icons become cartoons. Apple gets the balance just about right in the QuickTime icons in figures 1 and 2, whereas the RISC OS 4 icon borders in figures 3 and 4 are too faint. It's often possible to create icons which need no border at all (the icon's design is its own border). This is shown in figures 6 and 10: both of these icons represent 'real' objects (though figure 10 is an iconic representation of a piece of existing artwork).

Shadows

Shadows don't have hard edges, so when creating drop-shadows for icons, use some lighter shades of grey (darkening towards the icon) rather than a block of grey or (heaven forbid!) black. If your icon has elements within it that cast shadows on each other, the shadow should simply darken the colour underlying it. This is easier to do with 256 colours than in 16-colour icons, although it can be done to some extent even with so few colours.

In the icons in figures 1 and 2, notice how the Q logo casts a shadow in every icon. This is very nicely done. A less subtle example is my icon in figure 7 (left-hand side), where the shadow of the top window uses shades of the underlying colour.

Figure 7: Ideograms created for my RISC OS 4 Configure plug-in, Cosmetix (in the right-hand icon, the jigsaw outline is Acorn's)

Anti-aliasing

The shading of edges is enormously important for creating attractive icons, but good-looking anti-aliasing is rare. Notice how badly the anti-aliasing has been done around the generic jigsaw-piece icon used by RISC OS 4.0# Configure plug-ins (figure 7, on the right; the only part of this icon that I drew was the lipstick). It's basically a black and white icon with a few grey pixels inserted. The shadow is also poor, being just an area of solid colour. Compare this jigsaw piece with those in figure 2 to see how crude it is.

When judging anti-aliasing by eye, the best approach is to imagine how much of any given pixel would be covered by the 'conceptual line' you're drawing, and then use a grey pixel that's appropriate to the amount you judge (from white for none to black for all; or use a scale of shades between foreground and background colours).

Creating icons

Some people use ArtWorks to draw vector graphics and then scale the view down and take a snapshot. This can be effective, and does do your anti-aliasing for you. Alternatively, you could create a large bitmap picture and scale it down (using ChangeFSI, say), which will also produce reasonable anti-aliasing. But for the neatest icons with attention to detail in every pixel, it's hard to beat doing everything by eye in Paint, and this is what I usually do myself. Aside from the text in figure 8, all of my icons in figures 6 to 10 were created in Paint by eye alone.

Figure 8: I drew this icon for ErrorMon, a program published by RISC User magazine (11:6 disc). It looks as though it's designed in only 16 colours (like most other RISC OS 3 icons), but the additional colours available in the 256-colour palette are used in the warning symbol to shade some of the pixels, giving the impression that the edge of the magnifying glass is casting a shadow. Note also that the background has been made from the real text of actual error messages; they're too small to read, of course, but they convey an appropriate impression.

Figure 9: This icon is for a utility called Examine, which provides lots of information about Draw files. Obviously it's in the same style as the icon in figure 8, and demonstrates that even the simplest idea can be very effective. Here, the small-size version of the standard RISC OS 3 Draw file icon is used in the background, with a portion of the full-size file icon shown within the magnifying glass to give the impression of magnification. It's a 16-colour icon; 256 colours could have improved the shadow effect by darkening the red and blue lines inside the glass.

Figure 10: This may look like a haze of pixels, but it's actually a fairly accurate representation of the cover artwork of Acorn's RISC OS 3 PRM; it's surprising what you can do with 34�34 pixels and just 16 colours!