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.
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.
