If you’re just starting out with icon design, it can be easy to fall into a number of common traps and design mistakes. In this post I’ll discuss some of the pitfalls novices may face and how best to avoid and move past them.

Sizing

One common mistake beginner icon designers can make is to neglect proper icon sizing. It might seem obvious that to get smaller or larger sizes of an icon, a high resolution vector can just be resized and retain its clarity. However, this can lead to really messy results when resizing or magnifying your icons – think lots of pixel blur and pixelation. As icons are now used on a wide range of different resolutions, you should assume that your icons will not work at all screen resolutions.

Icon Sizing

(Source: http://mezzoblue.com)

This is particularly the case when it comes to Windows 8.1, wherein icon sizes play a really important role in the functioning of the main UI, or Apple’s operating systems, most of which have commonly used ‘magnifying’ tools. Many designers of course miss this major issue, content to just resize vector graphics to smaller sizes – which only exacerbates this problem. The only real way around this is to create size variations. It’s best to start with the smallest version and work your way upwards individually until your icon is rendered in all sizes and formats. It’s a long and boring process, but vital to the strength of your design work. Scaling is lazy and ugly!

‘Busy’ designs

Details are important to make an icon look sharp and crisp. But it’s easy to get overexcited, especially if you’re doing some good detailed work, and end up adding far too many details and elements. This makes icons look far too ‘busy’. The major problem with this is overcomplication: users struggle to easily comprehend what an icon means or what it is for, and it clutters designs that would otherwise be great. Older iterations of Windows were infamous for this, as were older iterations of OS X. As you add new elements, ask yourself: is this necessary to the functionality of my icon? It’s a simple but important question that some icon designers forget about.

Windows XP Icons

Windows XP icons: guilty as charged?
(Source: http://www.osx-e.com/)

Poor colour schemes

Coherent colour schemes are vital to good icon design for a number of reasons: to make your icons recognisably similar, to make them noticeable, and to shape the user’s response to your interface, among other reasons. However, novices can often fall into the trap of using bland or garish colours, inconsistent colour schemes, or colour schemes that are so common as to prevent the icons standing out from others. Many people accused the new iOS7 interface of this in particular – its colour schemes, while somewhat consistent in their simplicity, are certainly bordering on garish in many instances. Good use of colour won’t solve every design problem you have, but it definitely doesn’t hurt to acquaint yourself with the colour wheel. Experiment with different colour schemes to see what fits best with the client’s needs.

iOS7 Icons

(Source: http://hqwallpapersplus.com/)

Inconsistency

A common general mistake is inconsistency in design. This can range from a set of icons not suitably fitting with one another, to icons being too dissimilar once scaled or resized, or inconsistent use of style, scale, or shadows. When we’re talking about common design mistakes, what we’re really talking about is design inconsistency. Each icon obviously needs to have its own identity, but if you’re designing a set or collection of icons, they need to have a few things in common such as perspective or style (at the very least).

An example of inconsistency comes (again) from Microsoft in their Vista icons. With Vista, it’s clear they tried to make glossy but realistic icons. However, their seemingly arbitrary use of the shading and lighting really undermined the effectiveness of their designs. It’s not clear where the light source is coming from and it uses far too much contrast, making segments of the icons appear unnecessarily washed out where other parts are not. Is the light source raised directly above the object, or to the side? It’s really not very clear, and what may have been an honest attempt to add depth to the image has become overcomplicated and inconsistent. Virtual light sources can be a bit tricky to get your head round at first, but with experience you’ll soon realise how important they are in 3D icon design especially.

Windows Vista Icons

(Source: http://winsupersite.com)

Drafting

Perhaps the biggest reason we as designers fall into these traps time and time again is poor planning and drafting. You may be inspired by an idea and are itching to get on the computer and design it right away, but over-hastiness can be a huge error and leads to all the sorts of things I’ve discussed above. After you’ve discussed your plan with the client, it’s really important to design things by hand and explore all design possibilities before settling on a single design. Drafting is the most important part of any creative process, especially in any type of graphic design. Of course, just because one of the icons we’ve discussed above might be guilty of one or two mistakes doesn’t make them bad icons, it just undermines their quality. To avoid these mistakes and more, it’s important to have a clear planning and development process such as our design process infographic that you stick to when you’re designing icons.

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *