Jeybee

Focus on the Icon - App Store Icons that Beg to be Downloaded

It’s come time for YAAL (yet another app launch) and with it comes the usual raft of important marketing materials; icons, screenshots, descriptions and keywords. 

This post I’ll be concentrating just on the icon - going through many different versions and trying to make it stand out in the crowd.

You may not categorise your icon under marketing but I believe it is one of the most important aspects of getting your app noticed not just by consumers in a crowded arena, but by Apple too.

What makes a good icon?

Just pull out your iDevice. If you’re anything like me, you won’t have many apps that have bad icons. If I’m going to have to see it often, it’s got to be aesthetically pleasing.

As you look through, it’s quite easy to pull out the common factors:

• Bold central icons
• Clean backgrounds and surrounds
• Use of the retina screen for extra vector detail or textures

If we look at the App Store paid top 16, we can see that about 13 adhere to these rules. 

The odd ones out are Jellycar 3, Potty Racers and Call of Duty: Zombies. These are published by Disney, MTV and Activision respectively so perhaps the lesson here is “Feel free to ignore these rules if you have huge marketing budgets”.

So, what’s the new app?

Enter Etsy Lovers stage left. Etsy Lovers was developed for the Etsy Handmade Code contest all the way back in November. (It won the grand prize - yay!) 

The app lets browsers see items, explore shops, search in a variety of ways and share items. They can also create galleries and wishlists.

( For those who’ve never come across Etsy: it’s a marketplace of millions of handmade and vintage items. Unique birthday presents, niche geekery and great one-off pieces are just a few of the things you’re likely to find there. )

The first step: narrow it down

With apps, unlike games, there aren’t any main characters and usually no standout graphics to speak of. In this case, there’s no obvious choice of icon.

This calls for a little brainstorming!

• Handmade items are the biggest selling point of Etsy
• Etsy users are predominantly female (67% according to Quantcast in Feb ‘09)
• We want to evoke that feeling of a quality, handcrafted item from the outset

After a period of umm-ing, I had the idea of making the icon look like a quilt, complete with stitching. It was the clearest idea I could come up with that shouted “HANDMADE!”

The second step: quick protoicons!

I headed off to Illustrator with a clear enough idea in my mind that I didn’t sketch it out first. Illustrator’s lovely vectors will come in handy when the SuperRetina* display appears.

* may not exist… yet.

Here it is on-device (with minor post-processing) and straight from Illustrator. Every step of the way I tested on the retina display. The pixel density makes a huge difference to how it will look to the end user.

Thoughts: Not bad… it’s rough. The sketchy style feels handmade and gives it character but it’s very basic. It’s missing Apple’s trademark clean style.

Throw it out and start again. This time going for a very clean look, but taking greater advantage of the display by adding additional texture and detail.

Thoughts: Hmm, we’re on to something. This looks good, but it doesn’t say click me. Where’s the icon that is the signature of so many other top apps?

The obvious icon for the centre comes from the name: Etsy Lovers. It’s a heart of course. But do we have to worry that a heart will put off some of our audience? In this case probably not, given that it’s a female-dominated community.

Thoughts: I like it. It’s bold, it stands out. But one thing it doesn’t say is handmade - it’s just too shiny. Wouldn’t it be great if it looked like the heart was stitched as part of the quilt? YOU BET.

The third step: iterate to your heart’s content

Thus began the heart factory, pumping out variations on a theme. These only include ones that made it to the device. It doesn’t count ones trashed before they hit the Export menu.

As you can see, I moved through a lot of styles. Some definitely look stitched on, but the problem with them was the lack of contrast.

Many of the later revisions have very minor changes in lighting and bevel. If you look at other app icons, the majority of good ones have these touches.

You’ll notice that none of these designs have the standard Apple-provided gloss on them. That’s because for 99% of icons, it just looks awful. Don’t use it, it’s easy to turn off and you can create similar effects honed to your individual look.

The Final Icon?

I ended up returning to the original heart and combining it with the stitched style to at least get the essence of the handmade look I was aiming for. 

There are slight differences between the iTunes version and the on-device one. There is additional detail in some of the textures, and some were enlarged and sharpened for the device so that they were visible at a smaller scale. 

Why the question mark?

On the whole I’m happy with it. But I’m a fan of critiquing my own work after I’ve been away from it for a while. 

This is the icon that was submitted with the 1.0 version, but it may not remain that way in the future.

The brightly coloured background draws some focus from the heart, and while I spent a lot of time on the foreground I could’ve just as easily altered the background and achieved the same contrast.

Even as I wrote this, I produced another set of variations. I do very much like a couple of these, but I’m also a fan of my position in the app review queue so I won’t be changing it now.

There’s always 1.1 eh?

What’s Photoshop?

If you’re not a designer (I wear all hats in mediocrity), then if nothing else, this is the part you want to outsource. It is a fine art, and there are some amazing icon designers out there. It could be the difference between a feature or a quick slide in to obscurity.

There are a lot more icon sizes you need to produce but I do put the most time in to the retina and iTunes versions. Here’s an exhaustive list of them all.