31/03/2010 - Blogger.Iconshock

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.
Design as a whole-Iconshock-icons
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”.
Keep it simple-icons-iconshock
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.


31 Responses to “Useful Icon design lessons and tips”

  1. SherwoodNo Gravatar
    March 31st

    Good article, I don’t see me making any icons cuz I’m still working on the “clock” tut you posted before, hehehe but if I try anything harder, I’ll keep this in mind! Thanks

  2. adminNo Gravatar
    March 31st

    jeje… great sherwood, keep designing icons !

  3. Jason CarboNo Gravatar
    March 31st

    (Sorry for my bad english)
    Good tips realy, i’ll try to apply them all, and i think in another tip, a common issue over internet, “Icons are Icons, not a Logo”, many people uses Icons as Logo, this is a bad usage of a icon. (i think)

    A Logo can be “iconified”, but a Icon can’t be “Logo-ified”

    (Good Español)
    Muy buenos Tips, trataré de aplicar todos al realizar mis iconos. Y creo que hay otro pequeño tip para un caso muy comunmente visto en internet, “Los ICONOS son ICONOS, No LOGOS”. Algunos usan Iconos como logo, y (creo) que es un mal uso.

    Un Logo puede ser “Iconificado”, pero un Icono no puede ser un “Logoficado”

  4. Kristin WhiteNo Gravatar
    March 31st

    Good article. I have known some of the tips for a long time, but others were new. Thank you for the information!

  5. RobertNo Gravatar
    March 31st

    Thanks for the great article. I have learned lot’s from your article. Although I am not a graphic designer, but instead I am a website designer, I will definately use your icons in the websites that I design. Keep on the good work!


  6. I’ve loved iconshock icons for years! Seeing the thought put into the creation of them makes it all the more appealing and a good guidelines for designers like myself.

  7. Great works!

  8. ionoclastNo Gravatar
    April 1st

    excellent tutorial… thx!

  9. LabkomNo Gravatar
    April 2nd

    À great article. Thanks for this. Learned many thinks. Thx

  10. Blogger.IconshockNo Gravatar
    April 2nd

    Thanks everybody for your kind words. Glad this info is useful.

  11. NewKreationNo Gravatar
    April 2nd

    It can be difficult to put words to images. This was explained very well. Thank you for the good advice.

  12. ETrainNo Gravatar
    April 4th

    Excellent article….thoughtful…clear…on point….should be required reading for every icon creator. The only thing I would add is that you should always name your icons, not just number them

  13. SwiftyNo Gravatar
    April 4th

    Very interesting article. I’m not an icon designer (as all of my previous efforts will demonstrate), but this gives me a much better perspective of what goes into good icon design, and what sort of things I should be looking at when selecting icons for an application or web site project. Thank-you.

  14. Steve O (gswd)No Gravatar
    April 5th

    many good points, that I suppose could be used to try to convince your client that they are asking for you to go down the wrong path. But, if they provide the icons, and say these must be used, you either do it, or turn down the money.

  15. Blogger.IconshockNo Gravatar
    April 5th

    Hi Steve O!. Not quite. Clients are always eager for guidance and advice. If you, as a designer have good and solid arguments, (examples included) a client will always do what’s best for his/her company. Nobody in their five senses will take a conscious decision to hurt their own company. Clients are very intelligent, they just need arguments.

  16. .: Owl :.No Gravatar
    April 5th

    Besides the great icon sets, now they present us with their knowhow. What a great tips and tricks.

  17. Blogger.IconshockNo Gravatar
    April 5th

    Thanks Owl for coming back, glad you liked the article. Thanks for your comments man, much appreciated!

  18. JosephNo Gravatar
    April 11th

    What a great resource!

  19. LeonNo Gravatar
    April 14th

    This is a nice read, a lot of things that are actually really obvious. Still it helps to read the design motivation behind icons and what to do/ not to do. Thanks!

  20. adminNo Gravatar
    April 14th

    thanks you for your comment :)

  21. JuicyIcons.comNo Gravatar
    May 2nd

    Informative and to the point as always! Thanks for the tips! Cheers, Steve.

  22. Blogger.IconshockNo Gravatar
    May 3rd

    Thanks Steve for coming by! Cool website by the way!

  23. Anonymous
    May 21st

    Great article, very helpful when designing icons for a small user interface!

  24. Blogger.IconshockNo Gravatar
    May 21st

    Glad it was useful to you!

  25. veterinary technicianNo Gravatar
    June 11th

    Wow this is a great resource.. I’m enjoying it.. good article

  26. Blogger.IconshockNo Gravatar
    June 11th

    @veterinary technician I’m Glad this can be useful to you.

  27. Dutch icon designerNo Gravatar
    August 11th

    Highly detailed icons lose a lot of detail when used very small I think, they should be redrawn even in a very simple way. I particularly agree with the “don’t waste any space” comment.

Leave a Reply