10 Tips for Successful App Icon Design
Designing a good icon for your app is an important part of the app development process and not one that should be taken lightly or left to the last minute. The icon might just be a few pixels square, but it’s as critical as a cover to a magazine or the box to a new bit of kit. It’s one of the few ways you have as a designer of communicating to potential users – so it should work hard to get across the style and content of your app and entice people to download it.
Here’s my top 10 tips for successful app icon design, which I hope will guide you through the often painful but mainly enjoyable process and result in a more beautiful iPhone home screen and iTunes App Store for everyone.
We’ve just launched our latest app, Split Decision: The Nonsense Knowledge game. The icon was one part of the design that we worried about, discussed and revised for almost the entire length of the project. I thought I’d share some of the lessons we learned during the process.
1. Make a list of words that represent your app, and make sure the icons “says” them
Your app’s icon is the equivalent of a book cover. It needs to represent your app creatively but effectively – and what I mean by this is that clarity is critical. Potential users will be using your icon to decide whether an app is worth a download, and people who have it on their phone need to be able to find it on their springboard, and find it enticing. If your app is a game, make it look playful, if your app is a utility it needs to look useful, if your app is all about entertainment, the icon needs to look entertaining. Like all good design, consistency is really important. Make sure your app icon uses the same graphical style, colours and elements from within your app – they need to look like they belong together, like the icon is an extension of the app.
2. Do some competitor research and aim to be better
If you want your app icon to be better than that the rest, then you need to be aware of the competition. Spend some time browsing through the app store at the categories your app will appear in, look in Dribbble, and print them out and put them by your desk to remind you what you are competing against. The aim is to make sure your icons look as professional (or more), and stand out more than your competitors.
3. Use a pencil and paper to generate some ideas
Once you’ve got your list of descriptive words, you’ve checked out the competition, the best way to start designing your icon is to sharpen your pencil, get out some A4 and start sketching. At this stage, you need to aim to generate as many ideas as possible, and with plenty of variety – good app design asks a lot of you as a designer, so having lots of options at this initial stage really helps. Split Decision is a trivia game where players need to decide which of two fun categories things fall into; unlike many games, there are no characters in it, and the questions are quite wordy, so a lot of my initial ideas focused on the idea of a ‘split’, of the two alternatives. However, I did do a bit of sketching pulling in the sunshine and clouds we used as a backdrop, and this proved invaluable later on.
4. Don’t include words
As a rule I try never to use words on the icon. Not only will you have problems with localization, but typefaces don’t scale to the smaller sizes such as the dinky 29px version used when a user searches for app on the iPhone. That’s just the practical reasons to avoid it – visually, icons with words on them look cheap, boring and busy. It’s lazy design – don’t forget that you’re designing an icon (the word icon comes from the Greek word εἰκών eikōn meaning “image”). In the icon below, what do the words add? Just no need for the words – actually there’s nothing good about this icon, but the words don’t help
5. Simplicity is strength
Leaving off words is one way to keep it simple, but in general, you ought to make sure your design isn’t too complicated. As I mentioned earlier, clarity is really important. The best app icons make an instant impact; they don’t make the user work to figure out difficult shapes and colour combinations. App icons are very small and if you try to fit too much into a small space you’ll end up with an icon that’s illegible and easy to ignore. Strong yet simple shapes and lines will do more for your icon than highly illustrative designs. Think Mr Men or Miro more than Mutant Ninja Turtles or Monet.
6. …But don’t forget the detail
It might sound like a contradiction, buy don’t forget to include some detail on your icon designs. Simplicity here doesn’t mean being plain. Add a little bit of shadow here a highlight there, spend time on your gradients, pick out a delicious texture for the background, add some love and attention to the bevel or emboss. Don’t be afraid, zoom right in to the pixel level and make sure it looks perfect and well formed. No pixel should be out of place because at such a small size, the difference between a beautiful icon and a crappy one can be one out of place pixel. With Split Decision, even when we’d decided on the basic approach, I spent a lot of time playing with the details – the lines of the clouds, the amount of wood texture in the background, how the main shapes interacted with each other, and how I could keep them clearly defined.
7. Don’t use the Apple Gloss
No arguments, it looks terrible: Go in plist file and and click on + sign then search for, Icon already includes gloss effects = NO;
8. Design it using Photoshop
Adobe Photoshop is your friend. Embrace it, learn how to master layer styles, use vector layer shapes and layer styles to draw everything in your icon (like gradients, strokes, shadows, glows etc etc) and then you’ll be able to scale it without fear of losing any quality. Your icon needs to be 72DPI and RGB. Other designers use applications like Pixelmator, Fireworks and Adobe Illustrator, and I’m sure they’re very good and many beautiful icons have been designed using them, but for me Adobe Photoshop is the daddy. It’s the industry standard, the most widely used and therefore has hundreds if not thousands of free layer styles, textures, patterns, templates and more to download and get you going. I swear by it and wouldn’t use anything else. It’s like a right hand to me, it’s my paintbrush, my pallet, my paper and my friend, all rolled into one.
9. Use this template
I’ve used many icon templates before, usually just to present my icons to clients or stakeholder, and I only recently found this template. It’s brilliant and a massive time saver. It uses smart objects in Photoshop which means you only need to draw your icon once (unless you need to manually adjust and perfect some of the smaller sized icons), save the smart object and it will automatically create all the various sizes you need and also lets you export them using the correct PNG settings and using the correct file name for Xcode. My favourite part is that it also pops your icon onto a mock up of an iPhone screen and iTunes screen so you can see how it will look in sitú. Brilliant.
10. Tweak, polish and don’t be afraid of criticism
Your aim is to make users want your icon on their iPhone or iPad. They need to feel desire for it. So show it to people, get other’s opinion of it before you send it off to Apple. If people don’t like it ask them why, spend some time addressing their criticism. Better that people complain before your app is in the app store and those complaints are turned into bad reviews. You want people to love your icon, they should be compelled to tap on it, touch it. It needs to be attractive, tactile, interesting and enticing. So spend an extra couple of hours on the extra detail, tweak it, perfect it, polish it.