DesignWebKit

How To Visualize a Good Icon Design

An icon is a small image, which represents an action that can be done or a thought process that can be undertaken. Sounds complicated… I know, but the idea behind it is simple, communicating with images.

When designing icons there’s a basic rule, the ‘K-I-S-S’ rule: Keep It Simple, Stupid. There are a few simple parameters to keep in mind, like for example, what your icon represents, the simplistic way to convey the idea, the size of you icon and so forth. Another thing you’d want to consider is that your icon should keep with the style of the overall application/device/OS that it’s going to be integrated in. Here are a few basic guidelines that will help you visualize a good icon design specific to your requirement:

Should Stand Out in a Band

Icons don’t work alone. You will never have one icon on the screen whether it’s a desktop, web application or device. Icons work together to depict all the possible options that can be taken. They all work together to represent a graphic interphase. As they work together, they need to be similarly designed so that they complement each other, but also be different, so that they depict their own action intelligently and be easy to tell apart.

Work With Your Size

When starting out with your design, keep in mind the size at which your icon will finally be displayed. It shouldn’t be too sparse ifit’s going to be slightly bigger, and should be cleaner if it’s going to be tiny. As a general rule though, icons should be small, as there is no reason for them to occupy so much screen space.

No Unnecessary Business

Icons should be simple. Remove all unwanted elements, like ‘ticks’ and ‘fancy silhouettes’. They add nothing to the meaning behind the icon and only further confuse the user. Also making an icon look good is fine, but not when it compromises with the user understanding it. Remove all shines and shadows if the clutter up the icon too much, this is especially true for small icons. Moving towards 3D makes them look messy!

Say No to Text

An icon should be universally understood and language independent. Adding text inside it makes that point moot. Secondly, if the icon is made smaller, the text is almost impossible to read.

These are just a few pointers that one should keep in mind when going for icon designing. There’s a lot of help available out there, so be sure to run a google search on the matter before starting out!

What’s your Perspective?

Where are you looking at your icon from? Straight up, down below, or higher up? If you’re going to work with funky angles in your icon, then be consistent with said funky angles. All your icons should have the same viewing angle. Remember, they’re individual commands, but they’re part of the same interface that you’re using to communicate with your computer… and keeping perspective common maintains consistency. An interesting way to use perspective is to use it to identify different kinds of icons, there are desktop icons, icon for apps, games, toolbars… etc. If you’re going to design an OS, changing the perspective slightly for each one could be an interesting approach.