- Posted by Timur Taepov
- On March 24, 2015
- a/b testing, app icon, app icon template, app marketing, app store optimization, aso
Hello once again, my dear fellows! In this episode we will be covering probably one of the most important issues in app store optimization. Today’s episode is entirely about the app icon and why it matters much more than you might expect.
I will explain why it is so vital to pay particular attention to your icon,, we will go through apple’s guidelines, some other useful tips, and, moreover, I will point out some other tools and online services that will simplify and speedup your app creation.
So, let’s get started!
One of the first things that people will see when they discover your app is your app icon. Your app icon is vital for your conversion rate because it makes the first impression and provides the key idea of your app. You have to make that great first impression by having an amazing app icon. It has to convey the functionality and the essence of an app while being scalable, unique, and just downright attention grabbing. To that end – Avoid using faded colors and anything else that makes it boring.
Also, you should never use text – for one thing – when your app goes international, that text won’t translate into other languages and cultures nearly as well as a non-text icon. For another, and perhaps more importantly, text rarely scales well on smaller devices.
And now, let’s go through the key tips from the iOS human interface guidelines. It is important that I remind you that these are key requirements that everyone has to meet. Now, you might be thinking that you don’t do iOS app development so these won’t apply to you, but if you listen, you will hear that they are easily transferable to any other app platform and are sound advice regardless of what platform you are developing on.
Use universal imagery that people will easily recognize. In general, avoid focusing on a secondary or obscure aspect of an element. For example, the original Mail app icon uses an envelope, not a rural mailbox, a mail carrier’s bag, a post office symbol, or an extinct carrier pigeon.
Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can become confusing and may not scale well and will appear muddy at smaller sizes.
Create an abstract interpretation of your app’s main idea. It rarely works well to use a photo or screenshot in an app icon because photographic details can be very hard to see at small sizes. Typically, it’s better to interpret reality in an artistic way, because doing so lets you emphasize the aspects of the subject that you want users to notice.
If you want to portray real substances, do it accurately. Icons that depict real objects should accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey the object’s weight and feel.
Don’t use replicas of Apple hardware products in your artwork. The symbols that represent Apple products are copyrighted and can’t be reproduced in your icons or images. In general, it’s a good idea to avoid replicas of any specific devices, Apple or otherwise, in your artwork, because these designs change frequently and icons that are based on them can quickly look dated and run afoul of copyright laws.
Don’t reuse iOS app icons in your interface. It can be confusing to users to see the same icon used to mean different things in multiple locations throughout the system.
So those are the guidelines from iOS and they are a good foundation. Next I’d like to talk with you about app creation. This process can be simplified by some great tools and services. I’m really inspired by great designer Michael Flarup, from Denmark, he creates awesome app icons and distributes his app icon template absolutely for free. To get this awesome tool go to appicontemplate.com
Michael’s app icon template will help you to make affordable app icon in no time. You will need Photoshop to use it though. Here is a short guide how to use it. First, download the app icon template from appicontemplate.com for either ios or android. The folder will include 3 files: readme, action file, and the photoshop file. Then open photoshop, double click on the action file, it appears in photoshop. After that, open the photoshop file. There are a couple of folders with layers on the right. You need the layer called «Edit me and save». Right click that layer and hit edit content. Here you will see a blueprint which helps to align the elements of the icon. It also contains different layers with backgrounds and effects. As soon as you are done, export it in the different dimensions that you will be using. That is all there is to using this amazing toolset Michael Flarup has created for free.
There is also a great online service for resizing app icons quickly. As you know, you will need many different dimensions for an app icon and it might be time-consuming to make them all manually. So to help with this, go to makeappicon.com and generate app icons of all sizes with a single click! Automation is what you have to employ!
Ok, and lastly, let’s talk about app icon performance. Do you agree that one version of an icon is not enough? Why? Just remember how important first impression is and how much influence it has on conversion rate. Thus A/B testing, once again rules supreme and should be at the top of the agenda. One version of an icon can perform two or more times better than another version! There is no doubt that you have to design and test different versions of app icons before you assign your app to the app store.
As you can see, your app icon is a vital part of your app. Spend the necessary time to make it really awesome! I made a collection of app icons to help inspire you and get you started. Find the collection in the notes for this episode on justforward.co/5. You will also be able to grab all the links I mentioned above in the notes at that same address of justforward.co/5/
Thanks for coming. Talk to you again next time!
Guys, let me know what you think about my podcast! Please, visit my iTunes page by this link justforward.co/review and leave your reviews. I appreciate it.
Mentions: @flarup @robocat