Icons are a crucial part of every iOS application. They convey the first impression of your app to prospective users and remain a central focal point to those who download the application. We all know how important it is to create a good first impression and build a strong brand with your design, and this tutorial will demonstrate 8 great ways to do just that!
1. Use Visual Metaphors
This is a no-brainer in icon design, but if you go through the App Store, there are surprisingly few icons that do this well. For example, search for “tongue twisters” and you will see an assortment of icons like this:
If you took all of the words off of these icons, how many would say to you “tongue twister”? This is the reason you often hear “don’t use words on icons” - too many people use it as a crutch to describe what the app is all about!
I’ve enlarged the only icon that really does the term “tongue twister” justice. A few improvements I’d suggest are to outline the silhouette of the head and possibly make it larger. This will make the twisted tongue clearly visible and the outline will help it pop off the background. Unless all of the twisters are specific to Britain, I’d lose the flag and instead choose a background that adds more contrast around the illustration.
What Happened Starbucks?
Starbucks’ primary app has a great icon and app design, but the app that tracks cash on your Starbucks Gift Card pales in comparison. The icon is barely legible in the App Store grid and the logo is practically invisible.
What else could they have done? What about making the icon resemble an actual gift card? Pull in the trademark green, make the logo large and visible, and add the “gift card” magnetic band going across it? Or maybe an illustration of a wallet with the Starbucks logo?
2. Wrap a Concept Around Your App & Icon
Another way to add depth to your icon and app design is to give it some conceptual depth. In the crowded space of “to-do” apps, the “check” mark is a nice visual metaphor for “done” but is overused to the point of meaninglessness.
The only apps standing out from the crowd have layered an additional conceptual layer over the communicative checkmark.
2Do - This icon resembles a stack of documents that need to be reviewed. The stitched leather is a nice contrast to the clean, post-it note color and smooth texture.
Put Things Off - Putting Things Off is a great example of conceptual thinking and design. Why create another to-do app when most of us really want to figure out what we can put off until tomorrow? Looking at a problem in the exact opposite of your competition can yield some pretty creative and fun results. The artwork says exactly what the app is all about - an inbox with a “forward” arrow, and if you look at the grid of icons above the color selection makes it really stand out from the crowd.
Taska - Taska’s icon looks like a bunch of papers neatly stacked on a desk. Although it’s not a deep concept, this icon is beautifully illustrated. Notice the detail on the shadowing of the wood background that gives depth to the stack and the crispness of the edges of the paper and checkmark. The papers appear to pull right off the screen which makes it pop off the grid of stale checkmarks.
3. Don’t Make Empty Promises
Your app icon is the first promise you make to the user. It says:
- I am of “x” quality
- I will do “this” for you
If people see a high quality icon and the app is crap, people get PO’d. If people think the icon means “x” and the app actually performs “y”, people get PO’d. Fulfill your app’s promise to the user!
4. Graphical Continuity is a Must
One way to ensure you deliver on your promises is to make sure the graphics within the app match the icon. Expenditure is a great example of an icon that very accurately describes the function of the app (tracking expenses) and how to pull off a design concept from icon to app.
5. Test the Icon Design on Your Device
This is a surprise to many designers new to designing iPhone and iPad icons. The way your design looks mocked up in Photoshop or even in the iPhone Simulator is much different from the way it will look on an actual device. Why? A few reasons:
- Computer monitors do not accurately represent the color gamut and brightness of touchscreen devices.
- Not all touchscreen displays are created equal. For example, the retina screen on the iPhone is higher quality than the retina display for iPod touch.
- For iPad specifically, it is difficult to duplicate the depth perspective on icons as they appear on the actual device.
6. Pique Curiosity
All-in Yoga is an excellent example of a provocative, yet tastefully illustrated silhouette that thoroughly describes what the app is all about.
7. Capitalize on Your Brand
If you’re designing an app for a well known brand, use it! Below are examples of apps that do a great job of standing out in the App Store by showcasing a recognizable logo, name or face related to the app. These apps may not tell you exactly what the app does, but it gives an idea of the content you’ll be getting based on the image.
Nike - probably something fitness related
NBC Nightly News - newscasts from the program
Madonna - music or videos
Jamie Oliver - recipes
Mad Libs - probably an app version of MadLibs?
Whatever you do, don’t waste the gift of a recognizable brand! These may be recognizable when they are blown up:
But look what happens when their weak silhouettes compete with other icons in the busy App Store grid. Where’s Rachel? iCarly?
Now look at the improvement with just a few small tweaks:
They are more recognizable in the App Store grid too:
Thinking through and executing these tweaks took less than an hour in Photoshop:
Rachel Ray - Even if Rachel’s face was not recognizable, she has a great smile and eyes that serve as a focal point to draw people in. The good news when you are designing an icon for a celebrity is that you have a lot to work with in using that person’s face. Generally speaking, people’s eyes are first attracted to human faces among a group of generic icons. Test this for yourself: look away from the above image for a minute and then look back. On which icon did your eye land first? Let me know in the comments!
iCarly - Admittedly, I do not watch iCarly, but common sense tells me the main character of the show is probably the best face to feature on this icon, along with its tweeny show logo. If kids or parents aren’t sure of the featured mug, the logo supports that they have found an app of interest.
Eckart Tolle - This app is actually for his video series, Stillness Within. The title could certainly be written across the bottom in an elegant way. However, for people who recognize Eckart, they probably aren’t going to care about the title. He attracts a VERY passionate audience, one that would be interested in anything he publishes. Just having his picture is enough.
Hello Kitty Stamp Calendar - Again, very recognizable brand that has too much crammed into a small space. In the original version, you can barely make out the Hello Kitty face. This is a shame because it is the internationally recognized trademark of the brand. Of course, a worthwhile addition would be to add a stamp shaped calendar, but what needs to be considered in the case of big brands is how to handle iconography across the entire suite of app products for that brand. Is this the only app Hello Kitty will produce? How will they handle icons for the brand as a whole?
Perez Hilton - This icon can go in a couple of different directions. Do his readers really recognize him or just his name? I’ve read his blog a few times and can’t tell you anything about his looks. However, he does have some illustrations on his blog header, the problem is the one that was used is practically unrecognizable. I used one of the other illustrations on his blog, blew it up for a strong silhouette, and matched the loud colors of his website. Bam.
Now that I’ve said that it’s OK to use a photo image, allow me to clarify. This is ONLY OK if you’re dealing with a recognizable celebrity-type figure! I would not recommend using photographs for any other reason. The following are some examples of poor photo-icon usage:
8. Respect the App Store Grid
You may have noticed that I keep referring to the App Store grid. This is what makes icon design for the iPhone and iPad unique from desktop or web application icon design. The App Store shopping experience is like looking for a “find” at a thrift store. There are a few useful and beautifully designed products surrounded by a lot of commotion and junk.
Check Your Design in ALL Stores
The “grid” applies to the iTunes store, iPhone and iPad stores, so be sure to test how your icon will look in all of those environments when contrasted against apps that will most likely be positioned in the same listing as yours. You have to figure out how to draw the user’s eye away from the competition and towards you!
Tell Me About Your Favorite Icons
Leave me a comment below with examples of icons you think are getting it right!
Comments