Wednesday 28 September 2011

LAST RESEARCH - 7 PRINCIPLES OF EFFECTIVE ICON DESIGN

I would say this is really useful for me. Like I mentioned in my prototype, the interface needed icons for sure, then after reading this, I changed my mind that how my icons should look like.... I will put some selective summary here
Link : http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/

1. Approach Icon Design Holistically

An icon is one of many graphic elements that need to work together harmoniously. Icons can be appreciated for their aesthetic solutions individually, but they don’t function alone. Evaluate your icon designs relative to the graphic system you’re using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.

Excellent example for a good icon design set

 2. Consider Your Audience

 When creating icons, cultural considerations are important. Symbols may differ for common elements you may use for your designs.

Apple mailbox icon. Apple considers to US users only (this eagle is USA's symbol)

 3. Design for the Size the Icon will be Used At

 If you go vector and make your icon in Illustrator, there is an inherent temptation to scale the design, and try to use it at any size. This doesn’t work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design.

Icons should have a base design that is used as a starting point

 4. Keep Icons Simple and Iconic

Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much into an icon design.

RSS feeds, look elegant in big, but won't work out at much smaller size

 5. Cast Consistent Lighting, Reflections, and Shadows

It’s important that the realism you add to your designs all function coherently. If you use a light source coming from one direction then stick with it. Or you risk losing the integrated design of your icons. Also consider the light source of the design your icons will be placed in. If the light source of the icons is at odds with the Web site or application design you’re using them in, then the design will appear amateurish.

Be careful of risking losing the integrated design of icons

6. Utilize a Limited Perspective

The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.

the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).

 7. 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 style of the icon’s design.