Designing App Icons

earlybird_740.jpg

Your app's icon is quite possibly the most important design element in your app experience.  If your app icon doesn't attract the eye, and set the right impression, you won't get people to download and explore the features that your app offers.  There are a few trends I've seen lately with app icon design.  In particular, I've noticed that designers are making things more 3D.  I'll show you how to do that and much more below.

First of all, lets talk about the various icons you'll need to make for your app.

These are REQUIRED by all apps:
    • Main app icon for Retina devices (iPhone = 114x114, iPad = 144x144)
    • Main app icon for non-Retina devices (iPhone = 57x57, iPad = 72x72)
    • Marketing icon for App store, iTunes, Etc... (for all devices 1024x1024)

With those icons, you could submit your app to the app store and have it approved.  Depending on if you are using on-device settings, or document types, or spotlight, there may be additional app icons sizes you should design for.  A complete list of all the icon sizes you should be looking at designing for can be found at this awesome link.

Some designs don't look so great at smaller resolutions, so you may need to increase that shadow or highlight effect, or even scale it back a bit.  IMPORTANT: you should look at what your app icon looks like on a variety of devices, at least one retina and non retina device.  Get a result you are happy with on every resolution.

OK, now that's out of the way, lets talk about a trend I've noticed... I'm calling it the 3D Icon Rush of 2012, but really its been around longer than that.  Essentially it's people taking their 2D apps, and their 2D icons, and giving them some depth with some simple Illustrator tricks.  Here's a few examples from the top 100 lists on iTunes right now:

So what is this look?  Well they're essentially using an isometric view of an extruded app icon.  There's no perspective applied (no shrinking sizes in the distance)  With something of this perceived size, there would be little perceived shrinkage anyway.

How do I accomplish this? Well there's a few items that are pretty standard across all of these examples.  For one, they all have a glimpse of the SIDE of the extrusion, and you can draw this yourself by creating your app outline shape (at 114 x 114, its a rounded rect with a radius of 20 px). Duplicate that shape on top, and slide it up vertically. Then use the shape subtraction tool to get a piece that looks like a cup.  Because there's an implied light source, just change the color of that new piece you have to be darker than your main background, and voila, you have an extrusion.

earlybird_753.jpg

OK, so you've got the main shape, but there are still some details to be added.  For one, unless your shape is the sharpest substance in the universe, there will be a bit of a chamfered edge, so duplicate the process for just a teeny tiny sliver, and place it above the dark area.  I'd choose a color brighter than the main background to make it pop.

earlybird_756.jpg
earlybird_748.jpg

Next is to add content. There's something to notice about this though... when you just draw a perfect circle on your shape, it doesn't quite look right.  That's because the surface you're drawing on is TILTED and would be visually scrunched.  For proof, I've drawn a perfect white circle over the top of the app icon for Hundreds.  You can see the shape they added has been scaled vertically ever so slightly.

 Keep in mind that any content you include on the "Top" of your app surface may need to be shaded appropriately as well.  In this example, the Hundreds designers have included shadows, and chamfered edges to each of the inner circles to make the icon look more tangible.  You can achieve the same look using the tools we used above to create the overall app shape.

For this example, I've drawn a Star, which I scaled ~10% smaller in the vertical axis.  I also added a depth effect by doing the subtract shape method from above, but in the other direction (moving the subtraction area down, instead of up).  I also added a little bit more darkness to the left most inner edge so you get a sense of shadow there.

earlybird_759.jpg

Well, that's great, we've got a good looking shape now.  Because this is an iOS app icon, we're not going to add shadows ourself.  The system will do that for us when the app icon is placed on a homescreen, but here's what it would look like.  This is an extremely simplified version of this process. For an actual shipping product, I would play around with colors, gradients, textures, depths, etc... to find a look that fits my specific needs.  With these basic tools though, you can create some really knockout looking app icons to draw in users and get more downloads.