While there is an easy way to stop miscommunication with bad icons
Before cracking your knuckles and getting down on Illustrator, you have to remember that there are principles that should be followed with respect to icon design.
Though, more often than not, it’s easier to approach the design process by knowing what’s NOT working rather than what’s working.
To know what to take away than to put in is even more effective.
So we’re going to list down the 6 ways you are messing up your icon design:
1. You’re Not Considering The Icon As Part Of A Set
While you may only be designing an icon for one, it is vital that you picture your icon as part of a set.
Let’s take it from Yegor Gilyov of Turbo Milk: “If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities.”
When you make an icon and then later on decide to make an icon set, it will be harder to work again from the top and revisions will take longer than it should. Worse, you can’t even redesign because the icon is already being used or have been approved and you are required to produce more that looks like it.
2. You’re Not Thinking About Your Users
As mentioned in our other article, you must consider your audience when designing your icon.
If it’s for a small company then it must be catered to the users who are going to be exposed to it. It must not be complicated nor too simple or it might have different meanings.
For international usage, icons need to pay respect for cultural considerations. Different symbols project different representations and you do not want your message to get lost in translation.
A perfect example of this is the mailbox, while there are mailboxes around the world, it is much more preferable to use the envelope as an icon for mail since it is universally accepted.
3. You’re Cluttering Your Icons With Too Much Elements
As we mentioned, icons must be simple in a way that is easily understood.
But if you put too much in something that can be displayed so little, you may end up cluttering the very symbol of your brand. And that’s not good.
Users will have a hard time on seeing your icon (particularly older generations) and they will also have a hard time understanding what it represents.
So for example, you want to create an icon that supports the printing action, you don’t need to have an icon that requires 3 elements in them. You just need one: a printer.
The reason for this is that you don’t take away the focus of your users from your primary message. You only signal one.
This makes it clear and bold and you don’t ever have to worry if it’s recognizable when scaled too small.
4. You’re Repeating The Icon As An Unnecessary Element
If you’re creating an icon pack, then you may be tempted to re-use one icon as a complement of another.
For example, you may use the same icon for “save” and “save as”, but if you do this, you may end up confusing your users.
Make sure that when you design your icon, you go back to the purpose of the primary message.
Use the five following questions as a guideline:
• What does this icon represent?
• What is the primary message I want to convey?
• Am I using this icon uniquely to its primary message?
• What can I substitute it with so that I may use a similar look for another icon function?
• Have I repeated this icon or have I used it somewhere else before?
5. You’re Not Making Your Icons Uniform
Certain designers have a particular style when creating their icon designs such as flat or 3D, and as much as it is a pattern, it is also their signature.
See, when you encounter another batch of icons a specific designer you’ve been following has made, you’ll definitely know it was theirs.
Why were you able to recognize them so?
Because they were uniform.
Same logic goes for icon packs. One icon must not be separate from the rest.
You have to decide what style and appeal you’re going for. So if you’ve created an icon set that is mostly comprised of flat UI icons, then you have to stick to that style until the end.
You can’t make a flat UI icon pack and then insert an 8-bit icon the next, or a 3D icon with a shadow after that.
That leads to unnecessary confusion.
So peg down your style and if you haven’t decided yet, here are some sites that can help:
6. Overusing text in your icon design
Sure, texts can supplement your visuals, but when dealing with icons, text is not entirely necessary.
When Apple made their logo, you could tell from afar that it is Apple just by the way it looks. Same goes for Nike, McDonalds, Adidas and other big famous brands.
Some may be text-based like FedEx, but a lot of them bank on the fact that their logo or icon may be the only thing seen.
Particularly for a busy UI environment, icons have to constantly fight over the user’s focus. This is especially true for desktop and smartphone settings.
So, if you’ve been thinking of using texts, at least don’t use them fully. A good example of this is the new Adobe suite icons:
As you can see, Adobe Suite uses letters in their brand new icons, but it doesn’t fully state “Photoshop” or “Illustrator” in it. What it does is that it uses abbreviations: Ps for Adobe Photoshop, Ai for Adobe Illustrator, Lr for Lightroom and Id for InDesign.
Now that you know the 6 ways you are messing up your icon design, you can have more confidence that your icon will steer clear from ending up as a confusing symbol.
If you have comments, questions or suggestions, please feel free to write us below.
See you in the next tutorial!