An iOS icon exploration
I've made my fair share of apps, and to me the one question that still bounces around my head is - When taking an app-first approach to designing a product, how should a designer decide on the look and feel of the icon. There are many different icon types I've considered, but I wanted to explore a few of the more pervasive methods I've come across.
A Sea of Icons
Initially I had considered the UI Iconization look that apps like Calcbot (of the fantastic TapBots series), ParkBud and even the stock Notes app embodied. These app have 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 when I developed the icon for Just the Tip, but realized this wouldn't fly with an app that has little to no UI. This approach creates a more intimate icon-to-app relationship, when the user sees the icon they are reminded of the underlying experience the app gives them. However, it does lack the scalability needed to use the icon on other platforms like web or traditional branding collateral.
The next approach I had looked at was the 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 a simple and 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 is highly 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 quite well.
Finally, the Branded approach. I don't 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 Exploration
With all that being said, for my app 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.
I tried stylized N's, realistic paper, artistic folded noodle N's, clever moustaches (moustaches are evil, of course), and plain old N's on flat color, etc. My decision ultimately came down to a couple thoughts, I wanted the icon to be -
- Recognizable - At a glance, it would immediately stand out
- Scalable - If I ever did make an accompanying website, ipad, or osx app, the icon should work
- Contextual - Bear's some link to the apps form and fuction
- Homely - Nicely integrate with any home screen arrangement
Below is the final approach I landed on.
I ended up taking the Branded approach namely because I'd had aspirations of someday expanding the application to other platforms. The front loading of brand creation 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, by having remnants of folded paper and the calm yellow really stands out in what seems to be a sea of predominantly blue icons in iOS. 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.
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 and/or product is headed and put aside the desire to make a pretty icon for the sake of having an icon. The icon is the user's window into your app/brand, so make it count.