SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Icon Design

  1. #1
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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]

  2. #2
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  3. #3
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    TWT - could I see some examples? It is for a class that I am teaching!

  4. #4
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  5. #5
    Sports Publisher mjames's Avatar
    Join Date
    Jan 2000
    Location
    Charlotte, NC
    Posts
    5,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Icons can make good navigation menus, but text links also do. With icons, it increases your load time.

  6. #6
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky...one last thing to remember...not only can the icons themselves be confusing, they can mean different things to different cultures/countries...

    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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".

  10. #10
    SitePoint Member
    Join Date
    Sep 2000
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TWT, you know a site where i could download simple dingbats fonts like the one(s) you used for those?

  11. #11
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Member
    Join Date
    Sep 2000
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Wayne Luke
    ------------


  14. #14
    SitePoint Addict Brian Asselin's Avatar
    Join Date
    Oct 2000
    Location
    New hampshire
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •