Friday, March 6, 2009

Toolbar Icons

Iconography is the branch of art history which studies the identification, description, and the interpretation of the content of images. The word iconography literally means "image writing", and comes from the Greek εικον (image) and γραφειν (to write).

Software developers have been using icons as visual metaphors to identify specific functionality in their products for many years. These icons can be found on the toolbar buttons, drop-down menus and dialog screens of nearly every piece of software in use today. And while icons can vary in size and color their basic design follows well established conventions conceived long ago with the creation of the Graphical User Interface (GUI).

Some familiar examples:

















Notice the similarity between the next two sets of icons. They both describe similar functionality and they do it using somewhat similar iconography. Again, the use of established conventions.

Two more examples:







Techsmith Snagit






A picture may be worth a thousand words, but a well designed icon only needs to suggest one or two to be successful.

Adobe Fireworks





Solid PDF Tools




Tooltips are a convenient way to identify the underling functionality of toolbar icons and help accelerate the learning curve for the user.
However, they should be used to support the icon and not as a substitute for poor icon design.

Solid Converter PDF, Solid Capture and Solid PDF Tools icons designed by MB Mason Design.