Icons play an extremely important role in the Click Through Rate (CTR) of a mobile application. Just like in real life, the 1st impression matters a lot in the App Store. Apps need to have optimized icons to stand out from others. Check out our 9 Tips to help you create awesome icons…
The importance of visual content
People tend to feel overwhelmed by the humongous amount of various information and content present everywhere. Their attention is therefore very difficult to catch. In consequence, humans give way more importance to visual content rather than written content. Why? Because the message is faster delivered to the brain, it’s pure biology.
In fact, we are becoming more and more lazy: we don’t want to think too much. We want things to be simple. Short. Straight to the point.
The 1st impression
The previous reasoning is obviously valuable and applicable to the downloading process of an app.
There are 3 types of app downloaders:
1. The ones looking for a particular app. They enter keywords or the title in the search box and usually find it quite quickly.
2. Those who are searching for an app in a specific category. They usually browse the category until they find an app that seems great.
3. Users who are typing keywords as they are looking for a certain type of app but don’t have any specific app in their mind at first.
We will focus on type 2 and 3 here. When browsing the App Store, users scroll down tens of apps trying to find the one that best suits their expectations.
What they first see is the app icon. Then, they see the app title. Their eyes are usually also attracted to ratings which play a very important role as we’ve already seen.
The major difficulty resides in actually making users click on an app. To get their attention and then to convince them to download the app.
Here are our 9 tips to create the best icon:
1. Keep it Simple!
We said earlier that people were seeking for the easiest way to get what they want. Icons therefore need to be simple to understand and extremely clear. You don’t want to create an icon showing multiple features or many details that may not be perceived at first sight. Plus, remember that icons are relatively small when displayed on smartphones. If they’re too complicated, they may confuse users.
Usually, app developers choose to create an icon that reflects their app as it describes what the app does. Other icons don’t especially help to understand the app but they are just so nice that people are still tempted to click on it.
The most important point resides in the simplicity of the icon. It should not be loaded with too much content. Don’t use too much colors either, one or two main colors should be enough. Simple icons drive much more conversion than complex ones.
For example, these 3 icons seem too complex. Especially when their size is small. They hold too much content and are difficult to understand.
2. “Better borders than no borders”
It has been proven that icons with borders have more impact than icons without any border. The reason is quite simple: borders emphasis the content of the icon and therefore make it stand out in the App Store.
Plus, borders make the app icon stand out from any mobile wallpaper.
We therefore advise you to place a nice border around your app’s icon, preferably with strong colors or flashy ones. Here are some good examples:
The last one is particularly interesting icon as the border allows to create a 3D effect. The smartphone seems to get through its emplacement and therefore stands out in the App Store.
3. Avoid using text
Icons are usually better perceived when they don’t contain any words. They tend to generate more clicks and are less confusing. We always say: “a picture speaks a thousand words”. It is absolutely true. You app icon does not need any characters. It has to be understood only by itself.
Usually, the app title comes in complement with the icon. Titles are therefore bringing words to your app. And of course, in a second step, your description.
Here are some bad examples of icons with too many characters which creates confusion:
4. Use brand logos only when strong branding
Developers sometimes wonder if displaying their brand logo might be a good idea for their app icon.
It can actually be the best thing to do if your brand is already quite popular and has a strong visual identity. For example Nike, Snapchat, Vine, Spotify or Tinder for example.
However, it is not recommended if your brand logo is not commonly known. Indeed, the point here is to be quickly understood by your audience. If your logo is not recognized, it won’t retain any attention and users will skip your app.
5. Be flat and matte
On iOS6, Apple’s icons had a glossy effect. Apple actually offered the possibility to apply a glossy effect on app icons before their submission on the App Store. Some developers chose to use it with the hope of standing out from other apps.
Actually, the effect was quite the opposite. This shiny effect blended the icon in the App Store like it would be part of it. It made it look like other Apple’s default icons and therefore absorbed it rather than pushing it forward.
Apple seems to have changed its mind. On iOS7, default icons are now – for most of them – back to “normal”. Here’s a comparison between iOS6 and iOS7 Apple’s icons.
There are still many icons with a glossy effect even if Apple stopped it. We strongly recommend not using any kind of shinny effect on your icon. Remain matte and flat; it’s the new trend.
6. Update your icon
It is very important to update your icon from time to time. For example, if you create a special edition for a special occasion or season (St Valentine, Christmas, Halloween, summer, winter and so on…) don’t hesitate to give your icon a fresh look matching your new version.
Update your icon if you update your app with important new features. You might want to rethink your icon, as it may no longer be relevant enough to describe or represent your new app.
Icon updates don’t necessarily need to be totally redesigned. Let’s take for example The Simpsons: Tapped Out. The icon of this app changes quite frequently according to seasons or special occasions. We can notice that the icon remains simple and most of all, quite similar. Homer is running in pretty much the same way on every icon. The only thing that’s changed is the background scenery.
|Standard Icon||Winter||Summer||Whacking Day|
7. Analyze and compare your competitors
Before creating your icon, you might want to check what your competitors are actually doing. It is indeed very important to take into consideration what similar apps offer. Just like in every business, benchmarking is an important notion that must not be forgotten. It’s an important part of the process of your app launch on the market.
By monitoring your competitors, you can easily come up with totally different ideas or with improved ones. The point here is to stand out from any competition by adding a certain value on your icon.
8. Test your icon
When your icon is finally ready, don’t think that the job is completed. You absolutely need to test your icon among different people. Ask their feedback. Show them a variety of icons and don’t tell them which one is yours. Ask them which one is their favorite. Ask kids to pass the test. Because kids always say the truth and they are considered to be a valuable reference.
Although the first and main reference is the App Stores’ backgrounds, you still need to test your icon on different wallpapers. Keep in mind that smartphones allow customizable backgrounds. Your icon might look fantastic on a white background but terrible on a black one. It is important to look good on every color.
9. Useful resources
If you want to do your app icon yourself, check out this App Icon Template website. It easily shows you how to design a great app icon.
There’s also this nice Photoshop tutorial website gathering different tips and tricks on how to create different User Interface design.
Don’t forget that sizing is extremely important. Here’s a useful Tumblr showing the different required sizes for an iOS app’s icon. If you want the resizing of your icon to be done quickly, go to MakeAppIcon.
Check out Pixel Resort for more info on app icons.
What about you? Are you planning on creating your app’s icon? Did you already create one? Did you hire a designer? How does your app icon look like? Share your experience in the comment section below!
By Laurie Galazzo