Designing a Unique App Icon
An ‘Unscientific’ Study
“Which color do you recommend for an app icon? Ours should stand out from the rest of the icons.”
“Don’t you have a brand color?”
“No. We are a start-up company and we are going to launch a mobile app soon.”
A couple of young guys asked me this question and so I embarked on a ‘highly unscientific study’ on 90 app icons that happen to come my way.
Insights
Following insights are based on my observations of the 90 app icons I managed to get hold of. The modus operandi is mentioned at the end of this article.
To stand out from the crowd of app icons, don’t follow the crowd in terms of color, name placement, shape of app icon canvas…
App Icon Colors
What should be the color of the app icon that you are going to design? Here is the color distribution chart we extracted using Adobe Color from the 90 app icons.
App icons in yellow, cyan, magenta or shades of grey will definitely stand out if most of the app icons in your mobile phone home screen are blue, red or green.
Text in App Icons
Do we need to place the name of the app inside app icons? Or, is a simple logo good enough?
Only a few apps display names inside the app icon. A compelling reason why you should too.
Shape of App Icons
In android, we have the luxury of transparent canvas for app icons. This gives more room for creativity unlike an iOS app icon which is always a round edged square. Here is the current statistics of app icon canvas shapes.
Would you like to see one example each for the above?
For a change, design circular app icons!
Family of App Icons
Let us say that we have more than one app in app store under a single brand. How can we show that all the app icons belong to the same family, yet they are unique enough for the user to distinguish one from the other? How can we maintain the brand recognition across apps?
There are four trends in front of us.
Same Graphic, Different Color
Let us take the example of 9GAG.
Because of the prominent graphic/icon, users will instantly recognize the family of apps and understand that they all belong to 9GAG.
Different Graphic, Same Color
LinkedIn family tackles this brand recognition problem by maintaining the uniform blue color across its apps.
In my opinion, the LinkedIn icons don’t exactly belong to the same family. See the size, stroke width and orientation of the ‘magnifying glass’ icon in ‘Job Search’ app and ‘Recruiter’ app (Bottom row). Ideally, they should be identical.
Different Graphic, Same Color, Same Logotype
Yahoo! apps have the same ‘Yahoo!’ logotype (except Flickr) and the same color (except Flickr); but the icons are different for all of them.
Freestyle
Google generally follows the brand colors in a diverse array of icons and occasionally throw the “G” here and there.
At the time of writing, Google has changed some app icons to reflect the new logo change (Street View, News & Weather); but others like Google Plus still sport the old “G.”
Take the ‘Google Analytics’ app icon (bottom row, middle one). If you happen to see it alone, there is no way to infer that it comes under Google’s umbrella. Other examples are ‘Keep’ or ‘Primer’ apps from Google.
Moral of the Story
A yellow, circular app icon displaying the name of the app will definitely stand out from the crowd (at least in theory)!
;-)
“Never Judge An App By Its Icon”
- DogHouse Diaries
I look forward to hear what you have to say about this exercise. Let’s talk…
Modus Operandi
I downloaded and saved 90 app icons. 28 apps are from #Homescreen ‘Top Apps of this Week.’ The rest are from my mobile phone.
I used Adobe Color (Kuler) to breakdown the color palette and noted down the dominant colors.
I filled a spreadsheet with the numbers and created some bar graphs for you!
Thank you.
Enjoyed this article? Spread the joy to others by sharing and recommending!
Also, head to www.antzFxWay.com for more design and photography stuff.
