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.

The sketch

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 Humans 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.]

Deliverables

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!

Conclusion

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 ;-)

Check out these posts too:

1. Designing Android Icons
2. How to Create an iPhone Icon: Full Workflow
3. Android Icons for Free411.com

I understand why regular people (not design professionals) use Comic Sans. It’s fun, readable and useful when telling co-workers to clean after themselves without sounding too preachy. Imagine writing that sort of message in a business font like Times (New Roman) or the default aseptic sans-serifs Arial and Helvetica. Comic Sans makes those signs look friendly. It tells your co-workers that what they do is just a minor nuisance (when in reality it drives everybody crazy). But Algerian? Why do people love Algerian?

Apparently Philip Kelly created Algerian in 1988 to embellish “any work which suggests the Victorian era”. Epic fail Philip! It seems the Eighties didn’t spare typography either. Fortunately for us, there is a typeface that suggests the Victorian era and is well crafted, versatile and very easy on the eyes: the Phaeton font by Kevin Cornell and Randy Jones.
It’s the font I used in the logo of Icon Kitchen, my little icon shop.

It looks like I’m not the only one who can’t stand Algerian. Other people suffer the existence of this offending typeface. This fun article lists the most overused typefaces around and, sure enough, Algerian made the list. Also don’t forget to hurt yourself with the Flickr pool, “The Algerian Font, a burning hate”.

How can anyone ever think of using this?!

Please note the Polish text at the bottom of the sample image. Algerian is eerily popular here in Poland. In fact it’s time for a confession:

I used to work for a company whose logo is set in Algerian.

Agro Polska sells pet products. Here’s what their website looks like:

Before you ask, yes, while I was “employed” there (I won’t elaborate on the contractual conditions, or lack thereof) I was asked to redesign the logo and the website.
My boss (a Frenchman) was adamant about keeping the font but of course he wanted me to add little animals sitting on the words:

That’s a rainbow gradient ladies and gentlemen.
This was my desk:

The reason cat litter is sitting on the desk, along with bird feed, is because I had to design the packaging for those products. There are dead computers sitting on the floor too…
I had just got laid off and I needed the money. I’m sorry. I’m so sorry.
I’ll close this shameful confession with a Lionel Richie quote: “I’ve paid my dues to make it”

I have pictures of signs set in Algerian from over here in Poland but I won’t publish them because I’m a nice guy.
Folks, next time you cringe at Comic Sans remember: it could be much worse!

No related posts.

My article about Polish posters entitled “The Legacy of Polish Poster Design” just came out on Smashing Magazine.
I’m very proud of it because it’s a chance to expose a particularly outstanding achievement of Polish culture to a large number of people. Poland has been my home for 4 years now and I’m happy to finally give something back. Dziękuję, Polsko!

By the way, the wonderful poster you see above hangs proudly over the piano in my room. It was presented to me last year and it gave me the idea to write the article.

Head over to SM to read the full article, comment and share!

Check out these posts too:

1. Mastering Photoshop for Web Design Ebook Cover
2. Smashing Magazine Writers Illustrated
3. Concept Design for “Gazeteria” Coffee Shops

Freelancing

The year 2009 has been very important to me.
In August I quit my unsatisfying day job and became a full-time freelancer. It is the best professional decision I ever made. I’m still building up momentum but I have faith in my capabilities and I’m sure 2010 will be a great year for my career.
If I don’t succeed in making a decent living as a freelance designer I will have to go back to day jobs and I will quit design for good.

My experience has shown me that the only way to be a creative professional is as a freelancer. At least in Italy and Poland, where I’ve worked.
I worked in five different companies and among 50+ co-workers I haven’t found one who was satisfied of the job, respected the bosses and agreed with their way of doing business. I’m not just talking about designers here.
Were we all jerks? Maybe, but in all those years and all those companies I have never been praised, my abilities have never been exploited and my work has never been properly rewarded. All things that magically started to happen when I became a freelancer. I don’t think that’s a coincidence or a fluke.

Working for someone else was taking away everything that’s good about design and would have certainly driven me to another profession had I not saved myself from my own misery.
What were my options? Grovel for yet another mindless job at yet another agency, hoping to win a poorly paid position doing menial work?
After I graduated in Architecture in 2004 I didn’t consider for a second working in that field because I knew what awaited me (see above). I chose design hoping to do interesting, varied work with fast deadlines and good economic turnouts. I was wrong.

Back to the summer of 2009. The moment I entered full-time freelancing and blogging I immediately started to collect praise for my work. Work I had chosen to do. Three months later I find myself having completed interesting jobs, having developed important contacts with high-profile professionals in my field and having met interesting colleagues online. And all this is only going to improve in 2010.

Employee work turned my passion into a miserable job. Freelancing turned that miserable job back into a passion. Enough said.

Mac

After 14 years using Windows I’m going to switch to the Mac in 2010.
I consider Windows a misfortune to the world. Microsoft has slowed down progress with its inferior products and appalling market tactics. Just think of how Internet Explorer has held back the development of the technologies, the features and the usability of the Internet. Recent news that Firefox is now the most popular browser in the world make me happy. There might be hope for us yet.

Imagine waking up every day and spending 15 hours with someone you hate. That’s the story of me and Windows.
I don’t care about the Windows vs. Mac discussions, features vs. prices, hardware comparisons and smug ad campaigns, I’m switching.
When is an open question. I’d like to buy a 27″ iMac but reports of multiple screen issues are holding me back. In the meantime I’ll still have to grind my teeth and take it like a man.

2010 resolutions

Here’s what I intend to do with 2010:

• I’ll work harder and better at my design career.
• I will switch to the Mac.
• I might start a pet project. I have a few ideas scattered across my notepads and right now I’m weighing my possibilities.
• I will improve my drawing skills with daily sketching sessions. This will certainly provide relief from my schedule and result in better work for my clients.
• I will set up a daily piano practice routine. I have been teaching myself to play the piano for two years now but freelancing has taken up all of my time in 2009. Music is my first true love and I just can’t let it slip away.
• I will take a proper holiday. I mean sun, beach, sea, food, drinks, music, travel, laughs, sex, adventure, life. I haven’t had a proper holiday in almost 6 (six) years. Don’t ask me why, just be sympathetic.

Yes, 2010 will kick ass! Let’s all work towards that goal.

Some words of thanks

I’ll finish this article with some due thanks.

First of all thanks to all those who appreciated my work. Clients, readers of Cute Little Factory and the other blogs that feature my work and everybody who contacted me with good words and advice. Grazie! Dziękuję!

A special thanks goes to Sean Hodge, former editor of Psdtuts+ and editor of Vectortuts+, for believing in my work and giving me the chance to create numerous articles for the Tuts+ network. Not only have they brought me exposure, praise from the readers and good clients, they have also given me the chance to contribute to the design community.

Finally I have to thank my family, friends and ex-colleagues who encouraged me to jump into my career, expressed useful appeciation and critique of my work and gave continuous support. You know who you are.

Check out these posts too:

1. 5 Ways To Impress Your Clients

UPDATE: Android 2 is out with a revamped interface and better icons. The guidelines have been updated. This post reflects the previous icon system found in Android 1.1.

Overview

I recently designed icons for an Android app. It was the first time I had anything to do with Google’s operating system for portable phones so I was very excited about the job.
I’ll detail the design process soon but in the meantime I’d like to discuss the (few) pros and (lots of) cons of designing for this platform.

Icon types

Google has released guidelines for Android icon designers. There are instructions for all types of icons with color palette, shadow settings and reference diagrams. You can also download a template pack to get you started.

Android features two types of icons: launcher icons (48×48 px) are three-dimensional and colorful whereas the remaining icons (menu, status bar, tab, dialog, list view) are two-dimensional and grayscale.

This already feels like an iPhone ripoff but if you think about it it’s really the only way to go. Menus and toolbars must be visually simple so they employ pictograms instead of full blown icons. Android adds shadows to these pictograms in order to differentiate itself from the iPhone. I believe this is a poor visual choice which adds no value to the icons and in fact reduces their legibility. Anyway since these pictograms are rather simple I’ll concentrate on launcher icons here.

Launcher Icons

In Google’s words: A launcher icon is the graphic that represents your application on an Android device’s Home screen.
Here’s a set of launcher icons from Android’s default set:

My first reaction was: Cool! they’re all 3D!
Unfortunately on closer inspection we can observe a certain lack of homogeneity in the set. Some icons are clearly three-dimensional (Alarm Clock, Calendar, Market) while others are basically two-dimensional icons viewed in perspective (Generic Application, Google Talk, YouTube). It’s reminiscent of Windows’ infamous default icon set:

Ok, Android icons are not that bad! Hey, at least they share a unified visual style and they seem to conform to the same perspective grid. In fact that is exactly the case.
Below is the reference cube to be used for all icons. The designers carefully considered every aspect of the icons therefore the guidelines include precise information regarding the size, the perspective angles, the radius of the rounded corners and the shadow properties:

The guidelines continue: A launcher icon [...] is a simplified 3D icon with a fixed perspective.
Yeah, about that. Many adjectives come to mind but “simplified” is not among them. The perspective cube doesn’t have a single straight edge. What do you think will happen when you scale down the artwork to 48×48 pixels? Massive antialiasing. At least that’s what happens if you have complex designs.

The biggest problem I have with this perspective grid is that the angle is awkward. It forces you to either emphasize the top face, which is not ideal for all icons, or the front face, which is unfortunately slanted forward. What is that? Not to mention that the side face is viewed at an extreme angle that deforms the shapes beyond recognition. So no detail must be present there. Here’s the Illustrator template you can download from the guidelines:

Both the house and the answering machine have no detail on their side face.
Let’s review the YouTube icon from Android’s default set:

See what I mean? This icon is essentially two-dimensional yet it is viewed at an angle.
The words You and Tube hang forward and down, a very unusual angle. For 48×48 px icons it’s best to choose a perspective angle that preserves straight lines either horizontally or vertically. See what a true master icon designer like Hybridworks does with the amazing Yoritsuki icon set:

See how he kept all horizontal lines exactly straight? That really helps the icons be legible at this small size.

Let me include a few of my own icons for completeness:

As you can see some icons work really well (Burger, Banks, Travel) while others are strangled by the perspective (Coffee, Groceries, Hospitals). The gas icon depicts a road sign rather than an actual gas pump which, at this angle, would have been almost indiscernible.
Granted, in a set as diverse as this you can’t expect every icon to work equally well (and let’s not forget my own craftsmanship which I hope will improve over time) but I’m sure a simpler perspective grid would have created less trouble.

Android’s perspective grid is a bitch to master.

There, I said it.

Android icons vs. iPhone icons

The iPhone Interface Guidelines don’t include specific requirements regarding perspective, color palette, corner radius and shadow blur distance. Icons can be 2D or 3D, more or less realistic, simple or complex, plain or detailed.
The way the iPhone achieves visual coherence is by framing all icons in a 57×57 px rounded square. No matter what the squares contain they all look nice sitting next to each other, both in grid and in list view.

Of course this alone doesn’t prevent icons from being ugly though it seems that iPhone developers pay attention to their main icons.
Maybe it’s because they know that your app’s main icon is what sells it.
Enter the Android Market.

Android Market

Android Market is the equivalent of the iTunes App Store.

Are they kidding? Is this the way to counter the iPhone?

Take a look at the app gallery. Take a close look at those launcher icons. Did any of the developers read the design guidelines? Forget about respecting the idiosyncratic perspective grid, most of the icons are not even three-dimensional!
I’m sorry but this is unacceptable. If I were considering an Android phone I’d be immediately put off by these two facts:

1. The app icons are poorly designed.
2. Android’s quality control is non-existent.

Say whatever you want about Apple’s byzantine, puzzling approval policy for iPhone apps but at least they weeded out the amateurs. This is the impression that I get by browsing the App Store in iTunes.

Notice how many styles these icons encompass and yet they don’t look bad next to each other. The common frame helps unify the view. The lack of perspective and color restrictions allows the designers to fully express the app’s potential.
My reasoning is that a platform open to developers should not cripple designers before they even start working.

If you’re an Android developer please consider hiring a professional interface designer for your next application (a shameless plug, but I’m also trying to make a living here).
If you’re a member of Android’s approval team please don’t let the amateurs through by requesting developers stick to your design guidelines (but consider changing them).

Conclusion

I still don’t own an iPhone and I don’t know when I will. But I am definitely sure I won’t ever own an Android-powered phone.

Designing icons for the Android platform has the advantage of pushing your skills to the limit by forcing you to come to terms with a tough perspective grid. And the icon world could surely use more designers skilled in 3D and realism.
The problems lie in the unpredictable results these restrictions yield. An awkward viewing angle, a restricted color palette and a small size certainly don’t do justice to good design.

My advice to the Android graphic team: step it up!
Consider introducing a perspective grid that doesn’t smother the icons in antialising.

Someone informed me on Twitter that new icons will be introduced with a different perspective at 72×72 pixels. While this is good news for future apps it also means that present apps will have to redesign their launcher icons. I shudder at the thought of what some of the developers will do (read: scale their PNGs up…).
I’m kidding. No disrespect here, I know there are serious developers out there who are passionate about their work.

What are your thoughts on this matter? Am I too harsh? Or outright wrong?

Check out these posts too:

1. Android Icons for Free411.com
2. Designing iPhone Icons
3. CalorieQuick Icons

Cha-Ching

Dropzone

Espionage

Little Snapper

Tea Round App

Times

To all the designers: great job!

Check out these posts too:

1. Icon Inspiration #2
2. Icon Inspiration #1
3. How to Create an iPhone Icon: Full Workflow

Here we go!

Artua Design Studios

DomainBrain

Envato

IconBakery Mixer

Mozilla Labs Jetpack

Things

If you know more websites with kick-ass icons please let me know in the comments.

Check out these posts too:

1. Icon Inspiration #3
2. Icon Inspiration #1
3. Introducing Icon Kitchen

Drawing inspiration from the book Hagakure, by Tsunetomo Yamamoto, I put together a few guidelines to help us designers be a true samurai in our profession.

The way we approach design problems, our decision-making process and the plans we have for our career can all be enhanced with a healthy dose of samurai ethics, in my opinion.
Years ago, when I discovered Hagakure, I was blown away by how effective its teachings were. Overnight I was cured of many of my guiltiest sins: undecisiveness, procrastination, lack of focus. Ever since, the ethics of the samurai, properly updated and adapted to contemporary life, have helped me become a better person, hence a better designer.

Give the article a read, it might help you too.

No related posts.

Drawing from my experience of the past months, when I was working full-time for a design studio and pursuing my freelance career at the same time, I have prepared a set of five rules to help freelancers make a lasting impression on their clients. Give it a read and comment. Thanks to Andrew Houle for publishing it!

Check out these posts too:

1. How To Be A Samurai Designer
2. Editorial Illustrations for Smashing Magazine #1

1. Atebits

2. Brush Pilot

3. Cappuccino

4. Coda

5. Coffeenatic

6. CSSEdit

7. EngineHosting

8. Espresso

9. Transmit

10. Turbomilk

Check out these posts too:

1. Icon Inspiration #2
2. Icon Inspiration #3
3. New Icon Series on PsdTuts+