app-store-icon-design

If you’re designing a game that is downloadable, be it a mobile game or traditional desktop game, something you’ll need to consider at some point is the icon for the game. It’s an essential aspect of the game, though sadly it’s rarely given the love and attention it deserves.

We’ve talked in the past about creating a good first impression – icons are possibly the most important asset you have aside from the game itself. Regardless of what type of game you’re creating, the icon is the thing that will represent your game on the user’s homepage or desktop. If your game is a mobile app, the icon is often the first thing people will see before they buy your game – a well-designed icon will help you cut through an incredibly crowded market place.

Whilst a poorly designed icon may not stop people from playing your game, a great icon can entice people to play more often – especially useful if your revenue model is dependent on repeat use.

We’ve put together a set of principles to help guide you in creating beautiful icons that make people want to click / tap. (We’ve focused more on principle for mobile game icons as generally the icon is the main asset users see before downloading, as opposed to PC games on services such as Steam.)

Note – we’re talking explicitly about icons here – the little square graphics that represent your game in app stores, on phone and on people’s desktops. We’re not talking about logo. Whilst there are cross overs, logo design is arguably a different discipline and something we’ll cover off at a later date.

Make it consistent

Icons should be as representative of your game as possible. We’ve already covered keeping it simple, so by representative I don’t mean trying to cram a screen grab into the little box. Rather the icon should take elements and styling cues from the game. If the game is cartoony and about fruit, put a cartoon piece of fruit as the icon. It’s an obvious sounding principle but there are an alarming number of games with icons that are seemingly unrelated. Users will have expectations of the game from its icon – if there’s a disconnect then they you’ve just annoyed them. Not the best way to start a potential relationship.

Stand out

Before starting to design your icon take a look at what similar games have done. It may give you some inspiration but more importantly it will show you what you’re up against and how to stand out. Think of app stores like supermarket shelves – some people go shopping knowing exactly what they want, but a significant number spend time browsing shelves. Anyone in marketing knows how important package design is. Next time you’re in a supermarket check-out the cleaning products aisle – they all tend to be white (because people associate it with clean) but here in the UK there are a few products that stand out, Cilit Bang being one, because they have a completely different colour.

They’re the first products you spot on the shelves. The package is still clearly for a cleaning product – long neck, spray nozzle – but yet it grabs customers’ attention due to its stand out. One quick tip to help stand out is to avoid using Apple’s gloss feature. It is specifically designed to give icons a consistent look and feel. The exact opposite of what we are going for.

Keep it simple

Icons are small. They are meant to be simple; the simplest possible way of representing your game graphically. First things first, avoid text. Text is a big no no in icon design. Icons should be graphical, should be instantly recognisable. Text will always be harder to read than looking at a picture, especially when we’re dealing with such a little box. Secondly, avoid clutter. Too many elements will make your icon ugly and confused, and will make people think twice about downloading.

Finishing touches

Whilst I’ve just hammered the point that the key for any good icon is simplicity this doesn’t mean it should be dull or lifeless. Pay
 attention to the little things, the small details. They can make the difference between a good icon and a great one. Shading, gradients, bevels – you may think the icon is too small to notice but you’d be wrong. Every little thing you can do to optimise your icon, the better.

Test it

There’s no rule that says you can’t show people your icon before submitting it. In fact I’d be in favour of a rule that says you have to. Show it to friends and family. And then show it to people slightly
more impartial. Get them to tell you what they think when they see your icon. Mock up what your icon looks like next to competitors’ – see if people spot yours first. Show them your actual game and see if the icon does a good job representing. Ask as many questions as you can before they tell you to bugger off.

So those were our top five tips; if there’s anything we’ve missed, share it in the comments. And if you’re working an your icon design at the moment don’t hesitate to share your progress with us if you’re looking for some feedback.

This article has 1 comments

  1. Orktech

    Good reading material. I would like to add something. Make a screenshot of app store of your choice and place your icon in it. This will allow you to understand if your icon stands out among others. You may have a nice icon but it’s no use if nobody notices it.