MobiLoud

Design Best Practices For Your Mobile App Icon

Your app is built.  All that’s left is to publish it on an app store. The only problem is attracting your potential users to download your app above everyone else’s. The first thing an user will see of your app is your icon, and in icon design, first impressions are most definitely everything. Here are a few tips that will help your app’s icon stand out among the rest.

Far more apps are downloaded directly from Apple’s App Store and Google Play than through any number of other avenues, such as app websites, reviews, PPC ad campaigns, Facebook, etc. Recent stats put app store discovery at 70% of app downloads, so it’s worth investing time and effort in getting this right.

This makes ensuring that your app stands out and represents your brand effectively on the App Store grid and Google Play libraries really important to guaranteeing your app is as successful as it can be.

Your icon has added value in that – if done well – it promotes repeated use of our app. This is particularly true of apps that don’t have obvious utility, such as games and content providers. A great icon can draw the attention necessary to make sure you’re on your user’s mind when they’re looking for a distraction.

Hire a professional graphic designer

An experienced designer can help you develop an overall visual style for your app icon, consistent with your app’s design.

Some key tips can help you keep from saturating your icon with unnecessary details that can make it look messy.

Simplicity is king

Overly complex icons lose definition and become unnoticeable on the app store / google play search results pages. While it might be tempting to adorn your logo with as many bells and whistles as your designing software will allow you too. It will definitely catch a consumer’s eye, but not necessarily for the right reasons. Try to keep your design as clean and essential as possible, this is a technique major app companies employ; an easy to remember logo makes an easier to remember app, makes a more iconic icon.

Make your design bold

Focus on a basic concept and try to ensure it really jumps out at you. Take the Angry Birds icon as inspiration: it’s original, stands out even at small sizes and really grabs your attention. Like in any branding exercise, choose a colour palette in advance and work out how to use them in a complimentary layout before worrying about the details.

Make sure the app icon looks good on a variety of backgrounds

Don’t just test your icon on a light or dark background because you can’t predict which wallpaper people will choose.

For iOS apps, don’t use a transparent background

If you use transparency the resulting icon will appear to float on a black background, which tends to look especially unattractive on the beautiful wallpapers that users choose. On Android instead, you’re free to use transparent backgrounds to give your icon any shape possible (but keep it simple!).

Use text in moderation

Breaking up striking shapes with unncesssary details that often dilute the overall impact. Some sites advise against use of text entirely; I wouldn’t go that far, it can work, but bear in mind that if you do use it, it has to be large and a part of the design – not simply pasted over it, or even worse, long descriptive text.

icon_340A couple of icons that do text well are the BBC News app (which is solely made up of text and a classic BBC red background) and the ESPN app (where the highly recognisable brand name is bold, clear and central to the design).

Symbols or letters work well

If your brand or logo has a symbol element, then definitely try to use that as your icon’s main element, it will help you be instantly recognised by people in your audience and it will keep your branding consistent across platforms. This is the example of Ness and Pocket, illustrated below. Also below are three icons, for Vine, Snapguide and Pinterest that have designed simple but effective and recognisable icons based on the stylised typography element of their logo.

If you’re out of ideas for your icon, take some inspiration from these. It might be as simple as using your main colour and a simple, even not stylised, first letter from your brand name.

App iconsKeep it high quality

The quality of your icon says something to potential users about the quality of your app, remember your icon is the first thing a customer will see of your application.

Part of ensuring you have a beautiful app is credibility. Users intuitively link investment in marketing with investment in a product, and thus a more polished and refined logo will naturally make potential customers think your product is well made and worthwhile.

Need some inspiration? These icon galleries can help: iOS Icon Gallery and Hongkiat.

Turn your site into native mobile apps

MobiLoud is the easy way to convert your website into native mobile apps.

Pietro Saccomani

Pietro is the founder of MobiLoud, where he helps site owners grow their audience on mobile with their own mobile apps.

About MobiLoud

MobiLoud is the easy way to convert your website into native mobile apps.