An Event Apart: Icon Design Process

by August 26, 2014

At An Event Apart in Chicago IL 2014, Jon Hicks discussed the modern icon design process and shared useful design and development tips for icons. Here's my notes from his talk Icon Design Process:

  • Icons can be used to support navigation, action, and messaging in Web sites and applications. They can also reinforce status by providing more information than just color.
  • We had a visual language before we had written language: symbols, hieroglyphics, etc. So symbols were around for a long time before they made their way to computers in 1974.
  • Today there's lots of royalty free icon sets available for use in sites and apps -so why make your own? Icons sets might not be the right size or style for your usage. You may need more or less icons than exist in a ready-made set. In these cases and more, you may need custom icons.
  • The icon design process: research, drawing, and deployment (which changes frequently).
  • Research: a client brief and icon audit can reveal areas of inconsistency, gaps, or duplicates in the icon design of a site. Compile a list of the icons you'll need and what they represent.
  • How do you go from a word to a finished icon? You have two options: iconic (literal) or symbolic (needs to be learned).
  • When possible, follow conventions for your icon designs. The Noun Project is a great resource for common visual symbols. But be aware of local considerations. Symbols like piggy banks, owls, and thumbs up may have inappropriate meanings in other cultures.
  • Truly symbolic icons are more easily understood. The difference between outlined and solid icons is not the determining factor for comprehension.
  • Don't get too fancy with your icons just to make them different. Make your icon as simple as possible but no simpler.
  • Drawing: use whatever tools you are comfortable with. Start with a pixel grid to align gaps and weights within an icon. Your gird does not need to be even.
  • Automatic resizing of icons to create larger images might not provide the right ratio/balance between elements. You may need to tweak line weights or sizes to make things look right at different sizes.
  • With an icon set, you may need to adjust sizing and alignment to make things appear optically the same. Different shapes will appear bigger/smaller when displayed as part of a set.
  • Think about where shadows will fall within an icon to create the right balance of space.
  • Just when people started embracing SVG, Adobe started to remove SVG features from their apps since no one was using them before.
  • Sketch is starting to mature enough to be a viable alternative to Illustrator for drawing icons.
  • Svgo-gui is a simple drag and drop tool for optimizing SVG images. You can further compress SVG by GZIP-ing them on your server.
  • Deployment: Icon fonts or SVG -which one to use? Both can be right for your project.
  • Why use Icon fonts? One small file, accessible & scalable, easily styled with CSS, no sprites needed, supported in IE4+
  • Why use SVG? less hassle, support (3 versions back), avoids sprites, can use multiple colours, are still style-able with CSS animations
  • Grumpicon is a tool that can help you create SVG art for your sites.