Icon Design Process


Personal Notes from An Event Apart, Boston, 2015
Jon Hicks, author Icons: The Icon Handbook

The background

Icon design dates back through history including hobo code in the 1800s.  The first computer icon sprang to life in 1974. (A great year by the way! It’s when I sprang into existence.) Metaphors took form onscreen to represent actions a decade later in 1984 with the early Apple icons.

Icons help us understand the meaning of the web. They are also used to give feedback. Used for errors or correct data entry. It’s important to avoid using only color to communicate meaning. Icons communicate mood and emotion. Used often in texting.

Why make your own icons? 

Often icon sets you can buy are not the right size or style or too many if part of an icon font.

How toMake Your Own Icons

1. Research

Find out what actions need to be represented and where it will be used. Important to find locations used to unify Metaphors..

A: Iconic icons that represent real things

B: Symbolic symbols represent things you have to learn the meaning of.

Important to follow conventions to play off of user knowledge

How do you research conventions?

  1. Thenounproject.com
  2. Research local knowledge
  3. Talk with client
  4. Mind map

For emoticons, use your camera as reference.

2. Drawing

  1. Decide the style and size
  2. Solid vs outlines. Iconic no difference. Symbolic solid.
  3. Keep the design simple but if too simple can be confused with other things. A good example is a padlock vs shopping bag
  4. Avoid text as it doesn’t translate across languages.
  5. Decide on the final export style. For example svg only supports centered strokes as opposed to outsized or inside strokes.
  6. How to work with antialiasing? Sometimes an odd numbered grid can help achieve desired results for shape.
  7. The larger sizes of icons might have a little more detail
  8. Sometimes it’s tempting to use all the available space. Balance demands keeping all icons similar in weight and size.
  9. The use of space can give sense of shape, shadow and depth.
  10. Reduce anchor points to save file size.

Deployment

Icon font support is limited such that icons are currently better. 

Why use SVG

  1. Less steps
  2. Good support
  3. Avoid sprites
  4. Multiple colors
  5. Still styleabel
  6. Can use media queries
  7. Can use animations

Footnotes:

useiconic.com

Inkscape for svg

Sketch nice told for layout and icon creation of svgs

Grumpicon.com