I like to make apps look good. It’s what I enjoy most, and I think it’s a very important part of the app-creation process. In fact, so do users. Here’s a top review from a popular travel app:
“Probably the biggest impediment to this app’s success is how ugly it looks.”
While there is much to be said about designing apps, it can vary wildly between different products, companies, and people. If there is any constant for apps, it’s the app icon.
Every app needs an app icon, but not everyone understands their purpose. For some, it’s solely for marketing. It is, after all, one of the very first things a user will see about your app. When they search for it or see it on the App Store, your icon will be there.
However, once a person downloads it, they become a customer. Your app is now on their home screen, and the purpose suddenly becomes very different. Now, it’s so users can recognize your app when they’re looking for it.
While you can focus on marketing needs, that is only a one-time scenario for each person. It’s important to recognize that optimizing for this one situation may hinder the needs of your everyday user.
I believe good app icons are most valuable for your customers, your everyday users, not first-time shoppers.
An ideal app icon reminds users of an app through shape, color, and texture. Take the Phone icon, for instance. It has evolved a tiny bit since Steve introduced it in 2007, but has remained mostly the same. Today, it is a bright green, with diagonal stripes, and a white phone symbol. These three elements together form an instantly recognizable mark for users. When a user needs to use the phone, it’s a no-brainer.
If we look at other familiar icons, you’ll find the same characteristics at play. The Mail icon features a vibrant blue color, some clouds, and a simple envelope shape. The Music icon is a vivid orange, with a grungy texture, and beamed dark-orange eighth notes. All three of these apps are easy to find.
When going through the process of creating your app icon, you might come across a few obvious ideas relating to the app’s function. For example, these three shopping apps use shopping carts for their icons. In fact, the majority of the icon is consumed by the cart symbol and a small percentage is used to denote the brand.
If we really think about it, none of these shopping carts are appropriate for these three apps. Zappos and Amazon only exist as online services that have never used a physical cart, and more-so their primary business is a shop. So instead of focusing on the cart, why not focus on the brand? With regards to Apple, could you imagine an Apple Retail Store featuring a glowing white cart logo embedded in the stainless steel outside the storefront? How preposterous a thought!
If your app is a utility, focusing on what your app does makes sense. But if your app’s primary business is what the brand is known for, focus on what your app is to your customers. This will help your app be more recognizable. The way customers identify a store is the logo outside the store.
You can also style an app icon based on the style of your app. Find My Friends uses leather both in the icon and the app. This makes a very obvious connection to the user. Maps features a full screen map. So does the icon. iBooks has a wood-textured bookshelf in the app. The icon uses the same wood texture. These material connections help a user associate your icon with your app.
Take inspiration from real life. There is surely an analogy that can be drawn, or a physical product you are replacing with your app. Use the real life counterpart to influence your brand and your icon. If users see an icon that resembles something they know in real life, they will expect that it’s related!
Routesy is a great app for checking on MUNI and other Bay Area transit schedules. Its icon closely resembles a MUNI monthly bus pass. Though deprecated, Bay Area residents who use MUNI will probably recognize that ticket. Using it as a basis for the Routsey app icon is brilliant.
Delivery Status is a neat way to track shipments. By using a brown cardboard box with a large white shipping label, this icon addresses a concern. “Where’s my box?” The answer can be found by tapping the icon of something that resembles the package you’re expecting.
iTunes Trailers uses a symbol found everywhere on Hollywood sidewalks. Combined with a premiere red carpet, users will instantly understand this app is for going to the movies. (Disclosure: I made this app icon while at Apple.)
It’s not uncommon that Mac apps have companion iOS apps. Here are three examples of apps that use the square composition of iOS app icons in different ways. Coda and Diet Coda share the leaf shape, color, and texture, but the leaf shape is used as a dew drop on iOS. Things fits an object to a square. Twitterrific crops to the most important area of the illustration. By relating the icons of apps on two different platforms, users will know to expect a similar experience from each.
Now that we’re about five years into the App Store, seeing a single developer or company ship a few apps as a suite is becoming increasingly more common.
Nike+ has a few apps that feature the same shapes. These three all have a diagonal shine, the familiar Nike swoosh, and a dimensional plane at the bottom. The consistent shapes and composition frame these as a family of apps.
Facebook has individual apps for functions, but retains company branding by sharing the background color, the familiar Facebook blue. The thin lighter blue rectangle at the bottom is an iconic branding element for Facebook and ties all of these icons together.
The iLife suite on iOS shares something very interesting and unique: an environment. While all of their spaces are designed differently, they all feature an object sitting on a surface with a close backdrop, making it obvious these are meant to sit alongside each other.
Apple’s iWork apps exhibit the same background color, gloss shape, and materials. The Keynote and Pages icons have shiny metals. Keynote and Numbers both have bar charts. The relationship of elements across icons makes these apps obviously from the same creator.
Though, while I can point out many ways for your app icon to look unique, borrow from real life, or share styles with your other apps, I don’t think there are many hard-and-fast rules for game icons. It seems most of them use their primary character in a yellow-outlined square. This won’t make them stand out amongst other games, but I suppose they’re recognizable as a game.
Your app icon will sit among many other icons on home screens, so don’t use it as an opportunity to stand apart, lest users consider it an eyesore. But it’s worth taking the time to make yours memorable.