Icon Design Process

It's hard to create an icon

Interface design builds on our history of communication.

Visual versions of speech were first to set to stone, in paintings. It was the first example of writing on the wall to describe what happened. The oldest examples of art are almost iconic in their storytelling graphically. The very oldest at 40,800 years is a red dot ? surrounded by handprints and buffalo likely drawn by Neanderthals.

Pictographs led to ideographs (typical in many eastern languages like Mandarin and Egyptian Hieroglyphs). Glyphs (letters) and orthographic ligatures (combinations of glyphs like æ) eventually overtook icons for written pieces of complex information. Alphabets consolidated and the Latin alphabet is now used for most text on the internet.

An Icon is the shorthand pictograph of a term. It enables us to use a smaller visual item to stan in for a larger term if it were described with text.

A good example for the use of these icons are in applications for desktop publishing, each of these modify some characteristic of the paragraph style applied to selected text.

The SAAS site I was working on needed a way to show that a vendor was more likely to have a gender diverse supply of candidates. The Gender Diversity badge needed a visual that would show that the supplier could land hard to find candidates like female surgeons.

I created an icon that described gender diversity from a starting point of the letters GD in a circle. We tried out different versions of the male and female symbols combined in different ways. I took inspiration from the bathroom icons that are used and combined them in several ways to show gender. We found very simple symbols and combined an equal symbol to show that any gender chosen is equal in our case.