When I was writing the Letchworth Beer Festival app I knew I had to have visual cues to aid scanning the long list of beers and ciders/perries. Failing a to find any free icons within the same set, I turned to Inkscape and the Tango guidelines. Here are my personal guidelines that I have used:
- Resize the document to the final size in icons – you can easily review the generated PNG. And it’s a vector, so if you want it larger then just do so in a new and larger document.
- Keep things simple applies here as the smaller they get, the icons lose their details but the user still needs to recognise what it is. Thick-ish bold lines and simple shapes are key.
- If the icon set represents a ‘type’ or well-defined option, try to restrict the colour palette. I did used the restricted Tango palette, but the each of the icons have an obvious main colour – this helps to ease scanning the list (I’d hate to do ‘pyder’ – a combination of apples & pears!)
- Skip the bottom surface shadow when you are using them in a list that has a ‘line break’. This is a personal preference as the line denotes a division between items. If I styled the list without them I would probably have the shadow to enforce an ‘invisible line break’ between items. But since this is for a small screen, a proper line is more user-friendly.