In today’s article, we will analyze the typical mistakes that even professional design agencies sometimes make when creating icons for a website or mobile application. In this article you’ll find tips and techniques that will help you avoid these common blunders.
What Are Icons?
An icon is an element of a graphical interface, a small picture representing an application, file, window, function button, section, etc. Usually, when you click on an icon a particular action is performed. On websites, the icon is often located next to the link and often visually characterizes the link’s contents.
These graphical elements were invented in 1970 at the Xerox Research Center. Initially, they were intended to simplify interactions with the computer for beginners.
Now, icons are actively used in applications and interfaces, as well as in web development. Icons can now be found on almost every web resource, so you need to know how to design them the right way.
Common Mistakes When Designing Icons
These flaws can be easily avoided for the sake of improving user experience. An experienced UX/UI design firm would advise you to be cautious about the following:
Icons Look Too Much Alike
Creating icons that are too similar to each other can confuse the user. For example, using the same template can embarrass the client, and the problem becomes more relevant if the icons are too small.
Graphic Overload
Remember one of the main principles of UI design: “the simpler, the better.” It would help if you tried to use it everywhere, including when creating icons. Sometimes designers overdo the design by drawing icons with too many elements. This complicates the perception of the icon, especially if they are shown on a small display.
For example, if each icon also shows a checkmark or other graphic elements, it complicates the perception and creates cognitive overload. Try to draw icons that are simple and concise, while not making it lose its meaning.
Different Icon Styles
When icons have different colors, perspectives, sizes, and drawing techniques outside, it isn’t enjoyable. Users do not like colorful websites, icons, or fonts because they are distracting. Create custom designs for icons that are minimalistic and informative.
Using a Big Shadow
Applying too much dimming makes the icon look dirty, especially if the small display mode is on. When adding additional effects, do not forget about the convenience of the user.
Tip: Check the display of your icons on small, medium, and large screens, so you can understand if there are problems anywhere before you release the product.
Inexplicable Images
It is recommended to follow standard techniques when creating an icon. Originality is good, but in moderation. Sometimes it can happen that the user does not understand what they are supposed to do. You can also include the inscriptions; they should be as clear as possible and explain what is in front of them.
Add Text to Icons
Text in icons was popular about 15 years ago, but not today. This trend was abandoned due to difficulties in localization and poor readability, which arose if the icons were too small. Also, the text in the icons duplicates the name of the application, and that is an example of unnecessary information that overloads the user’s brain.
Note: Text in small quantities can sometimes be okay. For example, when creating an icon of a banking application, you can write the name of the bank.
Icon-Generating Services
If you need an icon as soon as possible or would like to make a prototype to show a client, use online icon generators.
- Iconsflow allows you to create personalized sets of icons and export them in good quality (SVG, ICO, & PNG). The main advantage of the service is the presence of two editors: the main one where you can select the palette, style, and effects are selected and form the editor, where you can change the current form or draw a new one. If you have already created the icons in Illustrator, just load the SVG files and experiment with different backgrounds.
- Using FlatIcons, you can create a flat icon (in a flat style) based on ready-made templates. Allows one to set sizes, choose a vector pic, and the main background (circles, rings, rectangles), change the color.
- The Launcher Icon Generator project is free and is more suitable for experienced designers. This online icon editor allows you to upload images and add text to them. The service contains such settings as indentation, shape, color, or transparency of the background, scaling, and some more additional effects.
Conclusion
Try to draw the icons so that they are:
- Understandable – Not too similar to each other, clearly distinguishable at any distance, causing clear associations. You can use a mail envelope or mailbox for mail.
- Stylish – Try to follow trends without adding text to icons or huge shadows of 3-4 pixels.
- Convenient – Choose the right size, so that the icons can be easily reached.
Using these tips will allow you to improve user experience and increase the number of people using your application.