Designing Icons
--
The process, the do’s and don’ts
Icons or rather pictograms accompany us from the second half of the IVth millennium BC (as defined by the researchers). Pictograms were the first known writing system which allowed communication.
Today icons are an integral part of visual identities, programming interfaces, information systems, websites or mobile applications. Just as before, icons are kind of mental shortcut. Their goal is to improve fast identification of things / functions.
Designing a coherent set of icons is a process that should follow predefined rules. Here’s a list of steps which you can‘t forget when you’re designing icons.
Sender / Recipient / Context
Before you start designing icons you should consider who is the sender, who is a typical recipient, and whether you’re designing for the screen or for print. If the sender is a large company such as Google or Youtube I assure you that they already have created guidelines and you have to stick to it.
Knowing the context is critical. Without this basic knowledge about the environment in which icons will be used, you will be like a kid in a fog. If the icons are designed for universal purpose — it is worth considering designing two separate versions: one for print and another one for web.
An important aspect is also the recipient and his culture. If you are designing for a foreign customer, remember that gestures, symbols and traditions may differ from what is acceptable and recognizable in your country.
Make a mind map and define keywords
Determination of keywords for each icon is the foundation of the design process. You can check out dictionaries and synonyms for more references and get inspired. Try to find the perfect visual representations of these words or metaphors. Remember that the icon should be simple and recognizable at first glance.
Style
Icons usually complement visual identity, so their style is the result of earlier objectives. Today we can notice a few leading trends in
designing icons — flat, outline, skeuomorphism(imitating reality), 3D, long shadow, minimal and illustrative. The trend of maximum simplification of icons and return to the roots of visual communication (pictograms) develops most intensively since the departure from skeuomorphism.
Level of Detail
The next step to a well-designed set of icons is to select appropriate level of detail. Less is more, but too little details can negatively affect the recognition. On the other hand, the use of too many details is distracting and — as in the case of not enough details— can reduce visibility. Typically, in the case of icons depicting abstract concepts (eg. direction) the use of asymbol is a must, but when we‘re dealing with an object (eg. phone, headphones) we can go ahead and use greater realism.
Scale
There are many schools regarding scaling icons. One thing is certain — design at a random size is a bad idea.
What looks good in 32px not necessarily looks great in 512px and vice versa.
Remember that designing in a larger size and scaling down puts your icons in risk of losing details and thus readability. The best practice is to design icons in the destined size, but if you anticipate that there will be a lot of sizes, always start from the largest size and scale down.
Harmony
Icons undoubtedly need to work together and create one cohesive whole. Systematic work on the project provides a consistent end result followed by logic in a whole set. To unify created icons, select a few elements that remain the same: color scheme, perspective, size, drawing technique or line thickness. The best option is to choose a combination of these properties. Remember to use the same style throughout the entire set.
Light and shadows
If you use a light source in your set, be sure to use one direction and stick to it throughout the entire project. This way you’ll keep harmony between icons. The same goes for the shadows, which also shouldn’t be too large for small icons.
Perspective
The perspective of objects doesn’t need to be necessarily the same (though recommended). If you choose to design everything from one perspective — hold on to it. If you decide, however, on more perspectives — select two or three and design a certain number of icons to each perspective. This helps to maintain consistency throughout the set.
Differentiate
Avoid drastic similarities between icons. If there are too similar they might not be there as well. Make sure that each icon is different from the surrounding icons, and at the same time it cooperates with the rest. In the accompanying screenshot there is a problem with the small size — it’s very hard to see the differences between the icons.
Quality
To ensure good quality of your set work exclusively on vectors that can be scaled to any size and exported to any format.
Before starting work on your own set, we encourage you to review the work of this great icon designers:
We also recommend you to take a look at the blog of designer from Lithuania, Icon Utopia blog. Many beautiful examples and substantive content.
Stay tuned, guys! Very soon we’re going to share with you a list of sites with free icons to download and get inspired!
