Constructing Icons: An Examination of Icon Design

Project Overview
For this class assignment, I created a fictitious scenario in which I have been hired by a web conferencing software company to create a desktop application icon. This icon will display on the end user’s desktop once the application is installed. The icon will also be used on their website and in marketing collateral about the product.

The icon must represent meeting via the web using audio, video and application sharing. The target audiences include corporate and educational sectors.

History of Icons
To begin my project, I conducted research on the history of icons in an effort to understand the origins of icons and their original function in society. In Uday Gajendar's article titled "Learning to Love Pixels", he mentions the origins of icons dating back to the Byzantine Empire in the 6th century (reference A). These types of icons were used to portray Biblical stories to a mainly illerate population. The format of these icons were paintings on wood tablets. A key concept in the historical research is icons were used to communicate information using images rather than letters and words.

After understanding the history, I then collected information on design guidelines and principles of icon design creation.

Icon Design Guidelines and Principles
I have broken down the process into these main categories in which the design principles are incorporated.

Phase 1: Brainstorm
During this phase, I started with a brainstorming activity in which I identified metaphors to illustrate the meaning of the icon and interface function behind it (reference B).

My braistorming consisted of thinking of patterns and behaviors used during web conferencing meetings. Images/ metaphors that came to mind included telephone headsets, computer monitors/ screens, wifi connections, and collaboration of multiple parties.

As with all my visual design projects, I used tools like Google, existing software companies, and istockphotos.com to search for visual images of the metaphors listed above. The existing companies were WebEx, GotoMeeting and Adobe Connect Pro. The company icons for the applications did not reflect the metaphors I defined. WebEx using a green and blue circle without any line art. GotoMeeting uses a design that looks like a flower with several petals. In actuality, it is a group of networked circles. Adobe’s Connect Pro icon is an abstract drawing of wavey lines.

Design ideas from brainstorm activity:
I came up with nine design options, but narrowed my choices down to three. The final design was conceived using a combination of ideas from these three options.

Phase 2: Define Style and Tools
During this phase, the icon style and development tools are defined. The Operating Systems' (OS) manufacturers have specific guidelines to refer to when designing OS dependent graphics and icons. For this project I am designing a custom styled icon; therefore I have more flexiblity in my design parameters.

Soft Facade, an icon development firm, suggests following these four rules when designing custom icons (reference B):

• Design icons that will ideally fit the interface environment where they will be used. This means you should not create cartoonish icons for enterprise application and vice versa.
• Choose appropriate colors and create basic swatches and gradients, this will save time over the course of the project.
• Use consistent lighting, shadows, and perspective.
• Sketch down the shape of basic elements to define the unique style.
  

For my icon style, I used blue as a background color, with red and brown to highlight my main image. I used round corners and shading to give my icon a modern look.

The tools used during the design phase were pencils and ink pens to complete thumbnail sketches of my ideas. It is recommended to use a vector editor to create the final icon. I used Adobe Fireworks to manipulate my graphic images and Adobe Illustrator to compile all my design elements. There are separate software tools available to create the .ico file extension.

Phase 3: Design
The design phase is where all the pieces come together. Here is the suggested process for design:

1. Determine size. Size parameters are large 512x512 to small 16x16 icons. My final icon for the desktop will be 48 pixels by 48 pixels.
2. Sketch ideas based on themes/metaphors identified in the brainstorming phase.
3. Choose the top two designs to build upon.
4. Transfer pencil/ paper sketches to the computer. Draw concept in sa vector graphics program. Make large and small versions.

Conclusion
Designing an icon requires the same thought processes required for designing other visual communication devices. The major difference is you have a smaller amount of space to work with. Which means your icon must capture the meaning using a minimum amount of lines.

Final Design - Large View
The icon represents a person with a phone headset, meeting with several people using the computer and the web.


References:
A. Learning to Love Pixels, http://www.boxesandarrows.com/view/learning_to_love_the_pixel_exploring_the_craft_of_icon_design

B. Icon Design: Basic principles explained, http://www.softfacade.com/blog/icon_design_basic_principles_explained

Additional Resource:
7 Principles of Effective Icon Design
http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/