Build Mobile Websites and Apps for Smart Devices : Design for Mobile - Application Icons

11/30/2012 2:18:41 AM
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.

Figure 1. The application icons for Facebook, Campfire, and Basecamp

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.

Figure 2. The icons for the Voice Memos and Stocks apps on iOS

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.

Figure 3. The application icon for the StarTrackr app

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.

Top 10
SG50 Ferrari F12berlinetta : Prancing Horse for Lion City's 50th
The latest Audi TT : New angles for TT
Era of million-dollar luxury cars
Game Review : Hearthstone - Blackrock Mountain
Game Review : Battlefield Hardline
Google Chromecast
Keyboards for Apple iPad Air 2 (part 3) - Logitech Ultrathin Keyboard Cover for iPad Air 2
Keyboards for Apple iPad Air 2 (part 2) - Zagg Slim Book for iPad Air 2
Keyboards for Apple iPad Air 2 (part 1) - Belkin Qode Ultimate Pro Keyboard Case for iPad Air 2
Michael Kors Designs Stylish Tech Products for Women
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
Popular Tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Exchange Server Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe Photoshop CorelDRAW X5 CorelDraw 10 windows Phone 7 windows Phone 8 Iphone