The Path to an Iconic App Icon


Below I’m going briefly walk through the different versions and point out what I think was done wrong and what was done right.

When I did the icon for the very first demo back in february/march of 2013, achieving something actually iconic and eye-catching felt like a massive challenge. Even though we have several characters that could’ve graced the icon, it was important that the main character, Chip, would have to be the one tasked with representing the game.

Having streaks radiating outward from the main subject was a big trend so following that seemed like a great idea. Unfortunately the streaks couldn’t really do anything to save the image from being motionless and pretty boring to look at. It was starting to become apparent that designing an effective icon was a lot harder than I thought!

The second icon was a pretty safe iteration from the first one ditching the streak motif. The composition felt unbalanced and just wrong. It was bottom-heavy and gave the image the impression that everything is about to tip over to the left. Also the statically posed 2D chopper really wasn’t working any more at this point.

Icon #3 is the one we used when we sent our first design spec to Microsoft for the AppCampus certification process. It worked out pretty well as a big image, but ended up looking very cluttered on a small screen with text as well as a character subject matter.

Similarly to icon #3, I gave up using the initial in-game chopper as the centerpiece and went for an illustrative style in the (near) final version of the icon. It’s the same style that’s used in the game’s story comics.

If you know anything about color theory, you should know that orange and teal is a very effective color combination. So much so that it’s used in most modern movie posters, film color grading, graphic design as well as interior design. I didn’t really plan to go with an overplayed color scheme, but since the chopper had been orange since pretty much day one, a blue/teal gradient ended up accentuating the chopper very well.

Thanks to the Film Experience Blog for the image!

In addition to the color, I wrestled a good deal with the composition in the final image. I cropped out the more unimportant elements like the rear and most of the main rotor and saved up all the space for the choppers happy, grinning face. To make the subject matter pop out further, I raised Chip above the background and made his little metal feet  go outside the icon borders by just a few pixels to give the image a pseudo-3D look. It’s a really effective visual trick used by a few big games, most notably Clash of Clans.

Thanks for reading!