Useful Icon design lessons and tips

Each time we see a computer, a washing machine, a cell phone, or whatever artifact that needs a system for us to interact with, we see icons. Icons are a predominant and essential element in any user interface, and as such, their design must take care and proper knowledge. Icon design is a compromise between clarity, aesthetics, and usability. We are going to list for you, an essential guide for any designer who wants to crash into this crazy and fantastic industry. DO think of icons as a part of a system Icons are not conceived as individual works. No matter how well made, the validity of an icon is not in its individual design, but rather in its effectiveness as part of a system. When you approach Icon design, you must take into account where they are going to be placed. They must be clear and harmonious within the general design, feel and purpose of whatever project they are going to be put in, be it a website, a word processing application, or a Mp3 player. Grungy icons will not be very effective inside an “aqua” style interface, and maybe chrome sharp symbols ala “Metallica” logo won’t fit very well in your cute baby product website. DO stick to the essential and keep it simple In icon design, it’s all about the metaphor. Reading some essay on simple semiotics won’t hurt, but above all, you have to nail the essential characteristics of your object, reduce the idea only to it’s basics so the icon would be immediately recognized. In other words, you must be… and pardon the redundancy… ”iconic”. What makes a home… “home”? is it the door? the porch? or the triangular shaped roof? Could we symbolize “home” with any other object besides a house? What makes a film camera recognizable? The lens? The matte box? The film load? Always simplify your objects to their essential forms and shapes. Think what makes your object universal. DO plan out your design process Having a carefully thought out designing process is the mayor key to productivity. Beginning your design directly in Photoshop may not be the best way to go. Ideas flow more consistently as less interference is put between your thoughts and your hands. I’ve always thought that computers are like oil painting; just finishing tools. To make changes is certainly possible at those stages, but it’s hardly practical. Always start out your designs drafting with pencil and paper. Or on a marker board.  Choose whatever tools can turn to be the fastest shortcut between your brain and fingers. The less learning curve that tool has, the more direct the communication. Draft at first without prior research. Let’s just see what’s inside you in a raw stage. Notice these days that design is becoming more and more homogenous because everybody starts from the same references. Millions of designers type “futuristic building” in Google and begin to work on that base. It’s kind of becoming a “dog chases tail” situation where you get inspired by your neighbor and your neighbor gets immediately inspired by you. That kills creativity. No wonder why there’s no more Michel Angelo’s around. Draft at first from what’s inside your brain and heart. Then begin a research phase. Compare, contrast and nurture your early drafts. Then polish those drafts a bit and present them to your client. Only then is it recommended to turn out to you trusty and all powerful Photoshop or Illustrator. DO consider national and cultural differences Many blunders can me made if you don’t consider correctly the socio cultural context of your audience. Cultural identity is essential to achieve an effective communication with your users. A British phone booth might not be the best way to depict a phone or a modem. A hamburger could not be a wise choice for a “food” icon for a business application in Iran. You have to be very aware of context and adapt your ideas to your target. DO design your icons so they fit in various projects When creating icons that are not intended for a specific need, keep in mind that it’s much better to create clean and basic icon sets that can be versatile enough to fit a broad range of applications. Don’t follow trends, just aim to a style that can fit anywhere. DO design your icons differently for each size As you all may know, Icons come in various sizes, from 512x512 to 16x16. Of course you have to use the same basic shapes and colours for every size, in fact, you have to design your icons so they work at large formats as well as at small sizes, but your approach when making the big versions can’t be the same as for the tiny ones. You have to strip off elements as you go down in size, only keeping the essential distinguishing characteristics all the way. If you stuff every single detail of your fantastic 512 icon into its little 16x16 counterpart, the only thing you will get is a blurry dirty mess. At the 16x16 it’s also important to change the perspective depicting your icon frontally. This is why right from the beginning, you have to create a icon with a powerful and distinctive design so it survives the removal of adornments at the small versions. DO use a consistent light source Take into account the general light setup that your application or website is using, and stick with it all the way through. Light, reflections and shadows of all the icons in a set have to be exactly the same, otherwise the icons become almost useless. Changing the light source, or combining different shadow positions along the icons of a same set is a huge telltale of unprofessionalism. Be wary of the system in which the icons are going to be placed. Windows vista and Snow leopard have very different guidelines for light and shadows. A Samsung T10 player has very different icons than an ipod touch. My dishwasher is different that yours. Hmm. You get the point. DO create your icons in vector format Vectors are ideal tools for icon creation. They are versatile, manageable, and scalable. Every element in a vector image is the result of mathematical equations, thus everything can be edited with ease at anytime by just changing parameters or moving slide buttons with no need of redrawing. How cool is that? Well, not as cool as it sounds. You can’t live on vector alone when making icons. You can benefit from the scalable nature of vectors, outputting from vectors the large versions, like 512 down to 128 or even 72. But from there, your gorgeous vectors downscaled look dirty, blurry and simply terrible. There are mathematical reasons for this, that you can check out on our past article Vector vs Bitmap for dummies. DO create your icons in bitmap format Sounds contradictory? Nah. For professional icon creation, you have to get used to a workflow between vector and rasters. Icons require very small scales that vector graphics can’t manage to reproduce crisply when rasterized. If you want to make a professional well paid icon set, you positively, definitively have to redraw your icons at their small versions. After all, icons are bitmaps aren’t they? DO use distinguishable shapes and contrasted colours Icons live on top of heavy backgrounds. Everything is happening just behind them, and they necessarily have to stand out to be useful. A successful icon has to have a strong color palette like the Firefox icon, or if you go for pale colours, a contrasted palette like the Safari or the TextEdit icon is ideal. An interesting shape, gloss and highlight are also elements that reinforce the object and make the user want to click on it. DO create consistent icon set styles Lighting and Perspective certainly contribute to the style of an icon, though there are many other factors that can contribute to the style as well. If you're trying to fit your icon into a grunge-style Web site design, you'll likely be adding texture to the icon's design. DO make good use of perspective Placement is a decisive factor to take into account when designing these wonderful little critters. It gives the proper illusion of ground, and makes Icons mingle elegantly on the interface. Again, each system has their own guidelines. Apple says their dock icons must be as if laying down on a desk, and seen from a frontal high angles camera. On the other hand, Microsoft guidelines say that windows vista icons should be “seen from a low birds-eye view with two vanishing points” DON’T design a set without sufficient differentiation An icon must be recognizable without any legend. If you make all your icons alike, the whole point of doing icons is missed and turned useless. If your users have to stop and read the legend to understand what are they clicking what’s the point of designing an icon? This is one of the most important issues you have to think ahead when planning your sets. DON’T use overly original metaphors Icon design is a compromise between usability and aesthetics. Icons have to be universally understood, and that is the most important single factor you have to think of. Don’t matter how cool your icons look like, if anyone can’t even tell by intuition what they stand for, you are going the wrong path. DON’T use text inside icons This is a tricky point. There are tons of icons that successfully use text, but it’s done in extreme cases and with thoughtful care. Always try to avoid text by replacing the idea conveyed by the word with a proper symbol or metaphor. But if you still ant’s nail it that way, then use no more than 3 or four characters and play with high contrasted shapes and colors. DON’T use perspective and shadows in small icons Perspective and shadowing are bad voodoo for icons at small sizes. They make the icon unrecognizable. Try to avoid a all costs. Bad gorilla! (ever saw the movie “Congo”?) DON’T include too many elements Hate to repeat my self, but again, I have to pinpoint that the rule of thumb of icon design is the simpler, the better. Keep the number of objects in a single icon to a minimum. Always! Did you know icon add-ons bring bad karma? Try to avoid using add ons for identifying functions, and push yourself to design individual unique icons for each action. DON’T design your icons with uneven ratios Your icons always have to be designed within a square. Not a rectangle. Your canvas real state is really scant, so you have to protect each pixel as water. Don’t waste your space, rotate your objects so they fill the whole diagonal of your canvas frame. Brought to you by iconlibrary, the iconshock blog. Recommended reading How to use icons to enhance your design Icon tutorial: Briefcase for windows 7 icon tutorial: Speaker icon with illustrator Apple Human Interface guidelines. Windows user experience interaction guidelines.