App Icon Design Tutorial for App Store Optimization

app icon design tutorial

An app icon is one of the major components of app store listing page optimization and can be a major factor in the success of your app. Here’s a great app icon design tutorial that will help you create one that will get you more downloads.

App icon: why is it important?

app icon design tutorialPut simply, your app’s icon is one of the first things potential users see when they come across your app. It appears in search results on the Apple and Google store as your app’s major selling point along with its name, screenshots and ratings, and remains a featured graphic throughout its detail pages. In other words, it’s the major visual that users contemplating a download will associate with your app. While we focus on the mobile experience, we’d add that your app’s icon becomes even more important on the web versions of these storefronts since the search results pages there provide users with even less information.

But its importance doesn’t end there, as the icon will also be crucial after the download. In fact, app downloads are great, but matter little if they don’t result in app usage. The average smartphone user has 42 apps on their phone, but only uses 10 of them on a daily basis. The rest, too often, get ignored. As you can imagine, an effective app icon makes your app stand out among its alternatives, both before and after the download.

Designing a beautiful and effective icon

So we’ve established one thing: your app’s icon matters. But just how do you make sure that this icon is as good as it can be? By following these guidelines:

1. Consistency

app icon design tutorialFirst and foremost, your icon should be consistent with your app’s core value proposition – the one core functionality that is worth highlighting. An app designed to improve email productivity is unlikely to benefit from a neon green emoticon, just like a gaming app should not include an abstract symbol in muted colors. That consistency should also extend to the screenshots you share with your audience in the app detail screen, ensuring that potential users experience a single coherent selling point.

2. Follow the guidelines

Chances are you offer or are planning to offer your app in the Apple iOS store and/or the Google store. As it turns out, both of those have guidelines for what they’re looking for. Check out Google’s Icon Design Guidelines and Apple’s section on icons within its Human Interface Guidelines to learn more about each platform.

3. Design for all screens

app icon design tutorialWhat device will your users use when they search their app store? Truth be told, you don’t know the answer. That’s why you should design your app icon with all possibilities in mind, requiring an image that looks equally as good in a 1000 x 1000 resolution than it does on an iPhone 4 screen. Creating the icon in vector format allows you to easily scale the image for all possible sizes.

4. Keep it simple

In app icon design, simplicity is the key to success. Focusing on a single object, ideally in a unique shape, makes your app stand out from the countless alternatives available in the app store. That unique shape, of course, should not be a word; if you can get away from using text at all, your app is more likely to stand out and succeed. Detail can work, but only if it doesn’t doesn’t look busy on a small screen or stand in the way of your app’s overarching, consistent theme.

5. Check your competitors

app icon design tutorial
Do some of the companies you’re in direct competition with have an app, and what does their icon look like? The last thing you want to do is create an icon that looks similar to theirs or doesn’t do a good job differentiating you. Remember, you want to stand out from the crowd, so knowing what your competitors are doing and creating an app icon that distinguishes your solution from theirs can go a long way toward being successful in the crowded app store.

6. Use vibrant colors thoughtfully

Now, we’re getting into the design details of your icon. Vibrant colors are perfect to stand out from any background, but they also carry the danger of a seemingly busy design. That’s why you should choose your colors wisely. Many apps use variations of blue in their icons, so staying within the same palette risks blending in with other apps. On the other end of the spectrum, you wouldn’t want to use every color but blue just to stand out. Vibrant colors are perfect when used thoughtfully.

7. Evoke emotions

app icon design tutorialAs you probably know, we as human beings are not rational decision makers. We like to think that we are, but the reality is different: we make most of our decisions based on emotions. So much like your other marketing materials supporting your app, the best icons evoke that emotions to increase downloads and use. For an example of what we’re talking about, check out this case study on the game Ruby Run, just one of many action games using character expressions to transfer that emotion to potential downloaders.

Making sure you reach your goal

Of course, even following all of the above steps doesn’t guarantee that you’ve designed an app icon your audience will love. That’s why you should always make sure to test your designs. A great way to do that is using A/B testing, which can give you ideas on which elements of your icon work and which don’t, as well as how your icon integrates with your app store page.

TestNest - A/B test your app store pageWhether you’re designing a new app icon or simply want to test how successful your current icon actually is, we’d love to help! TestNest provides you with analytics that allow to test every single aspect of your icon and app store page in general.

Sign up now and start running your app icon experiments for free!