User Experience

Icon Design

Graphic Design

Navigation
Process & Maps
Illustrations
Banners
Corp. Identity
Miscellaneous

ePortfolio

Icon Design: Overview

Our Approach to Icon Design

Before we begin to develop icons for an assignment we first establish a visual vocabulary or syntax, (see Icon Design Methodology In Practice, below). We do this by first documenting the function of each icon . From this written description it's possible to analyse the function of each icon and identify the following components:

Objects involved, (nouns)
Actions performed (verbs)
Attributes, (adjectives).

Next we create artwork that visually represents each component, (object, action, attribute). The final step is to assemble these visual components using the chosen syntax so that unique and meaningful icons are formed.

Why use a methodology?

Some clients ask why we go to the trouble of following a methodology when we design icons. The answer is for a few icons you don't really need to follow a methodology. Instead create some prototype ideas get feedback, modify and refine to end-up with the final designs etc. This approach works well for a small number of icons. However, when we are asked to design say 50, 100, 150 pus icons and they each have to look like they belong to the same application or family, be easily understood or learned quickly if not instantly recognizable then you need a methodology.

Examples of our Icon Design Work

Below, (and in the left-hand column) is an index of icon design assignments we have completed. You are welcome to review them.

Icon Design

What Skills and Experience do I Have?

Both software-engineering, (especially design of large-scale enterprise applications) and graphic design training and experience.
A background in HCI, usability, user-centered design and information architecture.
A good understanding of web-production, software development life-cycles and the design constraints of web-based applications and publishing.
Track-record of successfully completing enterprise-applications and web-based assignments.

CV/Resume

If you would like to review my detailed CV/Resume then please contact me.

"It's easy to create a small number of great looking icons but to create 50 or more you need a methodology"

Icon Design Methodology in Practice.

To illustrate how we use the above icon design methodology take a look at the example below.

Step1:Icon Design Requirements

Imagine a set of icons were required for an enterprise application. The scope of these application means dealing with many data types, (sales orders, purchase orders, employee information, production information, inventory control. Etc.). In addition for each data type there is a set of actions that can be performed: add, change, delete. get detail, search, etc. Not all data types share the same actions but many are common.

Lets assume for simplicity that icon colors and sizes aren't important. In reality this would not be the case.

Step2: Visual Language Syntax

If we want icons to be understandable then we need to follow a syntax or grammar. The syntax will change depending upon the particular requirements of course, however, for the purpose of this example lets assume we can define an icons' meaning with the following expression:

Meaning = Object + Action

For example: Sales Order + Delete, means delete a Sales Order etc.

Step3: Objects and Actions

Next we create icon elements that represent all the possible nouns and action. In doing this we also apply a visual style or "look and feel" the client feels is appropriate.

Objects (nouns)			Actions (verbs)
Sales Order			Edit:
Inventory (or Stock):			Delete:
Employee:			Confirm:
Company Information:			Show Detail:
Documentation:			Search:

Step4, (last step): Combine Icon Elements using Syntax

Combining the appropriate Object and Action elements will create unique icons that should be easily learned, (because of the syntax) or even better instantly recognized.

Using this methodology we are able to create hundreds of icons that are all unique, easily understood and look like they belong to the same product or family.

Icon Meaning - Object + Action
Sales Order Icons			Inventory Icons
Edit - Sales Order			Edit - Inventory:
Search - Sales Order			Search - Inventory:
show detail ("drill-down")- Sales Order			Show Detail - Inventory:
Confirm - Sales Order			Confirm - Inventory:
Delete - Sales Order

Another Example: Authors Web-Site Icons

Just to demonstrate that the icon syntax will vary depending upon needs, take a look at the example below from the www.authors.com web-site.

The syntax used here was: Icon Meaning = Object + Attribute

Since www.authors.com is an educational web-site designed to teach students web-publishing the material was organized around software technology e.g. HTML and it's various attributes. Of course JAVA, Javascript, CGI, Perl, etc. where also covered but we simply treated these as additional objects.

The following icons below were developed. Notice the consistent HTML object which is combined with the appropriate attribute to form the icon meaning.

Icon Meaning - Object + Attribute
HTML Icons
HTML Basics:	HTML Fonts:
HTML Lists:	HTML Tables:
HTML Links:	HTML Multimedia:
HTML Images:	HTML Forms:
HTML Clickable Image Maps:	HTML Frames:	Used a variation of the HTML Object here simply to reflect "frames" rather than a single HTML web page.