Talking about icons

When I was making my icons, I looked at a lot of existing ones for inspiration. Also to steal. I've liked these cute little symbolic graphics ever since I first saw them in Diablo 2, and so I thought I'd blather and over-think them a little. Or at least, the ones whose icons I can easily gaffle from the web.

Diablo 2's icons are all silver silhouettes on brown. They're made to look like they might actually exist in the world as glyphs. There's drop shadow and texture, and the silver symbols don't touch the edge of the glyph plate.

In the game these icons are displayed at a fairly large size, and with few on screen at a time, so they can get away with a lot. And yet they're pretty abstract. This means that while you may not know what a given glyph is meant to represent, you can still recognise it pretty easily in a crowd.

I think that the texturing actually harms the readability of these icons. In areas of high detail, the grey lines on the white confuse the shape slightly. Very visible on the second glyph on the bottom row.

World of Warcraft. Warcraft 3 had almost exactly the same style icons, but they mainly portrayed units and are less interesting to me (though most of them did get recycled into WoW. More on that later).

These icons are actually small illustrations. The icon frames are like windows onto a larger scene, unlike the or symbolic Diablo icons. They also use strong colours and high contrast to make the icons even more distinctive from each other. Necessary, since WoW gives you a bar of relatively small icons to select from and it's easier to pick out colours than shapes at a glance.

This small display size does mean that a lot of the detail is wasted in play and you come to rely on recognizing the colour and rough shape of an icon, often with little thought to what it's a picture of. Still, if you take care to look they do work to illustrate the skill in a way that the Diablo icons don't.

Another problem with these illustrative icons is that they're harder to make. As a result, WoW re-uses a lot of icons for multiple skills and/or items. It's simply too much bother to commission a new piece of art for every single new ability.

Guild wars. Like World of Warcraft, these are fairly illustrative. They have a softer look, less cartoonish but not significantly less stylised. Guild wars also likes to use graduated fills or textures as a backdrop while WoW usually prefers featureless black.

Something Guild Wars does with colour that WoW doesn't, is that each class's skills have a unified palette. If you see a cyan-on-purple icon, you know it's a mesmer skill. Green and chestnut brown = hunter. Like WoW's, you tend to focus on the pattern and colour at display size rather than looking at the illustration, but the unified colour scheme means that your skill bar is cohesive and attractive to look at. Since guild wars characters have access to skills from two classes, this also helps distinguish between them on the skill bar.

Despite Guild Wars' icons being just as complicated as WoW's, it doesn't repeat icons like WoW does. Unfortunately they've chosen quantity over quality. While a lot of the icons, especially the ones from the basic game, are very striking and attractive, others are very obviously under processed photographs. The fourth icon on the second row is a particularly bad example.

When I played Demigod recently, I found its icons particularly problematic. They're fairly attractive illustrations and a unified colour scheme across all of the skill icons makes them pleasing to the eye in a group. Unfortunately they're just far too detailed and with far too little contrast.

On the character's skill bar, displayed at roughly this size and with only four icons to choose between it's no bother selecting the correct one. On the leveling-up page though, they are less than half the size they are here they all become identical brown blurs. You actually have to memorise the position of the skills you want to buy and check the tooltips since the icons are almost no help as reference.

As you can see from my previous post, I decided to go with a stark Diablo-like style for maximum contrast and readability, though my icons are also a little more illustrative than Diablo's glyphs. You can also see where I stole the dummy person silhouette idea from. While I do plan to use colour, I'm following Guild wars' with a very limited colour palette for maximum clarity and also using that colour to convey other information.

In all honesty, my options were also fairly limited by the fact that I lack the ability to draw proper illustrative pictures, but I don' think I'm missing out on much. To my mind, flat high-contrast shapes are the way to go. Readability before illustration. Also, the simplicity of these icons should make it relatively quick easy to come up with a large number of them, hopefully obviating the need for repetition or bad photo manipulations.