Before starting with the article, I just wanted to say how essential a great icon is for your visibility. The icon is the first contact between the user and your content. Furthermore, an icon is often representative of your work, if you’re willing to invest time and money in creating an awesome icon, there’s a good chance that you will have spent the same amount of effort with your content.
After my article on icons concepts and redesigns, I received a few emails stating that a good set of icons only depends on personal opinions. I do not think so. Even if there is always a personal opinion in design, there are still some standards to adhere in order to get a better result.
A great icon is representative of the content, it foreshadows the application. Why? Simply because it will be easier for the user to find the proper icon. This is one of the reason why it is a bad idea to use abstract icons. Even if it seems beautiful at first glance, this is not practical at all.
However, there are some exceptions. Indeed, it may be wise to have an icon of your company logo to strengthen your brand image, even if it does not represent your the content of your application.
Many image editors such as Adobe Photoshop provide a combination of vector shapes, raster layers and effects. Vector shapes give a better result, assets can be scaled up without loss of detail and edge crispness. Using vectors also makes it easy to align edges and corners to pixel boundaries at smaller resolutions.
Simple and Clean Icons
The idea is to get an icon that is readable at first sight and effortlessly. The less time is required to analyze the information, the more your icon is readable. This is why one of the most important rules in icon design is to keep your motif simple and to the point.
Here are some elements involved in simplicity:
- The visual composition of an icon must be made up of simple shapes (square, round). Learn more about composition on Wikipedia.
- If you are a designer, do not overdo it with too many perspective effects and complex shapes, otherwise your icon will tend to abstraction and will no longer be representative of a concept.
- Do not use more than three different colors. On such a small image, it is important to keep a consistency in color, otherwise it will become harder to differentiate shapes. However, a gradient can be smooth such as on the photos app of iOS 7.
- Use consistent lighting, reflections and shadows.
Not too many words
An icon is a graphical representation of a word or a concept. Words are in themselves an abstraction of a concept. This is why it is not recommended to mix these two representational tools, otherwise it will make your message more cluttered and harder to decode. Furthermore, when purchasing applications in a market, if the user must take between two and three seconds to read your text and understand your message, there is a good chance he does not take the time.
However, under certain conditions, it may be not such a bad idea to use words. If the text used on the icon does not exceed 4-5 letters (for example, an abbreviation) and if it is wisely include in the icon, there is no reasons to reject the emblem.
If we look at a whole set of icons, each icon should have a distinctive appearance which is related to its function. In this way, it became easier to differentiate them and associate them to the program.
Moreover, an ideal app icon reminds users of an app through shape, color, and texture. This is why it is so important to make unforgettable design.
But how to make distinct icons? You have to vary composition. Use different shapes, colors and lighting. As you can see on the picture below, each icon has a specific color, otherwise, it would be impossible to differentiate the iTunes from the music app and the calendar from the note app.
Colors – Tips and Tricks
- Light colors are difficult to see on small icons such as favicon. This is why I recommend you to use darker colors for these tiny sizes.
- Mood is also strongly conveyed by colors. Red is associated to the appetite, blue to work, this is why it is important to choose the right color for your icon (learn more on the psychology of color). Bear in mind, though, that colors have different significations depending on the location. Of course, there are often restrictions because of the company brand image. In which case, look at how you can vary shapes.
Shapes – Tips and Tricks
- Broad, bold filled-in areas look best in a tiny icon. Don’t be tempted to break up the impact by dotting bits of detail here and there. Not that you have much scope, but it is possible!
- Mood is forwarded by shape as strongly as it is by colors. Squares mean solidity. Arrow-like forms denote speed. If you want to learn more about this subject, I recommend you this article on the emotion of shapes.