Click here to Skip to main content
Click here to Skip to main content

Quick Pointers on Designing User-Friendly Icons

, 12 May 2011 CPOL
We all use icons everyday, but how do you design the icons in your application user interface to be user-friendly and professional-looking? In this article, I talked with Jose Salvador at Infragistics, and he shares quality pointers every icon designer should be aware of.

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

So how do you make the icons in your application user interface user-friendly and professional-looking?  I caught up with Jose Salvador, one of the members of the Visual Design team at Infragistics, as he was finishing up a project, to find out what his thoughts were on this subject.  He had these pointers he wanted to share with the designer (and developer) community-at-large when it comes to designing your icons to be user-friendly.

image001.jpg

Figure 1. You can design your icons to be more user-friendly when you keep these quick pointers in mind.

Support User Recognition

An essential factor that needs to be considered when creating icons is that your audience must be able to easily recognize the icon, and its associations.  By using real-world objects or effective metaphors in your icons, you enable the user to drawn upon their previous experience to understand what function that icon performs in your application.

Keep It Simple, Keep It Consistent

It’s not necessary to get fancy with the shape and detail of your icons, in fact, it can be counterproductive. Users will have an easier time recognizing your icons if you design your small icons to be as similar as possible to their larger counterparts.  Preserving their general shape and detail will make them more consistent, and facilitate more effective user recognition which is what you want.

Stay Away From Using Stereotypes or People as Icons

This is most important for globalized applications, as such images may be offensive depending on the culture of your audience.

Sketching

Sketching with a pencil on a pad can help you begin the icon design process. While not a lot of projects may allow you the time for sketching, you can still dive straight into Adobe Illustrator/Fireworks or an icon editing utility or pixel drawing package such as IcoFX and IconBuilder.

Color is a Property Enhancement

When designing icons, it’s best to do so in grayscale mode first.  The reason behind this is so that you can focus on the actual design and form of your icons, without relying on colors or special effects to get your point across to your audience.  Later you can add color, and treat that color as a property enhancement rather than the be-all and end-all of your icon.  If a logo requires color to be strong, most likely, it’s not a strong logo.  So, test your images in black and white first to see if it holds its own, or breaks down.

Look at Professionally-Designed Icons

Looking at how professional designers have crafted icons for the application functions you want to have in your user interface can also help give you ideas.  Icon design is a time-consuming process, and sometimes you can save that time by purchasing off-the-shelf icon packs or browsing through icon catalogs online. 

Conclusion

I hope you’ve found these quick pointers from Jose helpful when creating your own icons.  If you’d like to accelerate the process of adding icons to your user interface, you might consider the value of Infragistics’ NetAdvantage® ICONS.  With thousands of adorned icons in many shapes and sizes from 16x16 to 256x256, and 100% vectorized XAML format for WPF/Silverlight applications, NetAdvantage ICONS saves you time creating your own applications full of user-friendly, professionally-designed icons.

Copyright 2011 Infragistics, Inc. All rights reserved. Infragistics and NetAdvantage are registered trademarks of Infragistics, Inc.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

J. Ambrose Little
Other
United States United States
No Biography provided

Comments and Discussions

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411022.1 | Last Updated 12 May 2011
Article Copyright 2011 by J. Ambrose Little
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid