iOS icon design: A designers exploration

I’ve made my fair share of apps, and to me there is one question that still bounces around my head is: When taking an app-first approach to designing a product, how should a designer approach the icon. There are many different icon designs I considered, but I wanted to explore a few of the more pervasive approaches I’ve noticed.

A Sea of Icons

 iOS icon design: A designers exploration

The first approach I had considered taking, was the UI Iconization look that apps like Calcbot (of the fantastic TapBots series), ParkBud and even the stock Notes app took. The app has a highly customized look and feel that permeates through the icon. The icon takes on the key elements of the UI and shrinks them down essentially. I took this approach with Just the Tip, but this wouldn’t fly with an app that has little to no UI. This approach is nice as it creates a more intimate icon-to-app relationship, because when the user see’s the icon they are reminded of the underlying experience the app gives them. However it does lack the scalability to use the icon on other platforms like web or traditional branding collateral.

 iOS icon design: A designers exploration

The next approach I had looked at was a Hyper-Real type icon which conceptually captures the intention of the application it represents. Examples of this include Instagram, a retro camera which is a direct nod to the types of filters users can apply to their photos, Camera+ which is simply a beautiful camera app, and Evernote Food which is front end app to track and store recipes on the Evernote back end. This type of icon has a lot more opportunity to capture the sentiment and essence of the application. Though, because the icon so beautifully detailed, it is not scalable when it comes to traditional branding practices, but for the purpose of simply representing the application (and not a brand) it works very nicely.

 iOS icon design: A designers exploration

FInally the Branded approach. I probably dont even need to list which apps these represent, because their brand is so strong they immediately stand out. For a designer, there is a little less flexibility in the creativity, but there is still a challenge. The icon is a conduit to the brand by in large, which means it still needs to uphold and represent everything the brand has already established. It seems like a tall order, but a well defined brand should have the collateral to create this already. Most of the time though, this simply means popping the logo on the brand colours. The only [large] caveat here is that for a single purpose app, the designer would need to create an actual brand first.

My Icon Design Exploration

With all that being said, for Notorious (a gestural note taking app, which is also evil) I decided to literally explore every possible permutation of an app icon as seen below.

 iOS icon design: A designers exploration

I tried stylized branded N’s, realistic paper, artistic folded noodle N’s, clever moustaches, and plain old N’s on flat color. My decision ultimately came down to a couple thoughts, I wanted the icon to be –

  1. Recognizable – At a glace, immediately stands out
  2. Scalable – If I ever did make an accompanying website, iPad, or OS X app, the icon should work
  3. Contextual – Bear’s some link to the apps style and interactions
  4. Homely – Nicely integrate with any home screen arrangement

Below is the final approach I landed on.

 iOS icon design: A designers exploration

I ended up taking the Branded approach namely because we had aspirations of expanding the application to other platforms one day. The front loading of creating the brand before heading into design also helped shape the direction and key visual elements of the application.

The icon was still the focus and a larger consideration when designing the brand overall. To me, the icon represented the simple layered design of the application, has remnants of folded paper, and the calm yellow really stands out in what seems to be a sea of predominantly blue icons. It has the scalability to become a true brand logo if the app ever blew up, but still remains unique enough to have an identity of its own.

ios icon iOS icon design: A designers exploration

Final Thoughts

There you have it, a small exploration of how to approach application-first products. I’m not suggesting people brand every application, but make sure you know where the application is headed and put aside the desire to just make an icon for the sake of having an icon. The icon is a users window into your app/brand, make it count.

Leave a Reply

Your email address will not be published. Required fields are marked *