Designing the new Campaign Monitor iOS icons

One of my first icon projects for Campaign Monitor was to create a set of Apple iOS icons for our mobile web application. These are the icons that show up when you bookmark our mobile site to the ‘home screen’ on your Apple device. Now, with all of the iOS devices floating around out there, you can do things the easy way by creating one large icon which is then scaled down for that particular device, or you can do it properly by creating a pixel-perfect icon for each device. For the iPod Touch/iPhone 2.5/3G/3GS, the icon size is a miserly 57 pixels square. For the iPad, it’s 72 pixels square, and for the newer iPhone4, it’s a whopping 114 pixels square.

The challenge with iOS icons, or for that matter, any icon that will be used at multiple sizes, is that you need to come up with an idea that is memorable and interesting, whilst keeping things clear and concise enough that it is still recognisable at smaller sizes.

From sketch to screen graphic

The value of sketching

As an interface designer, I have found that in this digital day and age, we don’t rough out ideas with pen and paper nearly enough as we should. Sketching allows you easily develop and expand upon simple idea in a few strokes. I find sketching especially useful for roughing out ideas for icons and logos, as well as general layout throw-downs. Even if you think you haven’t got a knack for it, practice makes all the difference. Don’t be scared to try. Even as early as a few months ago, I shied away from sketching out ideas because, to me, they looked mediocre at best, but as I kept pushing myself to practice, designing becomes a much more organic experience.

Push yourself!

One of the easiest traps to fall into is to stop sketching after a few ideas; even if you’re excited about a particular iteration, push on and try and play with at least half a dozen ideas. Even if it doesn’t seem useful at the time, they act as food for thought when refining and polishing ideas.

iOS icon sketch

Refined sketches of my two main ideas

The design process

My general approach to icon design, is to start at the larger sizes with all the detail, then scale down to the smaller sizes, remove any superfluous detail that would get lost in translation, then redraw or tweak all of the vector shapes so that they snap to a pixel grid. This ensures that the icon retains the sharpness and pixel-perfection it needs to really stand out.

One thing I pride myself in with my interface work is the super-crisp and pixel-perfect look and feel. I combat blurry edges by setting a grid in Photoshop’s preferences so that I have a grid line every 16 pixels with 16 subdivisions. That gives me a grid line every pixel, with a solid grid line every 16 pixels for reference. Make sure ‘Snap to grid’ is checked under View > Snap To > Grid, and you’re golden. This great article by Marc Edwards of Bjango, runs you through a few different methods for getting pixel-perfect results when using the rounded rectangle tool. (The same premise applies to the majority of the shape tools).

57 pixel iOS icon in detail

Close-up image of my pixel grid in use and the snapped anchor points of the pie graph

One of the more difficult parts of this project was the fact that the icon couldn’t be branded. Because Campaign Monitor was created for designers to rebrand for their own clients, the final icons couldn’t directly reference Campaign Monitor as a company. All in all, I’m happy that as a white-label icon, it still manages to convey it’s meaning and is still instantly recognisable as a part of Campaign Monitor.

Finished range of iOS icons

The refined and polished end products

Implementing the icons

When it came to implementing the finished icons, I came across quite a conundrum — all devices running iOS 4 return the same user-agent, regardless of the actual device, this means, there’s no way do individually target a device, on the operating system. Sure, I could’ve just used the larger 114 pixel version for all devices and let the OS scale it down, but the obsessive compulsive designer in me wanted to display the individually tweaked icons for it’s intended device. After searching around for ways to individually target the individual devices, and coming up short, I thought back to an article I was reading on A List Apart which discussed the use of media queries to load different stylesheets for different devices with different resolutions.

The code

After a little trial and error, I fell upon the idea of using the same premise of serving different stylesheets according to the pixel density of the device, and instead serving up individual icons instead. I put together three simple snippets of code which target each individual iOS device according to their pixel densities. 163dpi for the iPhone 3G/3GS and iPod Touch, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/link/to/iOS-57px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/link/to/iOS-72px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />

If you notice in the above code I have used apple-touch-icon-precomposed. The addition of -precomposed stops iOS from automatically rendering gloss atop my icon and rounding it’s corners. If you do want iOS to auto-apply the gloss and rounded corners automatically (so you can supply a flat, square image), simply use rel=“apple-touch-icon”.

For more information on media queries, do check out the A List Apart article, and for an excellent example of media queries in use (for stylesheets), take a peek at Jon Hicks’ new journal for truly superb execution.

Uh oh! Why isn’t this working on the iPhone4?

iOS has an annoying bug for web app developers. If you use the apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app (ie. fullscreen, sans toolbars), rather than in MobileSafari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:

Broken iOS4 icon redering for iPhone4

Left: Icon as rendered on an iPhone4. Right: How it should render.

Easily creating your own iOS icons

If you’re looking to try your hand at creating an iOS icon, then you can’t go wrong with this excellent template by Sebastiaan de With which has base icons in all the relevant sizes for you to build upon. A quick little tip for those that want their site to render an icon on the homescreen when bookmarked, simply save out your icon as “apple-touch-icon.png” and dump it in the root directory of your domain.

I’m looking forward to sharing more tips and tutorials in the future, so keep your eyes peeled. For a sneak peak at some of my upcoming work, check out my Dribbble profile.

Posted by Jesse Dodds

31 Comments

  • Alan van Roemburg
    11th August

    Great work Jesse, thanks for the insight in to your process :)

  • Nate Klaiber
    11th August

    Wow, those are absolutely stunning

  • Benjamin
    11th August

    Awesome work Jesse, congrats!

  • Torkil Johnsen
    11th August

    Beautiful work :) For others playing with icons, John Hicks’ icon reference chart is also a must-read.

  • Daniel
    12th August

    Wow that really looks fantastic. A lot of people really don’t put enough effort into their Icon design.

  • Andrew Cornett
    12th August

    Amazing job, love the insight too.

  • Philip Downer
    12th August

    What a great post. Love the icon!

  • Ian Storm Taylor
    12th August

    Nicely done! I take it there is no way around that annoying icon bug yet?

  • Mike Smith
    12th August

    I love it! Told a co-worker the other day how you guys pay attention to the smallest stuff, and gave the ios icon as an example. What about the icons used on your site, are they from a set?

  • Marc Edwards
    12th August

    Thanks for the very hot -precomposed and resolution targeting tips. It’s always bugged me that the different resolutions couldn’t be targeted, but now they can. Awesome.

    Also, thanks for the article link.

  • Dan Sherratt
    12th August

    Love the end result! Good Work.

  • Nickolas Simard
    13th August

    Wow, nice article on icon creative process, in regards to iOS! Keep up the “obsessive compulsive design” work! ^_^

  • Stezz
    13th August

    Great article Jesse, love the processes and explanation. Great execution!

  • Adam Frieberg
    15th August

    Great article Jessie!  I didn’t expect to learn something about CSS media types too.  Well done!

  • Bert
    16th August

    Is there a way to fix the iPhone 4 ‘apple-mobile-web-app-capable’ low-resolution bug?

  • Jesse Dodds
    16th August

    @Bert:

    Currently it works for normal sites, or any mobile sites that don’t have the apple-mobile-web-app-capable tag active. So your only option at this stage (if you have an app/site that has the above tag active), is to disable that feature, or live with the badly rendered icon. Hopefully Apple with get this fixed up in the next iOS release.

  • Koruja
    25th August

    great job !!!

  • Phil Coffman
    25th August

    Great article Jesse. I particularly appreciate you going into the nuts and bolts of how you set up your document with the gridlines.

  • Patrick Offczorz
    25th August

    Awesome Icon. Great Article

  • Brad Parnell
    31st August

    Beautiful work and thanks for sharing your process!

  • Damen
    31st August

    Thank you for doing the heavy lifting for me!

  • Dean Martin
    31st August

    Thanks for showing us your process. really useful info too :)

  • Taylor Martin
    31st August

    Good work.

  • Pixel Air Web Design
    31st August

    Awesome stuff. Great to see the process that went into it.

  • Kevin Ngawhau
    31st August

    Nice workflow. I love the precision. Well done.

  • James Noble
    31st August

    We love them. The step through documentation is a great reading.

  • Tigeda Theron
    31st August

    Looks awesome I like the attention to detail you put into the process and the end result.

  • Don
    2nd September

    simplistically beautiful.

  • Alex Penny
    3rd September

    Nice work Jesse! Love the icons.

  • Chris
    3rd September

    Nice work Jesse but is that an envelope or a baby’s cloth diaper? :P

  • Philipp Bosch
    3rd November

    Hate to say it but unfortunately this technique of using CSS3 media queries for the apple-touch-icon link elements does not seem to work anymore.

    Good news: the icon is super crisp on iPhone4 now, so the mentioned bug seems to be fixed.

    Bad news: the iPhone 3G seems to use a downscaled version of the 114x114 icon and not the 57x57 variant. Look here for a comparison image: http://img.pb.io/bznuco

Sign up for free.
Then send campaigns for as little as $9/month

Create an account