Icons
1st edition — by Patrick McNeil — May. 30, 2006
The Design Element
Icons are such incredible little visual devices. Their sole purpose is
to communicate lots of information in the simplest possible way. Their
usage on the web is of course no surprise. The web is an environment filled
with impatience, wandering eyes, and easy distractions; a place in dire
need of quick visual indicators. Ican can serve as great helpers showing
us where to go for what we need. Instead of scanning text you can scan
images, and often they will tell you what you need. This is no different
then street signs, where recognizable forms communicate quicker then text.
The revolver script home
page is a terrific demonstration of the power of icons. The cube
with an arrow pointing down is somewhat of a universal indicator to download
something. The image is quite large, and doesn't qualify as an icon
in the traditional sense, but the symbol is in fact an icon. This imagery
wouldn't work if it weren't for all hundred of times it has
been pounded into our heads what this symbol means. To me, this really
demonstrates the power of icons.
One thing I want to point out about the samples I have collected
is how unique they are. Sure they draw on the stereo types of how to say
comment, download, or contact; but at the same time they don’t look
like every other icon on the web. It seems to me that icon sets like the
Slik
Icons one have become a cop out in a way. They look so darn good,
are generic in a way which makes them so exceedingly flexible, they are
easy to fit with nearly any design, and there are so darn many of them
you can easily make them work for your needs. The real killer feature of
the set of course is the price tag. Now don’t
get me wrong, I actually really love the Slik
Icons, and I am eternally grateful for
them. In fact, I think it is actually a good thing the are so widely used
when it comes to web applications because it becomes a given what they
mean and perhaps do. I put them to use on the admin portion for The Daily
Slurp and they work wonderfully to help graphically represent my data.
No need to make my own icons.
This all changes when you are a public site for a company or product and
need to communicate a message and identity unique to that client. In this
type of situation the uniqueness becomes so incredibly important.
The big catch of course is that custom icons can be a royal bear to create.
I have tried making icons myself and found that it was far more difficult
then I had imagined. A couple of alternatives that could really help add
some spice to a design come to mind.
One is to go beyond the freebies and buy some inexpensive icon sets from
someplace like IconBuffet. Sure others are probably using them, but at
least since you had to pay some money the number of people will be greatly
reduced.
A wonderful second option which I really like is to find a way to incorporate
the icons into your site in such a way that they are altered and become
completely unique to your design, even if they are free downloads that
millions have snagged. Consider things like changing the color scheme to
a single color via color layers in photoshop. Some of the samples turned
the icons into buttons or badges.
So if you think icons are what your site needs to help the user find their
way around, try to find a way to make them unique to your site. I think
you will be pleased with the results, these samples sure look wonderful
to me.
Sample Usage
Premium Free Icons
Silk Icons
Awesome free icon list
Feed Icons
Tango Desktop Project (free icons & more)
Other Free Icon Sources
Great set of mini pixel icons
Yellow Icon
TIny Icon Factory (web based icon creation, simple b&w)
Commercial Icons
Icon Buffet
SimpleBits stock
icons
StockIcons
FastIcon
How To Create Icons
Anatomy of an icon
Another anatomy of an icon
Create
XP Style Icons
Icon drawing tutorial
Recreate the iTunes icon
Special Software
Axialis IconWorkshop
