Icon Design: Avoiding Common Mistakes.
We explore icon design since year 2004 and it was a thorny path to success through mistakes and failures. Furthermore, we noticed that almost every new designer in our team makes the same mistakes in process of learning the icon design. That’s why we decided to write a kind of checklist for designers to avoid mistakes in the future.
Normally, we split the icon design process on several stages: the search for metaphors, creating sketches, choice of software tools and, indeed, the process of drawing and reducing icons. And on each of these stages designers make mistakes, and often the same.
Intuitive metaphors
Wikipedia says: “Icons were first developed as a tool for making computer interfaces easier for novices to grasp in the 1970s at the Xerox Palo Alto Research Center facility.”
This means that the icons are already have more than 35 years history, and of course have established images and metaphors.
But how do you know which of the many metaphors is most widespread and more understandable for users?
To avoid mistakes in the choice of metaphor for the icons, we encourage designers to explore the history and traditions of user interface design. Thanks God that there is such a wonderful resource as Graphical User Interface Gallery. All user interface and icon design history is tracked there.
If you create “Save” or “Print” icon boldly draw Floppy disc and Printer, but if you need something uncommon use your imagination backed up with worldwide knowledgebase – Google. Use uncommon metaphors if you want to create something original and outstanding but keep in mind the functionality of the icon.
Here are some great examples of icons using uncommon metaphors. Lets illustrate the using of it on example of CD/DVD burning applications.
Disco (CD/DVD burning application) icon uses a pun in its metaphor. Here you will not find the usual image of a burning CD, instead we see a disco ball, wrapped with stylish black fire-shaped ribbons. A masterpiece.
Nero Burning ROM is also a pun and also a popular. Everyone knows a legend of the Emperor Nero, who set the Rome on fire. “Nero Burning Rome” became “Nero Burning ROM” that means software for CD/DVD ROMs. The icon represents a coliseum, a symbol of Rome:
The last example for today will be from underwater icon set from Turbomilk. CD burning process is illustrated as frying fish on a pan. A very creative example.
The metaphors used on examples above are uncommon but easy understandable and outstanding.
Icon is a square.
Before you begin to create the icon, you need to clearly understand that the canvas you have for it is a square, so the icon should use the space alotted to it for maximum.
This is almost the most important rule in icon design. Here is the illustration of what happens if you don’t follow this basic rule. On the left we have an icon, which occupies the largest possible space of a square, and on the right – using only a part of it. Compare the results.
To avoid this mistake you must create the perspective and appearance of the image to fill the largest possible space of the canvas. Sometimes we need only rotate the image. You can avoid this mistake on sketching stage.
Keep it simple.
Icons, in most cases, are very small images, so a good icon must illustrate its idea in the most concise way.
Despite the fact that modern operating systems allow the use of a sufficiently large icons, we recommend that you use as little as possible elements in the icon to ensure the best they can be perceived by users.
This fact can be easily illustrated with the following example. On Google we searched for Charts icon and found a lot of good and, of course, not very good example. The icon on the left is well drawn, has good perspective, and fills the canvas square. What’s wrong? It is overcrowded and has too many elements on it. The yellow rectangle does not illustrate any idea and can be discarded without loss.
The icon on the right looks clean, simple and perfectly illustrates its idea.
It should be noticed that overcrowded icons are often found in operating systems. Don’t take this as example; try to do better and to convey the idea of icon with fewer images.
The following is a vivid example - icons from the control panel in Windows Vista.
Smaller size – less details
Follow this simple rule, and you will be happy. The icon should be recognized and understood by the user, even in very small size.
Therefore, each smaller icon size should be completed by hand. Reduce the image detail, and sometimes even sacrifice some parts of the image in order to preserve the recognition icons.
Here's example of icon which was automatically reduced to smaller sizes. As you see in smaller sizes icon parts are overblurred and can't be recognized by a user, although in big sizes all parts of the icon can be easily recognized.
In contrast to it - an example from our portfolio where each icon in smaller sizes was completed manually with keeping the icon idea.
.png)
Icons for interface, not vice versa
Always keep the style of the platform, for which you draw the icons. If style is not specified in guidelines of an operating system or interface - develop it yourself, but remember that the icons do not exist separately from the interface, they merely supplement it.
Create icons for the interface so that they become an integral part, a single whole.
How do you think a Windows XP icon will look on MacOS desktop?
The answer is obvious - as a white crow. Similarly a Mac icon will look on Windows XP desktop.
Add new reply
Categories
Archive
Subscribe
RSSThis blog is about icon design and interfaces. Here we observe and analyze latest trends in visual interface design: write articles, announce new projects, review books and websites. Moreover, you can find a lot of exciting links and, course, the hottest company news.
