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.

Using DVD Cases to Package Software CDs

Most software CDs are packed in a cardboard type box which isn't very durable and often gets thrown away, er... I mean recycled once the CD has been installed on the users machine. So the questions was, what could be use to package CDs that would be easy to ship (small), durable and continue to look good over time on a book shelf? The answer came in the form of a clear plastic DVD case similar to the ones you find at your local movie rental store. The plastic case used here has a thin outer sleeve that wraps from front to back that will accept a sheet on which the product artwork is printed

Product art as seen in Photoshop CS2. Click to view larger image.















What's the upside of this solution you might ask? First, unlike printed packaging (boxes) the plastic cases are not product specific until the product artwork is fixed to it, so printing costs are lower. Second, the plastic cases are very inexpensive compared to a printed solution. And third, they are very durable and look very nice. So a developer who ships multiple products can simply slip the required artwork into the sleeve and presto, product specific packaging.

The down-side is that you are using a petroleum product which isn't always recyclable. But given that these cases look good and will protect your investment, they may not be as quick to find their way into the local landfill.

Software Splash Screens

Splash Screens are used at start-up of a software application as a "visual handshake" confirming that the application being launched is the one specified. Along with product artwork, they often contain information regarding the version or build number of the product and engineering credits. The following panels were created for Solid Documents, LLC using Adobe Flash MX and Adobe Photoshop CS2.

Click images to see their actual size.