Whether you’re a seasoned designer or a complete novice, we can all fall foul of design mistakes now and again. In this post, Creative Freedom takes you through the top 5 biggest icon design mistakes. These are the most common mistakes that designers of all stripes sometimes find themselves making.
1. Too much going on
Detailed icons look amazing and you encounter lots of them on portfolio sites like Behance and Dribbble. However, they rarely make an appearance in actual projects. This is partly because few want to pay for the time it takes to draw them, but mostly it’s down to how hard they are to decipher. The more detail you add to an icon, the longer it takes a user to understand the meaning. Regardless of how much they might like the art, it’s making the product harder to use.
Great icons should always tell the story as succinctly as possible. The designer’s job is to inject aesthetic brilliance without muddying the waters. A balance needs to be struck.
There is usually an historical anecdote for every occasion. There are a number of theories on how the U.S. Army Willys MB got the nickname ‘jeep’. My personal favourite is an abbreviation of ‘Just Enough Essential Parts’. It is also a great philosophy for icon designers. It’s something we touched upon way back in 2014, in the post 5 Common Design Mistakes for Novice Designers to Avoid:
“The major problem with this is over complication: users struggle to easily comprehend what an icon means or what it is for, and it clutters designs that would otherwise be great. Older iterations of Windows were infamous for this, as were older iterations of OS X. As you add new elements, ask yourself: is this necessary to the functionality of my icon? It’s a simple but important question that some icon designers forget about.”
2. Not planning for scalability
Understanding how and where your designs will be displayed is something you need to know from the outset. Sometimes the client isn’t sure or doesn’t even fully understand the ramifications of icon sizes. You will definitely come across a client at some stage who won’t understand why you can’t recreate the beautifully detailed 48×48 pixel examples he loves, in the 16×16 pixels he needs. Part of your job is to anticipate these kinds of issues and educate your client on the limitations certain sizes have.
Sometimes you will have to physically show the client what you mean just to help demonstrate the problem but at least mentioning it at the start could save you wasting time later on.
3. Assuming SVGs will scale perfectly
Scalable Vector Graphics are a great way to deploy icons and web illustrations. Because they are a vector based format instead of bitmap based (like JPEG, GIF and PNG), the file sizes are usually smaller but can scale up to any size if designed well. However what they will not do is scale down beyond a certain point. If you have enough detail, even in an SVG it is not going to look great at a small size like 16×16 pixels.
If your client wants an icon that will scale from 16×16 up to 256×256 for example, it is worth doing a little experimentation early on to see the kind of line weights and detail that are going to work at both sizes. Sometimes you have to bite the bullet and create a simpler design or thinner line weight for 16×16 pixels.
4. Not understanding the intended user
One of the gravest mistakes a designer can make is to not understand the intended user. You might be thinking that using a specific shape or object is the right way to go, but always consider who this icon is aimed at. Will they understand it, will they see what you’re seeing? Ebrian Acebedo of Naldz Graphics writes:
“This is very important because if you did not take into account the people who will use your icon, then it might give a different interpretation to them. Try to look into the cultural traditions, gestures and symbols used in a particular country. There are differences from every place. This can help you to have an icon that can be easily recognised.”
In most cases sticking with recognised standards will get you through but asking the right questions at the start of your project will always save you time.
5. Straying from standards
Originality is to be encouraged, but when designing an icon, being too original can actually be detrimental. Most icons have been drawn before. Occasionally truly unique concepts need to be created for a project but the majority have been done to death already.
When planning your icon metaphors start with a Google image search and check out the existing material. A lot of commonly used icons will follow one or maybe two standard designs. There is no point re-inventing the wheel. Use a metaphor that people are familiar with, such as the back of an envelope for email, or a cylinder for a database. This job is about making something quick and easy to understand – looking great comes second.
The only time I recommend avoiding a standard icon is if the user base is so familiar with a non-standard metaphor that you risk confusing them by changing it to something logical! However in 99% of these cases I would argue it is worth pushing through a standard metaphor so life is made easier for all the new users your client is hoping to sell to with their gorgeous new software.
6. Using text in an icon
It can feel like the right choice to use text in an icon, especially if the metaphor you need to describe is original or complex. This is almost always a mistake. Firstly, text can impede localisation, and if you’re looking to make that icon global it’s a real hindrance to success. Most importantly, if your icon is going to come in a range of sizes, the text is just going to deteriorate into an unreadable blurry mess at smaller sizes.
If you absolutely have to use text in an icon (and the only time you have to is if a client is holding a gun to your head!) it needs to be 2-3 characters maximum. If the icon is going to be displayed at 16×16 pixels, don’t try and use a font because it won’t look sharp. You will need to draw the text by hand to make it crisp and legible enough.
7. Using an automated tool to create your iOS & Android App icon files
It is very common these days for an app developer to ask me to supply them with the App icon artwork in 1024×1024 pixels only. When I tell them I have already created all the individual sizes pixel perfect, they often ask me why I bothered as their ‘software’ creates all the sizes they need on the fly.
The clue is in the phrase ‘Pixel Perfect’. Unless an icon has no straight lines in it there is no way it will scale perfectly in all the different sizes an App may need. This is especially true for the arbitrary dimensions iOS requires these days. I always redraw each icon at the size it is required to be, minimising any blurring caused by the scaling process.
If your icon is full of curves you might get away with automated scaling but if you have lots of horizontal and vertical lines it will start to blur.
Some time ago one of our designers, Tanya, wrote a post comparing various free icon maker tools and showed how manual scaling by a designer always works the best.
Need new Windows desktop icons?
You developed great software but it needs to look the part too
