Designing a mobile app icon users will remember

DevToolsGuy / Monday, March 2, 2015

The leading App Stores have over 1.25 million Apps available. An amazing number which will only continue to grow. With thousands of tools designed to help with anything from everyday tasks, travel, and entertainment to the truly bizarre, standing out from the crowd and getting potential clients to tap on your icon while browsing is an enormous challenge.

For many small tech startups, App icon design is often left to the developers who’ve written the code and built its features. However, unless you’ve completed a degree in graphic design, being a developer doesn’t instantly mean you have an innate understanding of icon design, yet icons require serious planning. It’s all very well having the best codes, APIs and intuitive user experiences; if your icon is busy, unclear or boring, it’s unlikely users will ever get to know what’s inside.

There’s no magic bullet for the perfect icon design - this is of course subjective. Nonetheless, there are some important rules you should take into account when designing it.

What is a symbol?

As children’s’ minds develop, they learn to understand symbols. Younger children are unable to make the mental leap between a representation of a thing, and the thing itself - we’ve all seen a toddler trying to grab at a TV screen, believing what’s displayed is actually there. However, they gradually learn to make the link between images and the things they represent.

In essence, this is the fundamental concept behind designing good icons. When companies design logos, graphic designers know that it’s essential to encourage consumers to make associations between an image and a product. So, when creating an icon for the App Stores designers need to consider two principal design stages. They first need to think of the “story” behind the icon and subsequently they need to think how this should actually be represented clearly.

Tell me a tale

The basis of good icon design (as with any marketing symbol) is to boil down the story of your App into an image which gives consumers a good idea of what it’s all about.

Say you have come up with an App which tells the consumer about their carbon emissions as they travel around their city. When boiling it down to an icon, you need to decide on what makes your App unique and how an image can tell the story. From this point you can start building an icon which will allow potential customers to guess what the App is about. For the above example, an icon which represents travel, carbon dioxide and measurement would be some of the key points and from there users will start filling the blanks.

Secondary to this is the importance of triggering an emotion in your potential customer. Again this is part of telling the story, but aiming to spark an emotion with your icon is essential - whether it be humor, fun, surprise or distraction. It’s generally advisable to aim for positive emotions; no one’s going to download a weight loss App if the icon shows a miserable overweight person!

Now design it

Having laid the foundations, there are a number of steps to consider when turning this into a fully-fledged icon. There’s a lot of good advice out there on best practices, tips and inspiration for making eye-catching icons.

One thing’s for sure here - there are no hard and fast rules when it comes to designing icons. What works for one App may make no sense at all for another and this is why it’s so important to spend time thinking about the story behind your App and the meanings you wish to convey. Nonetheless, there are some dos and don'ts which provide a pretty good starting point.

 

Do:

  • Think about how it will appear in different screen sizes
  • Aim for one unique shape
  • Focus on simple concepts
  • Test your icon against different wallpapers
  • Spend time on subtle details users probably won’t even notice
  • Consider how people from different cultures will react to your icon

 

Don’t:

  • Use too many colors - less is usually more (between two and four)
  • Include words unless unavoidable - they look messy and are hard to read on small icons
  • Use photos - they look bad in the App Stores

 

The rough guide

No icon is the same, and of course the rules outlined above need to be modified to your App’s needs. That said, just looking through the store will give you a good idea of what looks good and what looks bad; many of the most appealing icons are simple, eye-catching and tell a story.

As small and insignificant as icons seem, they are crucial when it comes to attracting the attention of potential customers. Using the above guidelines as a point of reference can help developers and designers focus their thoughts when drafting their icon ideas.