Blog / Icon or Ican't be bothered.

Tom Dickinson
April 28, 2011

Guide to illustrate a badly designed iPhone or iPad icon.Picture the scene. You’ve designed and built an iPhone app. You’ve put your heart and soul into it. Years of experience have finally come to fruition; all your imagination, moxie, know-how and learning from computer science or graphic design 101. This ‘ultimate’ iPhone app is the app to end all apps. The UX is a dream, it looks incredible, and it works with such finesse and beauty it’ll probably be at the top of the app store charts for a very long time. It’s your Dark Side of the Moon. You go for dinner with your parents and explain to them that you’ve just achieved the impossible, that you’ll probably be on the cover of Wired by Christmas, and as you pick up the bill you pledge you’ll probably never have to work again… ever.

But, you have yet to design the icon. Hmmm

The app store is booming, iPhones and iPads have become so popular that anyone who’s anyone has thought of a great idea for a new app and wants to make it a reality. But, with 70,000 apps and counting the store has become a mad supermarket of games, tools, lifestyle enablers and frivolous oddities. A lot of the apps out there are amazing, but anyone who’s been a prolific downloader of apps will know that a large proportion of these aren’t great; some don’t deliver on what what they promised and some are downright rubbish. It’s a competitive place, and even great apps can remain unnoticed, unused and unloved.

Designing the icon for your app can be make or break for your product. First impressions are everything, especially for apps and in a crowded market place, and you have to stand out. A beautiful, considered name and icon can draw in the user’s eye and you could have a successful download. Even if the user doesn’t like it, at least they tried it because it looked great. That can’t be said for a lot of the other apps in the store.

Your icon should encompass what your app is all about, the tone, style and content. It must communicate quality, but also a compelling and exiting experience on offer to the user. It’s sounds simple, but it’s very hard to get right, and with more and more apps out there, millions of icons just aren’t cutting the mustard. They’re not good enough to compete.

When you’re designing communication graphics for any media of a reasonable size, (ie. a website homepage, or even the launch screen for the app itself), you have room for imagery, typography, colours, shapes and all your usual methods and tools to inspire the public. However on the iPhone, app icons are so small that a different approach if often required. All the things you need to say should be distilled right down to a 57x57 pixel PNG.

The icon should be very simple, using colours and shapes that can look good at that size, but more importantly communicate succinctly. It’s very unlikely that typography will look good in your icon. This is not always the case and there are no hard and fast rules (clearly). An icon is a graphical representation of something more; be it a word, concept, operation or object. Words themselves are visual carriers of information pertaining to an concept, operation or object and therefore it makes little sense to include them. It can be more effective to find a pictorial metaphor and utilise that. Don’t forget that when the icon appears on the app store the name will be written next to it anyway! So if you were selling a sandwich app, a gorgeous picture of a tasty sandwich would transmit the message more effectively than writing on the icon: “Sandwich App, recipes to a make nice lunch.”

As well as this, people want and increasingly expect their collection of apps to not only reflect who they are; their life choices, wants and needs, (for themselves or for anyone who might glance at their phone) but they also want their collection of apps to look good, like they’ve made great choices and decisions in their downloads. The apps themselves help make up the 'desktop’ of their smartphone and I believe some apps get deleted simply because they’re icons are ugly (and obviously after they’ve lost interest in them). This might sound shallow and frivolous, but by the frankly disposable nature of downloading apps, particularly free apps, would you expect any less?

As with anything, so much can be achieved by thinking simply and in an out-of-the-box way. This doesn’t have to mean the design of your icon has to be compromised; be it in terms of textures, gradients, details or content. But, you might find designing the perfect icon for your app to be a lot harder than designing the app itself. So many apps out there are produced with skill, determination and pride, but it seems a huge shame to me that so many icons don’t follow suite.

Happy designing.