The Art Of The iOS Icon | Hacker News Reader

The Art Of The iOS Icon

mobileinc.co.uk

200 pointsmuratmutlu67 comments

One of those icons was designed for an app of mine : http://itunes.apple.com/us/app/bill-organizer-manage-track/i...

We (the designer and I) ultimately rejected it, because it just did not stand out at 57x57. As good as some of those icons look, you have to discipline yourself to view and evaluate them at 57x57, cos thats how the user is going to see them. Also bear in mind that the user will see them among a multitude of icons, so they have to stand out for more than just being pretty..

I am tempted to conclude that these pretty icons just don't matter as much as we think they do, and the most effective ones may well be those with a solid bloc of color (like the path icon), cos they are easier to make out on a crowded screen .

that app of yours is getting some serious bashing... is the app new, or are they unfair reviews?

The app is new..the biggest complaint, is that there is no way to delete stuff. There is.. ie , swipe from left to right on an item, and a delete button appears, something I thought was pretty familiar to most iPhone users (turns out I was wrong).

Right before I submitted the app (a second time) for review, I decided to ask the user if they wanted to upgrade to the full version every time they saved a bill...I forgot to also remove the buy button on the main menu, when a purchase was made in that particular instance. The user still got the full version, but as you can imagine, the presence of the buy button made it look as if the features were still unlocked.

I'm of course working on an update to fix those..and add a few new features.

The swipe left to right to me is counter-intiutive, most of the apps I've come across it is swipe from right to left, and the button to delete appears on the right.

Although, testing with some apps right now it appears both ways works, but I have noticed that apps also generally include an edit button that then lets me select multiple items and do a particular action on them.

I have a similar problem... an android app where users complain about a missing feature which is available when tapping Menu. Amazing how many android users don't know about that key!

I haven't done any serious iOS programming yet (might do in the summer), but if I ever anted to release an app, you know what's the first thing I'd do?

    MAKE SURE APP RINGS HOME EVERY TIME IT OPENS TO SEE IF THERE IS 
    ANY URGENT MESSAGES I'D LIKE TO TELL ALL MY USERS.

I don't care the slightest if it's something Apple doesn't want you to do, or wants you to do over notification center, just do yourself a favor and create a direct channel between yourself and the customers (so that you can send them a message whenever you felt like).

If you had such channel, you could've told them (after an apology for the inconvenience it's caused) how to remove bills, and that you're working on the next version, and the buy button was a bug, and avoid 1-2 star reviews, and sell much much more (no one buys/download a 1.5 star app).

> I don't care the slightest if it's something Apple doesn't want you to do

Just to be clear, did you want this app to appear in the AppStore?

:) Well, there are rules, (official and unofficial) guidelines and "best practices". The first two, you can't break them, but you can break the third and still be in the App Store. I think an annoying direct channel falls in the third category. I've seen many apps/games do it. Two of them (of top of my head) are blockbusters and have sold tens of millions of copies combined: Doodle Jump & Jetpack Joyride. So, yes, you can do it and still be in the App Store.

Assuming they aren't annoyed by it and close it without reading so they can do what they wanted to do with the app.

Yes, we must be careful to use it sparingly and only in the extreme cases that could result in many negative reviews.

A real world example of how this can ruin your rating:

I use a text editor on OS X called 'Mellel'[1], which is available both in Mac App Store and as a direct purchase. It's excellent and supports RTL languages (Persian, in my case) better than any other text editor. There was a bug on OS X 10.7.4 that caused the cursor to disappear. It was a simple bug and the developers issued a notification to all non-App Store customers (they obviously have their emails) on how to remedy this issue, but it took them like 10 days to update the app on MAS, causing a few negative reviews.

[1]: http://itunes.apple.com/us/app/mellel/id415467848?mt=12

A lot of stuff on dribbble looks great on dribbble.

Doesn't always translate to real life where context is king.

Are you talking about this?

http://xkcd.com/993/

xkcd never fails to amaze me

Actually, here in good 'ol socialist Sweden all of our groceries, with a few exceptions, used to look like that up until the end of the 90s. I remember as a kid eating cereals from a big white box with the word "CORNFLAKES" on it in big blue bold letters.

In Germany, one of the grocery store's own products are called "ja!" and sold in white packages with just the logo and the content printed on them.

Example: http://polpix.sueddeutsche.com/polopoly_fs/1.992181.12827258...

Umm, no they didn't. What you're talking about was a particular brand, Blåvitt[1], owned by the Konsum chain of stores. It was a very concious (and successful) marketing strategy, and not some generic non-brand.

[1] http://emmaskok.blogg.se/images/2011/blvitt2_149458969.jpg)

It's a lovely idea, apart from two things.

1. I suspect's impossible to trade mark or or register the design - so let's assume you raise your brand profile and get a reputation for good quality food at reasonable price - your competitor simply (almost) clones your line of packaging and piggy-backs off all your hard work - since they're a big conglomerate they'll under-cut you by a couple of pence too.

2. In certain countries such packaging tends to be associated with low-cost 'basics' brands - so if you're offering a premium product, you're likely to struggle.

Euroshopper is a "low-cost 'basics' brand" so i guess they're fine.

An European brand called Euroshopper did something very similar:

http://www.thedieline.com/blog/2011/3/7/before-after-euro-sh...

This is basically what Asda Smart Price and Sainsbury's Basics do in the UK.

My first iOS app's icon was a single bold white letter on a green background with the default Apple gloss. It's still my best-seller and not once has anyone complained about the cheapness of the icon. It stands out better than icons I spent much more time on. I did eventually go back and rework the gloss so I like it better and added some texture for the big 512px versions, but it's still essentially a white letter on green background.

Unfortunately this approach is losing appeal now that there are so many icons designed like that (Facebook, Tumblr, Google and many others).

You hired Umar to work on your app design? I'm currently in talks with him to work on one of our apps. How is he as a designer. Would love to hear from someone who has worked with him

I think this should be a private conversation.

You can see many of the icons in their 57x57 size on this site, and even toggle between the different sizes

http://iicns.com/

Cute site. It doesn't change the fact that the iOS icon standard is terrible, though. (It defeats the human visual system's attempts to recognize objects by silhouettes, which is why so many people take so long to find the icon they are looking for).

It's not terrible. You're ignoring the human visual system's ability to recognize objects by color, shape, or pattern.

It seems likely from your reply that you have no education in matters related to vision. The human visual system uses other things too, yes, but silhouettes are one of the most dominant features because they are most invariant to lighting conditions. (Think about what would happen if you mostly depended on color, but now you are walking around at night when humans have poor color discrimination).

Shape and silhouette are closely related.

With simple icons, like the Phone app, the background is not overly distracting. Unfortunately many apps believe they need to fill the entire icon with detail. The YouTube and Notes apps have pictures instead of simple shapes. There is nothing to subconciously recognize so instead I must interpret the picture and conciously map that to the name and purpose of the app.

Apple could have used spacial awareness to help us recognize apps. Unfortunately iOS messes this up too, the home button can take me to any of my app screens. So I need to get my bearings before hunting for my app.

We are left with just color and patterns to differentiate icons. This makes the task of recognizing apps much more difficult purely so the phones look nice in store.

I wonder if the reason is that idiots will fill the whole available area anyway. Is Apple that afraid of bad designers?

Ony my HTC One X, PlayBook and Mac, the builtin icons are gorgeous and have interesting silhouettes. But if I look at any of the three attached App Stores, 3rd party vendors are desparate to fill the whole area with details.

The medicine category in the Mac App Store is a pretty good example of it. Most icon are either a solid block that will ruin your Dock's aesthetics, or a circle. I wish Apple would reject them all, but I can imagine the media response to that.

http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewRoom?f...

Eh I think it's more of a brand choice. They've pretty much cornered the market with the rounded square. Anytime I see that, I think of an app icon.

That and standardizing the white space between apps. It looks cleaner to me than looking at a bunch of different sized silhouettes. Yes, it might be less efficient, but I'd prefer the overall aesthetic over the half second I potentially lost.

Nice collection, thanks for posting. Have you seen Marco Arment's new Nursing Clock icon? Clever and Unforgettable

http://itunes.apple.com/us/app/nursing-clock/id525195468?mt=...

The author of the article seem to think that a good iOS icon is a one that uses a perspective trick to produce a faux 3d effect. I'm not sure these are very usable when sized down to 57x57 pixels which is default iPhone icon size (double that for retina).

"Never underestimate the importance of a great app icon. It’s the first thing a user sees before downloading your app (I’ve downloaded apps in the past solely on the icon making the app seem interesting)."

I cannot stress the importance of this. I have payed money for apps over their free counterparts because the icon looks better. It's a bite sized preview of the experience I can expect to have with your whole app, and more often than not, the quality of the icon is directly correlated to the quality of the UI and UX as a whole.

Those icons are absolutely horrible. They are images, distracting the viewer by the amount of details. Icons should convey only the bare minimum of shape. The metaphor of the meaning should be captured, not the incredilous picture of a remotely possible parrallell.

The problem is most of those aren’t actually apps (are any of them?) and are not shown at actual iPhone size. Dribble isn't the app store.

The post may has well been titled 'Cool picograms in a 1024 pixel rounded square'.

1) Put £500-800 of your budget aside

I think this is a gross underestimation of how much these designs would cost. Does anyone have any real data on the cost of iOS icon design?

I've contacted several designers on that list, give or take exchange rates, you can expect to pay that.

Does that include the 57x57 icons though? As several people have pointed out, most of the icons you posted won't scale down, whereas Apple and Co may have some beautiful hi-res icons but also completely re-do them for smaller display.

Yes it did in my enquiries. I hired one of the guys and he produced the full set of icons, making changes to all the sizes to make sure they looked good on the phone.

Anyone willing to pay that much for an icon design either has deep pockets or a big commitment to good design. That is a lot of money for an icon.

I don't see that at all. Unless you are just building free throwaway apps in your spare time, it's in the realm of reason for any serious app.

People do make decisions based on icons, so a better icon can be good investment if you are trying to attract downloads.

In the Apple ecosystem, you need a commitment to good design. It's less strong than it used to be (for example read John Siracusa and early Gruber criticising Apple's design choices with in OSX or Pierre Igot taking every app he comes across to task). But it's always been a defining point of playing in the Apple world, ever since Steve Jobs mentioned his calligraphy classes.

I think it's a gross overestimation. There are plenty of good designers who will do work for a lot less than that. I had an entire iPad app design done for around $300 (icon, table background, custom table cells) and I recently got another design done for an app for $100 (icon, splash screen, custom tab bar backgrounds, custom nav bar backgrounds, custom table backgrounds).

I'd like to see what these "good designers" produced for that little.

I got all the graphics in this app, including the icon, for $100 and I was pretty happy with it:

http://itunes.apple.com/gb/app/f1-mobile-2012-best-f1-app/id...

That looks like a 100$ icon if you ask me.

The price also included the splash screen, custom tab bar, table backgrounds, custom navbar. I could probably get better if I paid $800-1000 but I think that this is good enough.

I love all these designs and follow many of the designers who created them on Dribbble. These are impressive aesthetic achievements, but I'm always surprised that none of these icons are for an app with decent sales. I don't think many, if any, of these are in the top 200 of their respective categories, but there are a number of horribly designed icons in most of the top 20's. I'm a designer and predisposed to nice designs, but always find it a shame that these great works don't get a larger audience.

What do these actually look like on the iPhone at icon size?

It varies, on Retina many look beautiful. Some of the icons shown in the post are only for iTunes which has a different, larger pixel size (512x512) to the one on the handset

I wondered about this too. The icons that use a pseudo-isomeric perspective may look strange next to a bunch of top down icons.

I understand the criticism about these highly-designed icons not being appropriate for low resolutions, but any decent designer will recreate them from scratch for different sizes so they still perform well.

Murat, are there any resources/insight you'd recommend for making app icons yourself?

Here's a great video of one of the designers recording their Photoshop session and creating a icon

http://vimeo.com/36302707

I use this PSD to create icons, it comes with a PS Action that resizes and exports the icons based on the biggest design so you don't have to make each one. It also puts it in situ!

Download it here http://www.pixelresort.com/blog/new-app-icon-template/

Just my $.02, and I realize this is anecdotal, but I don't give two craps what your icon looks like. If your app is good, I'll use it.

You're right. But a lot of users buy/download free apps simply because it has a nice icon. Would you buy/download '3420 TOEIC Word Test Pack'[1]? It might be good, but you wouldn't download it because it's ugly and pollutes your shiny phone's home screen.

[1] http://itunes.apple.com/us/app/3420-toeic-word-test-pack/id4...

Well, like most people on HN, I'm an engineer, and I just don't care. I want functionality and stability. You could have the ugliest icon ever and I just don't give a damn because it is irrelevant.

I agree completely, and that's what I do too. But I also understand that potential iOS users are not necessarily engineers and if my goal is to sell more apps to these naive users, I'd better find a good designer.

There's nothing inherent in being an engineer that means you can't appreciate good design.

No, but dismissing an app based on "bad design" (of a tiny icon, of all things) is just prejudicial, illogical silliness.

That is some of the ugliest UI I've seen since the Windows 3.1 days. Brings back memories of CD-ROM encyclopedias.

Another anecdote- I don't care how good your app is, if it doesn't look good, it looks like you don't care. I'll eventually get annoyed and stop using it.

It is true, I do not care about design. I am not a designer, nor will I hire one. I produce apps that I find useful, and try to make them easy to use and not too ugly.

Making it easy to use is design

Great attitude!

But will you find it? I don't care much how the apps I use look either, but when I'm scrolling through search results in the store, I'll skim right over the apps with cheap icons, because I'll presume they're poorly-made spamware (since generally, that's true).

Reply on news.ycombinator.com