Icon Design

[Nicky]

Does anyone know of any good tutorials concerning icon design? Also, what are your thoughts on the following?

* Is it a good idea to design a menu with icons?
* Can you use ONLY pictorial representation and still have a useful navigation system?
* Can text and icons work well together?
* What makes a good icon?

Thanks

[Edited by Nicky on 11-11-2000 at 10:36 PM]

[TWTCommish]

I LOVE ICONS!

* Is it a good idea to design a menu with icons?
* Can you use ONLY pictorial representation and still have a useful navigation system?
* Can text and icons work well together?
* What makes a good icon?

- Yes, I think icons add a nice visual element and give you a place to add some nice color to your site. Great for "spicing up" a dull looking navbar.
- Just icons? I suppose you COULD, but sites like that (usually they have ALT tags and the text appears near the image on the mouseover) always throw me off a bit.
- Text and icons work well I think, if the icons are small enough so that they're about the same height of the icons.
- What makes a good icon? Simple, well colored, sharp, and relevant. The idea is to aid people so they can understand the link without even reading the text.

Here's what I love to do: use dingbats like Wingdings (1, 2, or 3), WebDings, and others like that - I just pick out an envelope or something, and I'll stretch it out a bit, color in little lines here and there - just enough to make it colorful but still simple. Usually about 15x15. I made a few recently which I LOVE! I'm very happy with how they came out.

Good luck!

[Nicky]

TWT - could I see some examples? It is for a class that I am teaching!

[Sparkie]

Originally posted by Nicky
Does anyone know of any good tutorials concerning icon design? Also, what are your thoughts on the following?

I dont know of any tutorials at the moment, but there are lots of tools out there that will let you create the icons.

* Is it a good idea to design a menu with icons?

I think its very helpful, as long as you have the <alt> text for the graphic, and have the actual text for it, somewhere nearby. Otherwise people might not know what those icons stand for.

* Can you use ONLY pictorial representation and still have a useful navigation system?

I dont think so. When Microsoft initiated its cryptic-icon menu bar with the onslaught of programs such as Word and Excel, a lot of the people were confused about the meanings of those icons by themselves. If you saw a printer, you'd know that meant "print" but what about a clipboard with a sheet of paper over it..that means "paste"? I'd rather see a tube of glue, myself...So you see, it can be misleading and ultimately frustrating, for the user who isn't aware of the intended meanings.

* Can text and icons work well together?

Of course, especially for repeat visitors coming to your site. As long as you have the meaning of the icon there beside it, they'll know where to go, and when they come back, they'll instantly remember that "clicking the icon of a house means you return to the index page"..and so on.

* What makes a good icon?
Something that isn't too abstract. I dont want to look for a "search" button and finally find out that I click the dancing purple dog to enter my keywords! Folders, globes, computers and arrows make great navigation buttons because the majority understands them. Balloons, smiley-faces, and dancing purple dogs do not because nobody can decrypt them...get the idea?

I hope that this explanation can help your class!

[mjames]

Icons can make good navigation menus, but text links also do. With icons, it increases your load time.

[TWTCommish]

Here, stuck em up:

http://www.offsubject.com/examples/

I'll leave em up for a week or two probably. It's real simple, but still effective. Simple little dingbats, magnify the image a bunch of times, and spend maybe 15 minutes on coloring and sharpening.

[Nicky]

Thanks a lot everyone for your input. If anyone is interested I shall put my class notes up on the web somewhere for you to take a peek.

[creole]

Nicky...one last thing to remember...not only can the icons themselves be confusing, they can mean different things to different cultures/countries...

[Nicky]

Definitely, that's something we will be looking at!

The magnifying glass is a prime example, to me it means "search", but to someone else it could mean "zoom".

[The Dude]

TWT, you know a site where i could download simple dingbats fonts like the one(s) you used for those?

[TWTCommish]

I believe Microsoft.com has them up - but that always confused me.

Do a web search for "Wingdings" and "Webdings." Those are the most common/useful overall. Windings has 3 parts - Wingdings 1, Wingdings 2, and of course Wingdings 3.

Here's a place or two to start:

http://dingbats.i-us.com
http://www.fontface.com
http://www.fontfreak.com
http://www.1001fonts.com

[The Dude]

thanks. i did find that first site you listed, but whenever i downloaded the fonts, they were not the same as the pictures which represented them...got me kind of angry..thanks again

[Hierophant]

Originally posted by Nicky
Definitely, that's something we will be looking at!

The magnifying glass is a prime example, to me it means "search", but to someone else it could mean "zoom".

In my map application I used:
a magnifying glass with a tiny plus sign for zoom in.
a magnyfying glass with a tiny minus sign for zoom out.

Always used a binoculars icon for search.

When I create toolbars in an application the meaning has to be similar what people remember from other applications. The biggest promoter of toolbars being Microsoft, so their representations are the most recognized. The goal is to design applications that usable without any special training. If I made my zoom button a small map icon, people would get confused. They recognize using a magnifying glass to make things bigger. The plus and minus signs clarify this. My icons on the scrolling buttons are simple arrows. Click on the arrow pointed in the direction you want to scroll in.

Some of that should translate to the Internet. Let's look at some of the most popular ones.
House = Home Page or Index page of a site.
Envelope = email
Printer = Print
Magnifying Glass/Binoculars = Search
Question Mark = Help

The key to using Icons well is to not only make sure they identify with your target audience but also to make sure that they don't go against established unwritten standards.

[Brian Asselin]

Don't know if it will help but I'm using this right now:
http://www.spiderbite.org/images/menubar.gif
This isn't my main menu, it is used for "extra" stuff, from left to right they stand for:
E-mail, Search, Add to Favorites, Help, Print, and Suggest to Friend. I got them all from Windows Icons, (Used Icon Forge and pasted into Photoshop) I use an Image Map with "Tool Tips" (alt text) giving a description. The suggest to friend one doesn't really work to well, but I'm working on another one If I were to use this as my main menu I would definitely include text. The site I'm using it on is 95% not working, I've got the "suggest" page installed so you can see it on that page http://www.spiderbite.org/friend.html