Icon Design Process

Article: Source

A little while ago I was approached by the wonderfully talented  Brian Hoff about creating some custom icons for his site redesign. Thought it would be cool to do a little case study from Brief to finished product.

Size: 18px

Icons: Information architecture, marketing, copyrighting, front end development, multi screen, iOS app, iOS app icon, branding, design, content management system, interface design.

Style: no colour, flat unshaded shapes.

The process

I started with some brainstorms and sketching. Tried to grasp some sort of style and nail each message before jumping into illustrator. A few things I constantly kept in mind were that the icons would only be displayed at 18px so they would have to sit nicely in a square without loosing too much space, at this size I try to use as many pixels as I can to convey the message. Most details need to be taken out, simplify then simplify again, if the icon has lost it’s direction then I go back a step.

After I’d settled on my ideas I jumped into illustrator and started to mock the icons up. This part of the process is great to really get in and make the best of each icon, make copies to play with ideas. Yes you should try to stick with the direction of the icon but usually I stumble across some awesome ideas that really work when I’m just pulling and pushing the icon in different ways.

Tip: instead of having a new file for each icon/concept development, try to make the whole set and it’s concepts in one illustrator file. Keep the icons you like best towards the top or bottom again all together. This helps you see from an early stage if the set works together or if there are the odd few “sore thumb” icons that need moulding a little more.

At this point I took out five concepts for the icon “information architecture” and sent them to Brian. This is what I sent …

Each of these icons have something different to offer, hold a different style. Even the way they are pixel hinted would depend on what style Brian was looking for. Information from this one icon concept would be able to pave the way for the whole icon set. After a short skype chat, Brian told me he liked the icon to the far right. Rounded corners, more friendly, gives it a little more character. So based on this decision I went forward and built the set from there.

Next step was to pixel hint the icons. This is probably my favourite part of the process. It’s like fitting a little jigsaw together, really tricky and sometimes stressful but the moment I realised I’ve got it right is one of the best part about being a designer, such a wicked feeling. I’ve attached a screenshot of the “marketing” icon from pixel hinting view to actual size. You can see here, the characteristics of the icon come into play, a different shade of pixel can create the loveliest curve or indent to give the icon personality. This was one of the most difficult to work on due to the graph line and overlapping lines.

Tip: when working on diagonal lines at this size you’ll drive yourself crazy trying to get it perfect. My approach is to hint the shape around until you get about 5 or 6 solid black squares to form the line then slightly maneuver the points around it to create a outer cushioning. Eventually it will fall into place. Pixel hinting takes time and perseverance, no short cuts here I’m afraid.

So after hours of hinting and perfecting each little pixel I contacted my “Mr Miyagi”  Gavin Elliott and I threw the final set up on dribbble for some feedback here. Big thank you to Rogie, he pointed out that the cog I’d initially made didn’t really sit right with the set. This happens to me a lot, especially on projects I’m so close to for hours on end, your mind can become immune to how something, looks thats why I always get feedback. A fresh pair of eyes on a project can do wonders. So I changed it up, when right back to the start and developed the vector asset, pixel hinted and placed into the set. This was just what it needed.

So here are the final icons, I sent them over to Brian for feedback. There where the odd few tweaks to make and Voila! there you have an icon set!

Thanks for reading guys!