Designing iPhone Icons
With its ability to run all kinds of applications and games, the iPhone OS is the icon and interface designer’s dream come true.
In this article I’ll discuss the process of creating icons for this platform, showing you the full workflow from the initial handdrawn sketch to the final icon in all the required sizes.
The finished icon
To illustrate the design process I created the icon for a fictitious iPhone app named “Kitchen Range”. It’s a search engine for recipes with additional social functionalities: you can turn the ingredient list into a shopping list, share pictures of your dish and suggest modifications to the cooking process. The icon depicts a typical gas range, a graphic metaphor that fits both the app and the rounded square format.
If you’d like to know how I created the icon I wrote a tutorial to share my workflow.
Disclaimer/Call To Action
To my knowledge there is no “Kitchen Range” app out there.
I came up with this concept in order to have a fictitious app to design for.
If you think I’ve stolen the idea from someone please let me know. If you’re a developer and would like to turn the idea into a real iPhone app please contact me and we’ll talk about it.
Foreword: Icon or Logo?
Before we start designing I’d like to make a few points regarding the terminology associated with the icon design business and the misunderstanding that ensues when dealing with clients.
Generally speaking an icon is a small illustration that represents an object, an action, a computer file or a program. Icons have been an essential element of operating systems since 1984 when the first commercial computer operated through a graphic interface, the Macintosh, appeared on the market.
Operating systems have extensive icon sets that represent all kinds of elements: files, file types, folders, common actions, applications. These icons usually employ recognizable graphic metaphors to convey their function for immediate understanding.
Computer programs also feature a number of icons in their interface as graphic companions to typical actions like open, close, save, create new document etc. These icons are akin to the OS icons and very often they are the same. This is because users learn to recognize the OS icons for all common purposes therefore it’s advisable for programs to stick to similar icons for a better user experience.
In the case of software, the main icon is the illustration that sits on the desktop, providing an easy way to launch the program. Usually this type of icon depicts the logo of that particular program. Here comes the point I wanted to make.
Computer applications, especially the commercial ones, need logos to help them stand out in a competitive marketplace, just like companies.
A logo is the single most important visual asset for an application, therefore the same tenets of logo design applicable to companies hold true for software.
An application’s main icon is a full-fledged logo.
Nowadays we have three basic types of computer applications to design logos for: OS apps, web apps and mobile apps. These apps need logos to stand out from the ever increasing crowd of competitors.
Mobile apps, especially, need outstanding logos since the default view of the marketplaces only lists the app’s logo. I’ll repeat that because it’s important.
The only thing potential buyers see of your app is the logo.
Take a look at the App Store screenshot below.
Do you think it makes sense to invest money in a professionally designed logo? Or will any cheap design suffice?
When a developer asks a designer for an application icon what he/she really needs is an application logo. The icon is merely the computer file that depicts that logo, be it a 72×72 pixel (Android, iPad) or 57×57 pixel (iPhone) PNG.
Let’s assume we have done our homework already (infomation exchange with the client, brainstorming sessions, search for reference images) and we’ve decided upon the graphic metaphor: a gas range.
When you design an icon you should make it immediately understandable and attractive.
In fact let’s reword a joke from the great late Bill Hicks:
Designing icons is like making porno movies: there’s no need to be coy.
Let’s spend some time sketching until we find a viable design.
Clients should expect rough sketches like this in the early design phases. While the shading and details are still approximate, the graphic metaphor and the composition are clear. The sketch is fine-tuned through a series of reviews and then the final icon is created.
The iTunes artwork
When you browse your installed applications in iTunes using Cover Flow, the icons are displayed at a very big size, up to 512 pixels. That’s why every iPhone/iPod Touch/iPad app should ship with a 512×512 pixel version of the logo.
Here’s a screenshot of my installed apps viewed in Cover Flow (click for full size).
This icon must be slightly richer and more detailed than the main icon so designers always start from this size. Here’s the iTunes artwork for “Kitchen Range”.
The application icon
The main application icon must be created as a 57×57 pixel square PNG. It sits on the Home Screen of your iPhone and puts the app only one tap away. The rounded corners, bevel and shine are added automatically by the iPhone OS (I believe the bevel and the shine can be turned off).
Having already created the 512 px icon we must now resize it. This is a crucial part of icon design. In fact it is said that an icon is only as good as its smallest size. In our case the smallest size is of secondary importance and we’ll deal with it in the next paragraph.
When you resize the image to 57×57 pixels the result is likely to be messy. That’s because Photoshop shrinks down everything proportionally and many elements end up being blurry.
The designer needs to manually adjust each vector shape and snap the points to the grid to make sure no edge lies across the pixels. This is the only way to avoid antialiasing (blurring). Some elements become unreadable when shrunk and must therefore be modified, redrawn or eliminated altogether to reduce the visual noise. And layer styles and effects need to have their settings adjusted to the smaller size. Again this assessment is done by the designer, not by a software.
Compare the automatically resized icon with the hand-optimized one:
While Photoshop did a good job at keeping the icon crisp (L), the designer was able to salvage more details from the original design, keeping the icon three-dimensional (R).
It’s interesting to note that the left icon has been considerably sharpened after being resized, with a positive impact on its crispness and legibility. When the right icon was sharpened, however, very little changed: a sign the designer has done a good job.
The small icon
When a user performs a Spotlight search the iPhone displays a small icon next to each result. The icon designer must therefore scale down the application icon to about 29×29 pixels.
Automatically resizing the 57px icon gives us this result:
We can improve on that by hand-optimizing the shapes and by eliminating those elements that are unreadable at this size.
I think it’s obvious that the second icon is much cleaner and crisper, therefore more readable.
I believe some developers omit this last optimization to save some money. While I understand their motives I cannot recommend leaving your graphics in the hands of automatic filters.
Italians do it better.
The launch image
When you tap on the main icon the app starts to load. Since users switch among applications frequently and quickly it’s important to make the launch time as short as possible.
Every iPhone app and game should ship with a launch image which mimicks the interface using a static image. Apple’s guidelines clearly state that this is not a splash page and should not be used to display your illustrative skills. On the contrary the launch image should be as small a file as possible to ensure immediate loading.
A quick way to create the launch image is to duplicate the app’s interface minus the dynamic elements (tab bar icons, text etc.). Make the image 320×480 pixels in landscape mode and make sure the PNG is as small as possible (use Smush.it to compress it).
[I didn't design an interface and a launch image for Kitchen Range.]
In the end the client receives four files from the designer:
- the iTunes Artwork (iTunesArtwork)
- the Application Icon (Icon.png)
- the Small Icon (Icon-Small.png)
- the Launch Image (Default.png)
Are you interested in working with me on your next project? Tell me all about it!
I believe I’ve proven that designing icons for the iPhone operating system is no small undertaking.
From the conception of a unique and eye-catching logo to the creation of pixel-perfect, hand-optimized icons at sizes ranging from the very big to the very small, the icon designer has a complex job. The usual representational, compositional and chromatic skills must be accompanied by technical proficiency to ensure the icons are crisp at all sizes.
This is true of all icons.
This small guide is intended for both iPhone designers and developers alike.
Besides discussing Apple’s guidelines I’ve created the logo and the icons for a fictitious app (Kitchen Range) to show my own design approach and workflow.
I’ll surely be referring potential clients to this article from now own just as I do with my other icon guide Designing Android Icons.
Next time you need an icon for your application take a look at this article: you will know what to expect from the designer and you will be ready for a successful collaboration.
Good luck and if you’re ready to discuss business with me get in touch ;-)