I started the process with a stage of discovery, involving metaphor ideation and words that I thought should be included in the set. This resulted in a definitive list of essential user-interface icons. Sketching played a fundamental role in my exploration process. A pen and paper allows rapid idea generation and from this you can instantly determine the success of your chosen keywords. Where possible I tried to focus on the simplest form of each metaphor, stripping back any unnecessary levels of detail. This proved beneficial to the user’s recognition of each icon.

 

Various rules were defined through the physical design process and were strictly adhered to. This helped determine and push forward the visual style and personality of the set. Things such as stroke weight, corner radius, visual weight, gap size, terminal cap and diagonal angles were all taken into consideration to ensure a consistent family of icons.

 

The icons were constructed on a 100x100 pixel grid ensuring that the horizontal and vertical strokes were aligned to this grid at all times. I designed and refined the icon set in Illustrator (which gave me added flexibility for SVG exports), before transferring each icon into Photoshop as an individual shape layer (ensuring that they sat 100% on-pixel).

 

Numerous small stages of refinement stages took place, as with icon design you really get a chance to focus on the smallest levels of detail. I laboured over each individual pixel to ensure sure that every icon was as instantly recognisable as possible.