Icons are an important part of any website because they improve the user experience by increasing the navigability and level of interaction that’s possible on a website. This is why it is necessary to ensure that key principles are adhered to during the process of icon design.

Poorly designed icons on a website can adversely affect the overall efficacy of a site’s design. Thus, to avoid owning a website with poorly designed and ineffectual icons, you need to avoid making the following mistakes during the design process.

1. Not keeping the Target Audience in mind

Considering the fact that the icons you are designing are meant to be used by a particular audience, it is only reasonable that the icons be designed to best suit the convenience and needs of the said audience. If icon design is being carried out for a small company’s intranet, it should no doubt bear features that are distinct from the sort of work you’d do for an international e-commerce site.

It is also important to always keep in mind the conditions in which your icon design will be used. For example, if designing icons for a website aimed at an audience with a foreign culture, elements of that culture need to be taken into consideration because certain colours and symbols that mean good in your culture might mean bad in the audience’s culture. So rather than impose your ideas on your audience, attempt working from their perspective instead.

2. Not researching properly

Before beginning the icon design process, you need to carry out a certain amount of research in order to determine what sort of designs will best suit the website (or other platform) you have in mind. The research process will involve considering what will be the best ways to represent the icons and what form will best appeal to the target audience. Icons will be less effective if they are easy to use but unattractive, same as if they are attractive but uneasy to use. Thus, research to discover what will make an icon work best for your given task. Also, your research must guide you on a path to developing an icon design that will complement the website the icons will be used on. Features such as the colour, graphic look, and perspective of the website should all be kept in mind.

3. Failing to tackle Icon Design in a Holistic manner

Icons need to work hand in hand with the graphic system they are part of. It doesn’t matter if the icon will be used on a website or on a desktop application. No matter the graphic system, the icon needs to blend in and work in harmony with other elements of the graphic system. Going about an icon design without aiming for it to work harmoniously with the system as a whole can lead to user interfacing as well as user experience issues. Thus, be sure to evaluate an icon design in relation to the graphic system that it’ll be applied on. The end goal should be to have each icon stand out from surrounding icons and yet still be able to work together as a whole. Redesign will likely be inevitable if you fail to plan from the beginning how your entire set of icons will effectively work together.

4. Not considering size of the Icon

Depending on what your icon design will be applied on, you need to tailor its size to suit it. The one size fits all approach doesn’t work well when it comes to icon design because what might appear sharp and clear in one scenario might end up as blurry in another instance. Thus, be sure to properly scale your icons during the design process. Typically an icon should possess a base design during the initial design phase, but as you progress, each output size requires its own optimized size design.

If you are using Photoshop for your design, you can use the Icon Builder add-on. If you need some help then why not take a look through our portfolio and get in touch?

5. Making icons too complicated

If you can, avoid the temptation of becoming too illustrative with your icon designs. A certain degree of realism can make an icon appear more interesting, but if the complicated design eventually interferes with the functionality of the icon, then its beauty is all for naught. The best icons regardless their beauty always function smoothly, simply and effectively. “Overcomplicating an icon design by excessively illustrating an icon or adding too many aspects into the design, can lead to results that negatively affect user experience,” says Brendan Wilde, Digital Head at Discount Domains.

6. Text inside icons

This mistake is most common among application icons. Having a text inside an icon impedes localization because it is directly language-related. Also, it might be impossible to read the text in instances where the icon is small. There’s also the issue of repetition in the case of application icons because the text in the icon is often repeated in the application’s name.

7. Inconsistent shadows, lighting, and reflections

You risk losing the integrated design of your icons if you apply a light source that comes from various directions. Thus, be consistent by sticking to one light source angle. Also, your icon designs lighting, shadows, and reflections need to be consistent with that of the design the icons will be placed in. If the design of the website or application design clashes with the light source of your icons, your work risks looking ineffectual as well as unprofessional.

8. Icons not sufficiently differentiated

Icons looking too similar can lead to confusion for a user. Thus, be sure to differentiate between icons by adding distinct elements or colours. But be sure to avoid an icon sticking out like a sore thumb among other icons. This is because no matter how different an icon is from others in its set, a degree of uniformity is still required. That is, while being different, icons still need to complement one another.

Our expert icon designers are available if you need some help. Get in touch today!