Giacomo Balli profile picture
Giacomo Balli
The Mobile Guy

Over two decades of experience at your service.
I help business owners make better decisions.

Let's Chat LinkedIn

How test and pick the best iPhone app icon (automation)

I recently made my first "graphic investment" for one of my apps. I created a contest where designers had to come up with a new icon for one of my most famous apps: MyLyrics. You can find more about it here. I was positively surprised but how many designers accepted my contest, they such submitted more than one design... it was amazing! ...which made it hard to pick one.
The importance of the icon and how it influences an app's success in the AppStore has been extensively discusses. For this reason, there are many aspects you need to keep in mind when selecting a new app icon such as: - visual appeal - colors used and what they resemble or trigger in the suer - standing out from the competition or at a distance - fits well with the rest of the UI (color scheme & style) - conveys what the app is about (unless you have a well-known brand Now that Apple has been pushing devices with higher screen resolution and quality, we are used to seeing amazing icons, especially when browsing the iTunes. One would think that attention to detail is extremely important but... we can't forget that these are icons! The fact that we have to submit a PNG sized 1024x1024 pixels for the store doesn't mean that the final user will "experience" all the subtle details. People will see your app mainly when sized  almost 1/10. In short, don't make too many details otherwise it will just look blurry.
Going back to how overwhelmed I was with all the amazing designs I received, I was having a rough time picking the best. I would find myself inspecting the details but then remembered that what counts is the icon's visual impact. Our brains create an "impression" of a person within the first 7 seconds we see them. In the AppStore it only takes up to 3 seconds for our brain to know if an app is worth our attention. With this in mind I decided to award the content winner based on gut feeling since all the other factors were previously assessed (such as relevance, high quality etc). I wanted to view all the icons on the actual devices to see which one caught my attention and unfortunately realized that there wasn't a simple way of doing it. Editing my Xcode project, building, deploying is incredibly annoying AND you don't see them all at once. Then I though about webapps. Below you will find instructions on how to add and view all the icons you are considering on your device at one; in 7 steps. The main concept (if you can't wait) is to create html pages for each icon and then saving them to the home screen (as webapps) and using the <meta content='yes' name='apple-mobile-web-app-capable'> along with <link href="icon114.png"  sizes='114x114' rel='apple-touch-icon'>. [caption id="attachment_148" align="alignright" width="357"]Icons on device The final result for some of my icons.[/caption] The steps to accomplish this: 1) Open all icons in your preferred image editor (I use Photoshop) 2) Resize all icons to be 114x114 (iPhone retina resolution see details here) 3) If there is space in the image that is not part of the icon design crop it out 4) Copy & paste the code below and run it in AppleScript 5) Copy the whole folder (images and html files) to your devices accessible location (web space or local server) 6) Open your master html file 7) Tap the link of each html file and save it to the device's home screen Bam! Done. Here's the AppleScript code (using TextWrangler). You can set the first line (gloss) to false in case you wish to maintain Apple's default glossy effect (therefore not a pre-rendered icon).

set gloss to true tell application "Finder" set theseFiles to choose file with prompt "Select the icons you want to test" with multiple selections allowed without invisibles repeat with j from 1 to count of theseFiles set thisFile to item j of theseFiles as text set thisFile to name of alias thisFile set precomposed to "" if gloss then set precomposed to "-precomposed" set valore to "<!DOCTYPE HTML><html> <head>   <meta content='yes' name='apple-mobile-web-app-capable'><link href='" & thisFile & "'  sizes='114x114' rel='apple-touch-icon" & precomposed & "'> <title>" & thisFile & "</title><style type='text/css'>body {text-align:center;font-size:4em;}</style></head><body>Add to home screen <br>  ⬇</body></html>" tell application "TextWrangler" activate make new document set text of document 1 to (valore) as text save document 1 to thisFile & ".html" close document 1 end tell end repeat set theseFiles to choose file with prompt "Select the html files you just created" with multiple selections allowed without invisibles set valore to "<!DOCTYPE HTML><html> <head> <title>Test app icons</title><style type='text/css'>body{background:gray;}a{padding:20px 0;display:block;text-align:center;margin:10px;border-top:1px solid black;border-bottom:1px solid lightGray;font-family:Arial;font-size:1.7em;color:white;text-decoration:none;}</style></head><body>" repeat with j from 1 to count of theseFiles set thisFile to item j of theseFiles as text set thisFile to name of alias thisFile set valore to valore & "<a href='" & thisFile & "'>" & thisFile & "</a><br>" end repeat set valore to valore & "</body></html>" tell application "TextWrangler" activate make new document set text of document 1 to (valore) as text save document 1 close document 1 end tell end tell

Here is a video showing the entire process: [youtube] Let me know what you think and feel free to get in touch if you need help getting this to work,

#99designs, #app, #applescript, #icon, #iphone, #photoshop, #webapp
Published: Sun, Oct 14 2012 @ 4:32:21
Back to Blog