Now that we’ve built up our lovely design for StarTrackr, we’ll
need an icon to match. Our icon will eventually be used in a number of places, but primarily
it’ll end up on our users’ home screens. In all likelihood, it’ll be the part of our
application that people will see most often, so we need to create a memorable icon that
reinforces the function we’re offering. In general, good application icons do one or more of
the following:build from an existing brand iconography
encapsulate the functionality of the application in a single image
play off the name to reinforce the identity
Good examples of the first approach can be seen in the Facebook iPhone
application, as well as the various mobile applications offered up by 37signals—seen in
Figure 1. Facebook uses a white “f” on a blue background; it’s
incredibly simple, but the association with their standard logotype and the color scheme of
their website is immediate and strong.
37signals have done a great job creating a set of consistent yet unique icons to
match their suite of applications, and this applies to the icons for the two mobile
applications they currently offer: Campfire and Basecamp. Campfire is a native application,
and Basecamp a web app, but they share a consistency of shape (and thus brand) while staying
different enough to be recognizable. The strong base color helps differentiate each icon
from the other.
There are some excellent examples of this approach all over the
place, particularly in some of the default applications on iOS, as you can see in Figure 2.
Voice Memos, for example, uses an old-school microphone to make the connection
between the application and its purposes. The iPhone Stocks app uses a graph to indicate the function—keeping track of ever-changing
stock prices—and hint at the application’s interface.
Unfortunately for us,
StarTrackr is yet to have the same brand recognition as, say, Facebook, and the
functionality of our app—finding and adding celebrity sightings—is difficult to distill in a
single, comprehensible image. Instead, we’re going to keep it uncomplicated and just use a
star as the main graphic element for our icon. This gives us a strong image that helps
reinforce the name of our application, and it has a nice association with the notion of
celebrity. This concept also lets us build on the visual style that we’ve established with
the application interface.
In our design to this point, we’ve been looking at
the idea of the red carpet and trophy gold, awards, and glamor we associate with celebrity,
and we can keep that flowing through the application icon. Figure 3 shows what we’ve come up with.
Icons should be, well, iconic, and our star fits the bill
perfectly. Sure it’s simple, but that’s exactly what we’re after. Some general rules when designing applications icons are:
They should be forward-facing. We want volume and presence, so some perspective is
nice, but don’t go overboard.
The light source should be top-down.
Fill the entire background. While some platforms support transparent images, your
app will look out of place on iOS without a complete background color.
Consider the icon’s appearance at small sizes, and create one that is recognizable
at every resolution.
Create artwork in a vector format. We’ll see later on that there are a myriad of
sizes for our icons.
Subtle texture will make surfaces feel more real and less clinical.
Above all, keep it simple.
