Principles of Effective Icon Design An Holistic

Approach

What is an Icon?

Ü  An icon is a graphic image, a small picture or object that represents a file, program, web page, or command.

Ü  Icons help you execute commands, open programs or documents quickly. To execute a command by using an icon, click or double-click on the icon.

Ü  It is also useful to recognize quickly an object in a browser list. For example, all documents using the same extension have the same icon.

Image vs icon

Approach Icon Design

Holistically

Ü  Icons fit within graphic systems. an icon is one of many graphic elements that need to work together harmoniously.

Ü  Carry this logic across icon sets as well. 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.

Ü  Designing an iconic language author Yegor Gilyov states, Ü  “If you need to draw several icons, you need to think over images for the

whole set of icons before proceeding with illustrating activities.” Ü  He goes on to explain how failing to plan how the whole set of icons will work

together from the beginning will ensure a huge waste of time, as redesign will be inevitable.

Structure of icon

Consider your Audience Ü  You will have different considerations if you’re

designing an intranet for a small company, rather than for a product that may be sold internationally.

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

Ü  Cultural traditions, surroundings and gestures can differ radically from country to country. For example mailboxes differ greatly between countries. Apple uses the same example in its Human Interface Guidelines.

Ü  So designing an international icon based on one country’s rural mailbox design is a bad idea—a specific example of what not to do. They point out how Apple’s Mail icon is more recognizable as stamps have more cultural universality.

Ü  10 Mistakes in Icon Design.

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.

Ü  Icon design is not a one design equals scalable solution medium though. This is one reason that Photoshop is just as good a solution as other programs. For designers that make icons in Illustrator, they are still going to clean them up in Photoshop, or jump through some hoops to get their icons to look good at small sizes when being output directly from Illustrator. So, don’t buy into the myth that icon design is a purely vector-based medium. We are outputting pixels .

Ü  There are also vector tools in Photoshop and masks that you can take advantage of that equal the scalable playing field between the programs. If you’re equally versed with Illustrator and Photoshop, you may find a workflow that goes well between the two programs. Consider using Smart Objects. You can also consider using a Photoshop add-on called Icon Builder.

Ü  The approach taken for small icons and large icon design is immensely different.

Ü  Icon Design: Bitmap vs Vector

Ü  Icon Design Sizing It covers some inherent issues with designing icons for small sizes.

Keep Icons Simple and Iconic Ü  With operating systems now having icons that scale to

large sizes (512px by 512px is gigantic for an icon), the temptation grows to get illustrative with your icon designs. While a level of realism can add interest to an icon design, it should function simply and effectively.

Ü  Smashing Magazine has a great summary of the Apple Human Interface guidelines on Icon Design. The section on Realism in Aqua makes some good points about the limitations of realism in icon design and points out when symbolism is necessary.

Ü  Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design. View the example from Smashing Magazine.

Ü  You want to add interest and compliment the design, but not loose the iconic impact of the icon.

Ü  the quick recognition of the icon at smaller sizes or a less-dressed solution may be preferable.

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.

Ü  In the Windows Vista User Experience Guide there is a section on icon lighting and shading. The guidebook gives really specific rules for the Vista Icon set.

Ü  Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space.” There are many more rules in this guide.

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

Ü  A large-scale design system, something like a software operating system, may need more flexibility than that, though. Apple covers Icon Perspective in its Human Interface Guidelines. They have a more flexible use of perspective.

http://www.axialis.com/tutorials/tutorial-iw022.html

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.

Ü  Icon sets have unique features that make them stand out. In the Echo Icon Guidelines the set is described as, “a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilizing high contrast and spots of vibrant colors.”

Get Started with Icon Design Ü  Designing icons for Web sites is a good way

to get started with icon design. Often there are only a few icons needed for a site design. Start simple where you are required to design only a handful of icons or less.

Ü  Start the icon design process with research. Consider the common symbolic metaphor used to describe the icon you’re looking to make. Sketch to lock down the concept. Compliment the style of the icon designs with the Web site design you’ll be using them on.

Ü  Consider the color, perspective, and graphic look of the site.

Ü  Hicks has a presentation on Icon Design. One section of the presentation covers his design process

http://www.behance.net/gallery/Linecons-Free-pack-48-Vector-Icons-%28PSD-AI-CSS%29/6986775 http://www.behance.net/gallery/InPost-icon-set/6981399 http://www.behance.net/gallery/Set-of-icons-for-Miasushiru/2987091 http://www.behance.net/gallery/World-of-icons/6899231 http://www.behance.net/gallery/Myhelper/4633865

Inspirational Professional Icon Sets

Ü  Once you’ve created a small set of icons, you might consider creating application icons.

Ü  Once you’ve done this a few times, you may get the itch to create a large professional set of icons.

Ü  Selling icons can be a profitable endeavor for a designer. If you create a unique and professional set, you can then sell it.

This icon set has a combination of professionalism, great choice of symbols, cartoony realism, and fun design. When Jesse Bennett-Chamberlain of 31three used these icons for the redesign of Expression Engine, It’s a great site design, and the icons fit really well with the style.

Psdtuts+ Icon Tutorials

Ü  Jump headfirst into icon design. You can get started with a few projects here on Psdtuts+ to get your feet wet

Ü  Handy Web 2.0 Icons In Photoshop

Ü  Illustrate a Traffic Cone Icon in Photoshop

Ü  These are all great places to get started or practice icon design.

Get Excited and Get busy Get excited, practice making an icon through the tutorials here. Once you’ve mastered these techniques, build on it.

Ü  Make an icon or set of icons.

Ü  There are many resources on line.

Ü  http://sixrevisions.com/graphics-design/50-excellent-icon-design-tutorials/

Here are some basic videos

Ü  Build icon in illustrator

Ü  http://www.youtube.com/watch?v=QBxvqNdR67s

Ü  Build icon in Photoshop

Ü  http://www.youtube.com/watch?v=AtDgj_cD9Wg

Ü  http://www.youtube.com/watch?v=L1YJiiGK0cI

Ü  http://www.youtube.com/watch?v=OlMR1V2iVVg

Ü  http://www.youtube.com/watch?v=eiHjNsSvsDo

Ü  http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/

Activity

Ü  Create 3 icons for a travel, restaurant, transportation company

Ü  Explore, sketch, build in Photoshop or illustrator