MacIcons

How Important Is a Good Icon?

It is hard to express just how essential a great icon is, especially with the Mac App Store in play. Many people will go through the App Store and only find out more about an app if their eye is drawn to the icon. Others would argue that this is a foolish thing to do, as the quality of an app could be great, even if their icon is not. This is, of course, true, but an icon is a great representative of the quality of your app. If you’re willing to invest time and money in creating an awesome icon, there’s a good chance that you will have spent the same amount of effort with your app. If you drew a few colourful shapes in MS Paint for your logo, your app’s quality is likely to reflect the same type of effort and investment.

Icons in the Mac App Store

Icons in the Mac App Store

So What Makes a Great Icon?

Size

One interesting difference between Mac and iOS icons is that iOS icons are all a fixed size – They fit into that nice box with rounded corners. You can’t really go wrong. With Mac, however, it’s quite the opposite. The default icon size for Mac is 512×512 pixels, but if your icon stretches to the borders of that, your icon won’t look right.

Let’s take, as our first example, some square icons. First up, we have Mixtab, an app which started off on iPad, and whose icon is the exact same as the iPad version. Secondly, we have the Adobe CS4 icons, which, despite being a simple square, were undoubtedly focus-grouped to death. Looking at them side-by-side, the Mixtab icon is much bigger, and doesn’t fit in with the standard icon size in your dock. Adobe, on the other hand, have added a little bit of padding around the square, making the icon fit into your dock much more easily.

Mixtab and Adobe Illustrator

Mixtab and Adobe Illustrator

Secondly, here’s a screenshot of a whole load of great circular icons – You’ll notice that they are all the same size – It’s this level of consistency which makes the standard of design on MacOS/OS X so wonderful.

Circular OS X icons

Circular MacOS/OS X icons

Perspective

If you look at any icon in your dock that represents a real object, you will find that they have a certain perspective, and if you go with a flat icon, or an icon with a very different perspective, your icon will, quite frankly, look ridiculous. One of the most well-known examples of this is the Twitter for Mac app. It’s a great app, but it’s default icon is at an angle which is completely off. Your icon doesn’t have to be perfect, but if it is too conspicuous in your dock, it won’t work.

Twitter for Mac

Twitter for Mac

Number of Elements

When creating an app, it’s important to keep the number of elements to a minimum – One or two should work fine. I don’t care if your app has a billion features, it doesn’t need to have an icon which represents every single feature. The challenge for a designer is to find something which represents the app as a whole.

Something that represents this wonderfully is the icon made by SoftFacade for Eloqua. SoftFacade are an absolutely incredible team, and have made beautiful icons for apps such as RadiumNotificant, and much more. This client, however, requested that they include all kinds of elements in the icon, and it ended up as something of a mess. The elements are drawn to perfection, the perspective is great, but the number of elements just ruins everything.

Eloqua Icon

Eloqua Icon

Realism

There’s a certain level of realism that comes with making an MacOS/OS X icon – You don’t want a cartoon drawing, or anything too two-dimensional. Icon designers are expected to make 3D icons that look almost like the real thing. “Almost” is an important word there. Your icon should not just be a photo (thought Preview’s icon does contain a photo). It should be slightly unrealistic, to keep with the overall look of the operating system.

One icon which goes too realistic is the Yojimbo icon – It’s a great app, but the icon looks a bit too like a photo. Maybe it’s the texture, or the lighting – Either way, it just doesn’t work.

Yojimbo Icon

Yojimbo Icon