I recently took on the job of updating the iconography for our mobile site – which was starting to look a bit dated, especially in Apple’s shiny new iOS7 UI. Luckily, I love icons… and since I know there’s a few icon-geeks like me out there, I thought I’d share my process for this job and hopefully give some insight into why I thought they were a worthwhile consideration.
Like most projects, this one started with a brief and a quick chat with the designer who looks after the mobile designs – the direction he wanted to take was pretty clear; clean, crisp, iOS7. Usually an iconography project starts with an exploration of themes (visual directions the iconography could take), but since that hard work had already been done, my first job was to do a bit of iOS7 research.
This article was a pretty awesome resource on the type of visual style Apple have adopted for their new OS – this, plus some digging around in my iOS7 Beta gave a pretty good idea about the style I’d have to adopt; single-weight lines, no fills (with the exception of active states) and a curved-aesthetic. Seemed pretty straightforward, although directly copying Apple’s style concerned me a little bit.
Lines lack character
Technically speaking, emulating Apple icons is fairly easy, in fact there’s already countless line iconsets already floating around the web waiting to be used. The concern I had was the lack of character – line icons aren’t ownable, they don’t have any kind of personality. So I started looking into ways I could use that same Apple style (above), but add a bit of Campaign Monitor expression.
After trawling through my icon books (The Icon Book is a worthwhile read) and inspiration, I found my muse… a mix of icons from Mads Burcharth (a design-hero of mine) and ‘Dutch Icon’ – both of whom combine single-weight line complexity, curves, angles and negative space to create unique-looking glyphs:
Get a grid
You’d think the next step would be to start sketching – but for this particular job, I was more worried about the grid… since these icons needed to work in very specific dimensions, not to mention they needed to work on retina as well as regular devices. From past experience I’ve found that setting a grid in Adobe Illustrator is pivotal in creating a consistent set of scalable icons that work in both vector and pixel.
After a bit of trial and error, I found a grid that worked – and since I was working in both Adobe Illustrator and Photoshop, I needed to make sure that grid translated well between vector and pixel without creating weird fuzziness and half-pixels. Without getting too nerdy about it, the best results happened when I snapped to gridlines divisible by 2, and never went below a 2px stroke width.
Sketch. Concept. Repeat
At this point I did a heap of sketching, auditing and doodles (below) – with the intention of getting my head around the best way to represent a certain task in picture form. Sometimes the icon I thought would work best ended up looking totally weird… but for me, sketching is an extremely important part of the process, and by far the quickest way to split the good ideas from the bad.
From here it was about getting stuck into Illustrator, chucking the ideas that didn’t translate too well to screen, and refining the ones that did… periodically stopping for reviews with the designers. The result I was working towards was a complete set of icons that everyone agreed on, worked well as a set, and looked great at all sizes. As a rough guide, it took about 20 concepts for each icon to get to that point. Here are some of the icons that didn’t make the cut:
This is the part where I needed to take all the approved icons, and make sure they were all structurally similar, and fit exactly to the grid. Adobe Illustrator zoom level is set to 5825.53% and everything gets all Rainman for a while.
This needed to be done for each icon, which were then placed into two master sets – one in vector format, the other in pixel. At this point, I was pretty relieved I’d done my gridwork earlier.
And that’s a wrap!
In total it took about 2 days to draw a set of 20 icons that not only looked at home within iOS7, but had a unique character we could call our own. On a personal level, it’s satisfying to see iconography working well as a set, and at any size – it’s what makes the above process worthwhile.
And that’s the story behind creating something so seemingly simple, but so often overlooked. Props to Adham for doing a lot of the hard work for me on the visual style, and to Mads for this GIF. I’m looking forward to seeing these being used in the app, keep an eye on the blog for more updates on that.