I access my work emails from my three domains through Gmail’s excellent web interface using Google Apps. Here’s how I set it up to visually organize my inbox:

As you can see the Important inbox contains all emails pertaining to jobs. Some are starred which means I have to do some work and send it to my client. Unstarred threads are either waiting for the client to write or they are separate threads related to active jobs.
Starred contains a job inquiry to which I have to reply.
Everything else contains unstarred messages not pertaining to active jobs. They are job inquiries or any other kind of conversation that are either waiting for my contact to respond to or “someday” conversations of lesser importance that I keep in the inbox for easy access.
Let’s go into more detail.

Labels

I use two main labels.
Quote is for job requests.
When I get an email from someone who used one of my contact forms I reply with a ballpark figure telling the client that more details will follow upon further interest. If the potential client is still interested I prepare and send an accurate estimate.
If the quote is rejected or anyway the offer falls through I simply archive the conversation.
I can always do a search for messages labeled “Quote” for future reference.
This label is added automatically to emails coming from this website via filters.

Then there’s Work.
When I win a job I add this label to the conversation. Simple.

I have a few additional labels, also applied automatically by filters. They either identify specific senders (like my accountant) or mark messages sent to or from specific addresses of mine (ex: emails sent via Andreaaustoni.com as opposed to Cute Little Factory or sales from Icon Kitchen).

Priority Inbox

The Priority Inbox collects all messages marked as important. I only upgrade job-related emails to this inbox. This means that when an estimate is accepted and a new job is scheduled I mark all related emails as important and they are moved up into the Important Inbox.

Starred messages

I use several stars to mark emails. One for messages that require me to take action (either reply to it or do some work and send it); one for urgent emails; one for completed jobs; one for jobs that ended before completion; one for emails that require me to do research.

Every time I look at my inboxes I know how many messages require me to take action.
If they are in the Important inbox they are jobs, which means I have to do some work. If they are in the Starred inbox they are everything else, most probably job requests.

The power of threads

From the client’s initial request for an estimate to the “I really enjoyed working with you on this project…” message I send after completing a design, all my jobs are contained within single email threads.
At any point during a job I can access any exchange with the client to review the deliverables, check my remarks and the feedback I received.
It’s a credit to Gmail’s design that dozens of emails can be accessed and managed so easily.

What tricks do you use to enhance your Gmail productivity?

Check out these posts too:

1. Tips on Design Pricing, Estimates and Invoices

If you’re starting out as a freelance designer or you just became self-employed after years as an employee in a design agency chances are you’re having trouble pricing your work and winning jobs.
A lot has been written and said about pricing by other people. I’ll just give a few tips on general pricing practices and specific design jobs I’m experienced and specialized in.

The first pricing tip I will give is:

People do crazy, unexpected things when money is involved. Be careful!

Make sure you’re protected in case the excrement hits the air conditioning.

Fixed or hourly rate?

I use fixed rates for design jobs I’m experienced in and an hourly rate for everything else.
I prefer fixed rates because the pricing structure is simpler, the client knows exactly and up front how much money will have to be paid and it’s easier to adjust my rates as my skills (and needs) go up.
For jobs that I have no experience in, like creating web banners, I have to use an hourly rate because, frankly, I have no idea how much work and time will be required to complete the assignment. It might sound silly and infantile but it’s a very honest way of doing business.

How do you determine your fixed rates?
After doing a bunch of jobs I started to see patterns emerge in my working habits and schedule. I started to develop a sense for what things require more work, what jobs and client types are more demanding. Simply put, I gained experience. Experience will guide you in determining your rates.
When you’ve set a price add an overhead for the inevitable slips in schedule and minor and major problems that WILL happen (client doesn’t respond to email, Internet is down, hard drive crashes, cat pees on sketches, printer jams, etc).

About that hourly rate, how do you determine that?
I’ve done my research and I’ve settled on a figure that: 1) satisfies me; 2) I feel accurately represents my skills and my standing in the market; 3) is competitive enough to win jobs.

Occasionally I revisit my rates after an assessment of my finances, expenses and an objective look at my work and my skills.
I’ve also had to do some bargaining in my short time as an independent designer. In one instance, upon signing a contract with a design company that occasionally commissions work from me, I raised my hourly rate to compensate for the presence of a binding non-disclosure agreement that prevents me from publishing the work I do for this company.

Take a hard look at your portfolio, assess your skills and potential for growth and don’t be afraid to demand just compensation for your services.

Getting paid

No matter how carefully calculated your rates are they mean nothing if you don’t get paid.
In Italy we have a saying that goes like this: Trusting is good, not trusting is better.
I’m not saying you should be paranoid and think the client you’re working with will try to rip you off but why risk it?
I’ve seen people do incredible things in order not to pay money. I’ve seen people arguing. I’ve seen people fighting. One guy who owed me and another designer lots of money even fled the country. Madness.

Always get a deposit, preferably 50% of the final price.

This practice was new to me when I first encountered the online design community.
Three years ago I was working dead-end jobs in anonymous design companies, doing menial work for uninteresting clients who only cared about quantity, under bosses who only cared about saving money on wages. My skills were not employed, somehow I always got demoted to insulting tasks like designing dielines and preparing files for print. I wasn’t building a portfolio and I was feeling underappreciated. I was wasting my time.
Then I discovered guys like David Airey who were running a successful online business as self-employed designers. They had clients all over the world and they were getting paid 50% before even lifting a finger.
I was amazed.
Nobody in Italy got deposits, let alone 50% up front. Everybody was constantly after clients to get them to pay the damn invoices.
Well, that is Italy and this is the rest of the world. I don’t know where this practice got started but it’s a good one. Here’s why.

A while ago a guy (who shall rename nameless because I’m a nice guy) contacted me about some custom icons. He needed me to add a couple of social icons to one of my previous sets. The job was small and paid little so I figured it didn’t make sense to get paid in two installments and besides, if the guy dropped out of sight I could still use the icons to expand my existing set.
Well, the guy did drop out of sight. He never got usable files from me, of course, but I still ended up working for free.
What if it had been a high paying job that required a lot of custom work that couldn’t possibly be repurposed?

You need to make sure the client is commited to the job and the only way to do that is to get a deposit. It’s a common practice to make the deposit 50% of the final price, which forces the client to make a solid commitment without entirely going out on a limb with a designer that could turn out to be a flake and a crook. You split the risk with the client 50/50.
Once you’ve completed the job and you’re ready to ship it what if the client disappears?
At least you’ll still have half of the money and the job files.

Never ever send the final, usable files before getting paid in full.

If the client disappears when it’s time to pay the balance you will lose 50% of the money but at least the client won’t be able to use your design.
If you’re designing a logo, withhold the vector files until after getting paid. If you’re designing icons, withhold the transparent PNG’s. And so on.

Now this may seem harsh and bitter reasoning but actually it’s just honesty and common sense. When you run a business you need to start thinking like a businessman and you have to be careful who you deal with.
Don’t worry, though. The professionals you work with are also businessmen and they’re perfectly aware of the situation and they will not argue with the 50% deposit. It’s pretty much standard in our line of work and it works like a charm.
When you’re getting paid the right amount of money and you know the client is as commited to the design as you are you will be motivated to work and the result will be positively affected.

What if you the designer get 50% of the money then drop out of sight? You’re a crook!
You’re a crook and the client will destroy your precious online reputation by telling the truth about you on social networks and by commenting on influential blogs.
If you think about it nothing stops anybody from doing this anyway without even having been ripped off by you. Scary thought, right? Suddenly that 50% doesn’t seem so much.

Seriously, though, be professional! Clear understandings breed long friendships.

What to put in an estimate

Estimates should first present a description of the design. I like to outline my design process so the client knows what will happen while we work together. This section of the document is where I specify the format of the files that the client will receive. Don’t skip this step if you want to avoid arguing about whether or not you promised to send the working files, vectors instead of PNGs etc. This is important!

Next up is a description of the payment method. If you use PayPal put your email address here in bold letters. If you use bank transfers here goes your bank account.
I always specify that the deposit will have to be paid before the design starts and that the balance will have to be paid before the final files are sent.

A table will show what will be designed and how much it will cost.
Describe precisely what you will deliver. If it’s icons, write down their number and their pixel sizes. You might want to repeat the file format here, too.
If you include design revisions put them here.
Break down the payments into deposit, balance and fees (if you have any, like from PayPal). Repeat here when each payment will have to occur (deposit = before the design starts; balance = before the final files are received).
Use big fat numbers and never forget the currency! I know it sounds obvious but…you don’t wanna know…

Last but not least comes the intellectual property section. Here is where you specify authorship and ownership of the design.
I retain authorship of all designs, accepted and rejected, and maintain the right to use them in my portfolio and in any promotional medium. My clients acquire full commercial ownership of all accepted designs while I keep ownership of all rejected designs.
You might have a different arrangement but please take a moment to consider your options here. When you work for yourself and your business depends solely on your online visibility (my case) it’s of paramount importance that you can show the world your accomplishments.
Sometimes clients will ask you to sign a non-disclosure agreement before giving out any details. They have a great idea for an app and understandably want to protect it. I have no problem signing these documents as long as, at one point, I am allowed to publish the work to my portfolio. If I can’t my rates instantly go up. Coming clean about this eliminates any possible friction.

Proper invoices

I don’t live in the US but I know the IRS can be mean. Ask Wesley Snipes.
Even if you live in a country where taxes are considered a joke and the prime minister brags about not paying them (did anybody say Italy?) you should properly invoice your jobs, at least not to arouse suspicion…
Some clients won’t even mention invoices, others will ask you to do the job under the radar (the nerve!) and others will even do so much as to doubt your integrity. As I said in the introduction people do crazy things when in the vicinity of money.

Invoices are usually the last thing you do after completing and delivering a job unless the job is big and you’re breaking it down into smaller payments or you get a monthly retainer or any other periodic payment.
First of all each invoice must be uniquely numbered. I wrote in another article how I name and number my files.
Make sure you summarize every payment with amounts, dates and conversion rates (if you work across borders and get paid in multiple currencies).
There’s no need to be specific or verbose in the item description. Just make sure you reference the job.

Invoices issued by a designer should probably look good, don’t you think? I wrote a tutorial on invoice design if you need suggestions in that area.

Finally, a big “Thank you for your business!” at the bottom of the invoice never looks bad.

Pricing logo and identity design

Since I use fixed rates it was easy to set up the pricing for logo and identity design.
I have prices for logos that are dependent on the number of concepts required by the client. Only one concept will be taken to completion of course.
Identity and collateral are priced in a similar fashion: stationery (letterhead and business cards), logo style guide, stickers, favicon, etc. all add a fixed amount to the final price.

The most important tip I can give for logo design pricing is this:

Never offer less than two logo concepts in your estimates!

The price will be much higher but you will avoid a potentially disastrous situation.
If the client pays for only one concept and he/she doesn’t like it it will be very awkward for the both of you to settle the ensuing argument. The client likely will want the deposit back, you will refuse, angry emails will be sent, threats to destroy your online reputation will be uttered, guilt and rage will fill your soul, your pride will take a hit, just a bunch of design biz stuff that you better steer clear of.
I’ve been in such a situation, not as bad as I outlined above of course (there were no threats), and it was only because the client was an intelligent and understanding person that we were able to resolve the issue and get along with the project (which turned out great by the way). But that was only luck!
I learned that it’s better to present the more expensive option, explaining to the client why you don’t offer the cheaper 1-concept price.

Pricing icons

How does one price a highly differentiated field such as icon design?
Icons come in several styles: simple, monochromatic and two-dimensional pictograms; two-dimensional stylized icons; three-dimensional realistic icons; OS app logos; mobile app logos; various interface icons; etc.
Clearly a pictogram requires much less work than a full-blown three-dimensional app logo. (See SoftFacade’s work for stunning examples of the latter.)
Icons also come in several sizes. Resizing them takes skill, care and time. Obviously it’s much easier and faster to create, say, web icons at one size than creating iOS icons in all 7 sizes (512, 114, 72, 58, 57, 50, 29 px) or a Mac+Windows app logo with each OS having different size and style requirements.

When I became self-employed and I started taking on client work I used to price my icons differently each time, depending on their size, number and style. That seemed the wise way to go about it at the time but it isn’t.
There’s simply too much work involved in determining what the client needs, especially considering that some clients don’t know it until they see it. Also, what happens if the design takes an unexpected turn and the size and style of the icons get radically changed? It can be difficult and awkward to adjust the price accordingly, let alone convincing the client that more money is needed.

For that reason I’ve started to adopt a fixed rate for icon design, exclusively dependent on size. I carefully measured the amount of work and time each icon style requires and I’ve come up with an average figure that has me covered in every situation. The result is that, basically, I overcharge a bit on simple designs and I undercharge a bit on complex designs.
I feel this is the best way to go because it yields a simple and clear price structure (always a hit with clients), it makes creating estimates a breeze (always a hit with designers) and ultimately it is an honest way of pricing your services (always a hit with your self-esteem). The average figure you come up with is generated by your ever-increasing skills and takes into account all possible client requests and in-job developments.

So have a price ready for each individual icon size and also prepare package deals for common icon bundles (Android, iOS, OS X, Windows, web mascot, etc).
It’s interesting to note that icon design giants Turbomilk follow this pricing structure and they’ve also chosen to publish their rates on their website.

Conclusion

All of the stuff above is a good starting point but you have to be flexible if you want your little business to thrive.
Sometimes your clients will have special needs. Other times you will accept a cut rate because the job is interesting and you need it for your portfolio.
Just use your head and always be honest. Good luck!

Do you have a different pricing scheme and what is it? I’d like to hear your thoughts on this topic so please comment below.

Check out these posts too:

1. “I SHIT DESIGN” T-Shirt available!
2. The Legacy Of Polish Poster Design
3. Design a Fun Invoice Template with Illustrator and InDesign

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. Logo and Icons for DailyShopper

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”. It seems the Eighties didn’t spare typography either. As you can read in Philip’s comment he did not design the typeface. It was redrawn from older references. 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. “Mobile Design for iPhone and iPad” Cover Illustration
2. Mastering Photoshop for Web Design Ebook Cover
3. Smashing Magazine Writers Illustrated

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.

No related posts.

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. Net Worth Logo and 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. Realistic Leather Briefcase Icon

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.