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 Iconisation look that apps like Calcbot (of the fantastic TapBots series), ParkBud and even the stock Notes app embodied. These apps have a highly customised look and feel that permeates through the icon. The icon takes on the key elements of the UI and essentially shrinks them down. I took this approach when I developed the icon for Just the Tip, but realised 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 lacks 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 a front-end app to track and store recipes on the Evernote backend. This type of icon has a lot more opportunity to capture the sentiment and essence of the application. Because the icon is highly detailed, though, 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 dont even need to list which apps these represent, because their brands are 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 stylised Ns, realistic paper, artistic folded noodle Ns, clever moustaches (moustaches are evil, of course) and plain old Ns on flat colour, etc. My decision ultimately came down to a couple thoughts, I wanted the icon to be:
- Recognisable: At a glace, it would immediately stand out
- Scalable: If I ever did make an accompanying website, iPad, or OSX app, the icon should work with it as well
- Contextual: Bears some link to the app’s form and function
- 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 blows 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 its own sake. The icon is the user’s window into your app, so make it count.