10 mistakes in icon design
An interesting article from Denis Kortunov, about the main mistakes in the design of icons.
Criticizing someone else's work is always much easier than creating something cool yourself. But if you approach the criticism systemically, make a numbered list, prepare illustrations, then this will be a whole analysis! In my opinion, in the design of icons is a transition period. Screen resolution is becoming more and, therefore, the icons are increasing. But icons of 16 Ă— 16 and even smaller are still relevant. So, here are the main mistakes in the design of icons ...
# 1 Insufficient icon visibility
Sometimes within the same set there are too similar icons and it is very difficult to understand “what is what.” If you do not read the captions, you can very easily make a mistake and confuse the icons.
Icons from the Utilities section in Mac OS X. I constantly confuse them and run the wrong application.
The problem is exacerbated if the small size of the icon display is on.
# 2 Too many items in one icon.
')
The simpler and simpler the icon, the better. It is very desirable that the number of objects in one icon would be minimal.
But the designers of Microsoft, inspired by the new format of icons in the Windows Vista operating system, decided not to waste time on trifles and drew "all the money":
Each icon shows us a mini-story with a twisted plot. The only problem is that in small sizes it is absolutely impossible to understand what is painted. Yes, and on a large scale to perceive the icon is not easy.
# 3 Extra Items
The icon should be easy to read. The fewer elements on it, the better. It is desirable that the entire image be significant, and not just a part of it. Therefore, it is necessary to pay attention to the context in which the icons will be used.
Take for example a set of icons for working with the database:
At first glance, everything is quite decent.
But if in the application (or in a separate toolbar) all actions occur only with the database, then we can (and should) remove the insignificant part:
The meaning is not lost, but the icons have become more distinguishable.
Here is a real example of using unnecessary elements in the BeOS 5 icons:
Checkboxes are completely unnecessary here. By the way, why are they red?
# 4 No stylistic unity set
It is the general style that brings together several icons in the set. Combining factors can be: colors, perspective, size, drawing technique, or a combination of these properties. A designer can keep these rules in mind if there are few icons in the set. If there are many icons and different designers work on them (for example, icons for the operating system), special instructions are created. These instructions describe in detail how to draw an icon so that it blends harmoniously into the set.
A riot of styles in a shell32.dll file from Windows XP. This set of icons is offered by default to the user who wants to change the icon.
# 5 Unnecessary perspective and shadows in small icons
Progress does not stand still: the opportunity to use translucency appeared in the interfaces, restrictions on the number of colors disappeared, plus a fashion for three-dimensionality appeared. But did it not benefit? Not always! Especially when it comes to icons of size 16 Ă— 16 and less.
For example, take the application manager from GNOME 2.2.0 (RedHat 9):
The perspective in icons of such small size is completely unnecessary and even harmful.
But the application manager from Windows XP:
According to the standard icon in Windows XP put a two-pixel black shadow. But in the amount of 16x16 the shadow is too big and looks “dirty”. The Address book icon looks especially unfortunate.
# 6 Too original metaphors
The choice of what will be depicted on the icon is always a compromise between recognizability and originality. Before you come up with a metaphor for the icon, it is very desirable to see how it is done in other products. Perhaps the best solution would be not to invent something original, but to do it as everywhere else.
An example of such excessive originality can serve as a basket icon in OS / 2 Warp 4, which is not a basket at all, but a shredder.
Another problem with this shredder is that there is no generally recognized “ordinary” paper shredder. The image used is too similar to the printer with the octopus inside. Plus, it is completely incomprehensible how to draw a full basket.
# 7 No consideration of national and social features
It is always necessary to take into account who will use your icon and under what conditions. An important aspect is the national characteristics. Cultural traditions, surrounding objects, gestures - all this can be very different in another country.
Suppose we need to draw an e-mail application icon. It is logical to use real paper mail metaphors. For example, a mailbox.
Images are borrowed from the article about mailboxes in Wikipedia.
The answer can be found in the Icon Creation Guide for Mac OS X: use versatile and easily recognizable images. Do not focus on minor aspects of the elements. Example: for an e-mail icon, it would be preferable to use a postage stamp image than a hardly recognizable mailbox.
The idea with the brand is excellent, but the image of the eagle is an extremely controversial moment. Such a bird will not bring good news.
However, it is necessary to take into account not only national peculiarities. Let me remember a curious case. I needed a data filter icon, a metaphor for which is often a funnel, and it was drawn:
The client’s response was: “I don’t quite understand why you drew the filter icon in the form of a martini glass!”.
# 8 Images of real interface elements in icons
The Mac OS X Icon Creation Guide warns us: do not use real interface elements in the icons. But all in vain! For example, you can see the following icon:
You want to switch the radiobutton, and the whole icon is pressed!
Or here’s an interesting example from the OmniWeb browser interface:
Notice the “Previous” and “Next” buttons. A rare kind of buttons with captions below! Oh! And they are not buttons at all, but icons!
# 9 Text inside icons
This error most often happens in application icons. Indeed, the first thing that comes to mind is to make an application icon from the application logo. What's wrong with the text inside the icon? First, it is rigidly tied to the language and localization is difficult. Secondly, if the icon is small, the text cannot be read. Thirdly, in the case of an application icon, this text is duplicated as an application name.
# 10 Past Pixel
As a rule, this problem appears when drawing icons in the vector editor. In large size, everything looks beautiful and clear. But in reality, the icons are small and during rasterization, anti-aliasing “blurs” the boundaries of objects.
Source - http://turbomilk.ru/
Or from my blog - http://mmaxis.info/
Criticizing someone else's work is always much easier than creating something cool yourself. But if you approach the criticism systemically, make a numbered list, prepare illustrations, then this will be a whole analysis! In my opinion, in the design of icons is a transition period. Screen resolution is becoming more and, therefore, the icons are increasing. But icons of 16 Ă— 16 and even smaller are still relevant. So, here are the main mistakes in the design of icons ...
# 1 Insufficient icon visibility
Sometimes within the same set there are too similar icons and it is very difficult to understand “what is what.” If you do not read the captions, you can very easily make a mistake and confuse the icons.
Icons from the Utilities section in Mac OS X. I constantly confuse them and run the wrong application.
The problem is exacerbated if the small size of the icon display is on.
# 2 Too many items in one icon.
')
The simpler and simpler the icon, the better. It is very desirable that the number of objects in one icon would be minimal.
But the designers of Microsoft, inspired by the new format of icons in the Windows Vista operating system, decided not to waste time on trifles and drew "all the money":
Each icon shows us a mini-story with a twisted plot. The only problem is that in small sizes it is absolutely impossible to understand what is painted. Yes, and on a large scale to perceive the icon is not easy.
# 3 Extra Items
The icon should be easy to read. The fewer elements on it, the better. It is desirable that the entire image be significant, and not just a part of it. Therefore, it is necessary to pay attention to the context in which the icons will be used.
Take for example a set of icons for working with the database:
At first glance, everything is quite decent.
But if in the application (or in a separate toolbar) all actions occur only with the database, then we can (and should) remove the insignificant part:
The meaning is not lost, but the icons have become more distinguishable.
Here is a real example of using unnecessary elements in the BeOS 5 icons:
Checkboxes are completely unnecessary here. By the way, why are they red?
# 4 No stylistic unity set
It is the general style that brings together several icons in the set. Combining factors can be: colors, perspective, size, drawing technique, or a combination of these properties. A designer can keep these rules in mind if there are few icons in the set. If there are many icons and different designers work on them (for example, icons for the operating system), special instructions are created. These instructions describe in detail how to draw an icon so that it blends harmoniously into the set.
A riot of styles in a shell32.dll file from Windows XP. This set of icons is offered by default to the user who wants to change the icon.
# 5 Unnecessary perspective and shadows in small icons
Progress does not stand still: the opportunity to use translucency appeared in the interfaces, restrictions on the number of colors disappeared, plus a fashion for three-dimensionality appeared. But did it not benefit? Not always! Especially when it comes to icons of size 16 Ă— 16 and less.
For example, take the application manager from GNOME 2.2.0 (RedHat 9):
The perspective in icons of such small size is completely unnecessary and even harmful.
But the application manager from Windows XP:
According to the standard icon in Windows XP put a two-pixel black shadow. But in the amount of 16x16 the shadow is too big and looks “dirty”. The Address book icon looks especially unfortunate.
# 6 Too original metaphors
The choice of what will be depicted on the icon is always a compromise between recognizability and originality. Before you come up with a metaphor for the icon, it is very desirable to see how it is done in other products. Perhaps the best solution would be not to invent something original, but to do it as everywhere else.
An example of such excessive originality can serve as a basket icon in OS / 2 Warp 4, which is not a basket at all, but a shredder.
Another problem with this shredder is that there is no generally recognized “ordinary” paper shredder. The image used is too similar to the printer with the octopus inside. Plus, it is completely incomprehensible how to draw a full basket.
# 7 No consideration of national and social features
It is always necessary to take into account who will use your icon and under what conditions. An important aspect is the national characteristics. Cultural traditions, surrounding objects, gestures - all this can be very different in another country.
Suppose we need to draw an e-mail application icon. It is logical to use real paper mail metaphors. For example, a mailbox.
Images are borrowed from the article about mailboxes in Wikipedia.
The answer can be found in the Icon Creation Guide for Mac OS X: use versatile and easily recognizable images. Do not focus on minor aspects of the elements. Example: for an e-mail icon, it would be preferable to use a postage stamp image than a hardly recognizable mailbox.
The idea with the brand is excellent, but the image of the eagle is an extremely controversial moment. Such a bird will not bring good news.
However, it is necessary to take into account not only national peculiarities. Let me remember a curious case. I needed a data filter icon, a metaphor for which is often a funnel, and it was drawn:
The client’s response was: “I don’t quite understand why you drew the filter icon in the form of a martini glass!”.
# 8 Images of real interface elements in icons
The Mac OS X Icon Creation Guide warns us: do not use real interface elements in the icons. But all in vain! For example, you can see the following icon:
You want to switch the radiobutton, and the whole icon is pressed!
Or here’s an interesting example from the OmniWeb browser interface:
Notice the “Previous” and “Next” buttons. A rare kind of buttons with captions below! Oh! And they are not buttons at all, but icons!
# 9 Text inside icons
This error most often happens in application icons. Indeed, the first thing that comes to mind is to make an application icon from the application logo. What's wrong with the text inside the icon? First, it is rigidly tied to the language and localization is difficult. Secondly, if the icon is small, the text cannot be read. Thirdly, in the case of an application icon, this text is duplicated as an application name.
# 10 Past Pixel
As a rule, this problem appears when drawing icons in the vector editor. In large size, everything looks beautiful and clear. But in reality, the icons are small and during rasterization, anti-aliasing “blurs” the boundaries of objects.
Source - http://turbomilk.ru/
Or from my blog - http://mmaxis.info/
Source: https://habr.com/ru/post/25328/
All Articles