What is the most recognisable aspect of your app? It should be the icon, the app’s hallmark image. Your icon is what sticks in people’s minds as it’s what they look for every time they open your app. This article is about the design of your app icon.
The app icon is featured in the app stores and on your customers’ phones. Whether it’s on an iPhone’s “springboard” menu or somewhere on an Android’s many kinds of “Launcher” menus, the app icon remains the most important visual element you will need to create to set your app apart. Oh, sure, there’s text under the icon too but the image is what packs the punch. The question is, however, which factors play a role in the design of an app icon?
The app icon can be uploaded in the Publish section, under App Vitals.
The App Icon – Eleven Tips
Tip #1 – Take the time to create a beautiful app icon
Your app icon is a user’s first interaction with your app. Consider it your app’s calling card when users visit the app store. Your app icon can make the difference between encouraging engagement from potential users (and hopefully a download) and being completely ignored. In other words, take the time to put some thought into your app icon.
We’ve included some links to inspire you:
http://www.mobileinc.co.uk/2012/05/the-art-of-the-ios-icon/
http://iicns.com/
Tip #2 – Don’t use text in your icon
Avoid text in your app icon at all costs! Text featured within an app icon is often rendered illegible by varying resolutions and app icon sizes. We recommend that you use the text under the app icon wisely so that you’re left with more space for your app image.
Tip #3 – Make sure your app icon draws attention
Check the app stores for apps that are similar to yours. Check for these apps by using the same keywords that you would use to describe your app or by searching within the category that your app would fall under. Your app icon should be different; your app icon should demand attention. You can accomplish this by using a different color palette or a unique image. Some creative brainstorming with friends or colleagues often helps stir up new ideas.
Tip #4 – Use the same color palette as in the app.
The colours you use in the design of your app and its content should manifest themselves in the design of your app icon. This will ensure continuity and make your app recognisable.
Tip #5 – Avoid using too much detail.
Icons with too much detail suffer from the fact that icon sizes and display resolutions play a limiting role in how much of the icon detail can ultimately be see. App icons measure 57 x 57 pixels on iPhones without Retina displays and 114 x 114 pixels on iPhones and iPads with Retina displays. So though the App Store requires you use an image that is 1024 x 1024 pixels, these will be displayed much smaller on devices.
Tip #6 – Test the icon on your phone.
Make several test icons and set them to the appropriate size in an image for display on your phone. This way you can see all your test icons next to one another. Open this image on your phone to get a better idea of how the icons would ultimately look on your phone. You can also test your icons on http://iicns.com by scaling them. We recommend, however, that you use your phone for the best comparison possible.
Tip #7 – Contrast
Make sure to use a lot of contrast and contrasting colours.
Tip #8 – Play with the “gloss effect” of the icon
The App Store has a setting with which you can automatically give the top of your icon a gloss effect. This setting is often hit or miss. You can turn this on and off for each of your apps in AppMachine’s “Publish” tab.
Tip #9 – Get it right the first time!
Changing your apps icon requires an app store update that often comes with update costs. You should also consider the fact that users who have grown accustomed to your apps icon will now have a hard time finding it.
Tip #10 – Avoid shades of grey
App stores usually have a greyish background color. Use a color that stands out against this drab background because people might not notice your app otherwise.
Tip #11 – Difference between iOS and Android
There is a difference between an Android icon and an iOS icon. Apple will always give your icon rounded corners after you’ve submitted it to the App Store. The Google Play store does not do this. If you’d like your icon to look the same in both stores, round the corners of your icon image. Use a template if you’re not sure about the exact dimensions required. You can find some templates here.
Your app’s springboard title
Your app’s icon will always have the app’s name under it. This is known as the “springboard title” in the iOS world. This title usually carries a maximum of around 12-13 letters (including spaces). This may vary depending on the width of the letters you’re using.
You can test your app’s potential name by creating a folder on your iPhone. This allows you to experiment using different names for your app.
- To make a new folder, hold your finger down on an app until it starts shaking.
- Drag the app over another app to create a folder.
- You can now edit the folders name. (To edit it again just hold down on the folder’s icon until it start shaking.)
There are many factors that can influence the number of letters you can use in your app’s name. For example, “Markus Schulz” doesn’t fit; “Markus schulz” does fit, as does “markus schulz”. Ultimately, we chose to go with “MarkusSchulz”.
The app stores give you the opportunity to use a longer name in the stores. There are also search terms that you can designate to your app so that potential users can find your app more easily.
People will generally recognise your app based more on its icon. Your app’s name acts more as support. The name is thus less important.
Sources:
http://www.apptamin.com/blog/aso-app-icon-design/