What’s in an icon? App icons are one of the first things a potential customer sees. A good icon will catch an eye, stand out from the rest. It will make your customer take notice, will entice them to click for more info. Your app’s icon is one of the most important graphics for your app and can make a big difference in attracting more customers.
When developing many apps, you might also want to opt for branding, either for your company, or for a series of related apps. A key element of branding is to determine a design element that you want to use throughout each icon. This element could be a style, an border, or something more specific. This post will walk through examples of how we’ve tackled branding for our apps, including our Trip Boss suite, and briefly discuss the difference an icon can make in sales.
What’s in an icon? App icons are one of the first things a potential customer sees. A good icon will catch an eye, stand out from the rest. It will make your customer take notice, will entice them to click for more info. Your app’s icon is one of the most important graphics for your app and can make a big difference in attracting more customers.
When developing many apps, you might also want to opt for branding, either for your company, or for a series of related apps. A key element of branding is to determine a design element that you want to use throughout each icon. This element could be a style, an border, or something more specific. This post will walk through examples of how we’ve tackled branding for our apps, including our Trip Boss suite, and briefly discuss the difference an icon can make in sales.
As the “everything else” half of our business, I also do the UX/UI design and graphics. Art has always been my passion, even though I opted for education in engineering and business. I’ve always been interested in logo design—it’s a mix of puzzle (figuring out a clever way to portray a brand) and art. Our own Creative Algorithms logo is actually a zero and a one, combined to make the CA.
My credentials include being the Ad Production Manager for four years on our university newspaper, I’ve sold a few watercolor paintings, and I’ve done all the graphics for our software. Most of my graphic design experience is self-taught, but I’ve had a few structured classes in graphic design and art at the university level. Michigan Tech has a well-known and award-winning watercolor artist, Mary Ann Beckwith, a Professor in its Humanities department, with whom I’ve studied. A guest Associate Professor and photographer, Fern Logan, was also one of my instructors.
Designing an icon is more than just art, it’s also a challenging puzzle. An icon needs to portray the function, the feel, and the quality of your app, all while inviting the shopper to click for more info.
Date Wheel date calculator
Date Wheel was easy—I just used an old-fashioned date finder wheel in our icon, which I had used on past ads and graphics for the app. Our company color brand is blue, so we added the blue contrasting background. I also repeat this wheel inside our app, to further promote the branding. We kept the generically-applied shine from Apple for this app, but I’ve since avoided the shine on subsequent apps, as it can really wash out an icon.
Serving Sizer recipe converter and cookbook/recipe cards
Serving Sizer was more of a quandary, since we wanted to convey the unique idea of resizing a recipe. The app takes ingredients and scales them from one serving size to another. We didn’t want the icon to give the misconception that the app just converts measurements from cups to pints, for example. The final icon is a recipe excerpt from a cookbook, with the serving size and amount crayoned out and replaced with the scaled changes. The color scheme is a red-orange, to match the color commonly found on a measuring cup, and the theme of our app. I wasn’t completely happy with the icon and am working on a new one, but at the time, we wanted to release the app and this is what we had come up with. When we went with the pro version, we used a flipped corner of the page to insert the word “Pro” so we could use the design element of the cookbook, without just stamping “Pro” on top of the icon. The Pro version allows the user to save a complete recipe and convert all at once, rather than the repetitive one ingredient at a time. Why did we choose chili? Chili was the first recipe included in the app, and a common recipe with a short name. More details and images about this design can be found in previous blog posts about the original design process and the release announcement of the Pro version.
After the iPad was announced, we clamored to get our Serving Sizer app in the App Store on day one. We did not have time to redo the icon, so we went with the “Pro” name and icon. I was not satisfied, since our iPad version went a step further, an app to replace your personal box of recipes. The iPad was much more practical for cooking:
I later went back and redesigned the iPad’s icon to look like a recipe box. The recipe box has a realistic wood feel and is presented in the proper perspective (no small task—I did a hand-drawn prototype).
I added a spotlighted black background to highlight the box. Left on the cutting room floor was a marble countertop background because it was too busy and took away from the focus of the box, plus it gave the icon a too cluttered look. After release of the new icon, we saw a noticeable increase in sales. Here’s a look at the difference between the two icons:
Trip Boss travel manager
Trip Boss travel manager was the next app we tackled. We wanted it to convey travel, international, and keep it somewhat generic, since the Trip Boss suite has a varied amount of travel functions. I also wanted the app to be bright, and it required a light source from the top, if we were to do our “own shine”. We used a simple globe to convey international, a simple yet modern, textured suitcase to portray travel, then added depth and lighting, using bold colors to attract the eye.
The larger task with Trip Boss was to create the icon navigation page. Each app in the Trip Boss suite is different, but related to travel. After designing a few of the icons, it became apparent that they required some sort of design element to tie them all together. We considered a few techniques that others have used—a common border, a color scheme, a texture, a style. After brainstorming we hit upon a travel theme—we would use the slightly inset border commonly seen on traffic signs. The border was subtle, yet it did not overpower the icon. We could also style the border slightly different (the Store icon is done in neon), but still keep unity in the icons.
One icon that was very difficult to design was the Trips icon. This icon takes the user to a list of trips, but the trips can be business trips, vacations, domestic, and international. We didn’t want to reuse the main icon, but needed another generic travel icon. After several wastebaskets of wadded paper later, I finally decided on a passport. However, I didn’t want to use the cover, because that would be country centric. A bunch of passports was too busy. The inside of a passport contains stamps—perhaps I could use the stamp design element to convey various travel options? The stamps literally indicate countries where you’ve traveled, but again, these are too busy to put on such a small area. I needed something that would easily be grasped, yet feel like a passport. So I took four main modes of travel: air, car, boat, and train, and created iconic “stamps” of each. I added the typical watermark texture of a page in the passport, including a crease to further convey the idea of inside a passport. The stamps needed to be the focus, and as large as possible, but showing the edge and shape of the passport was also important, so it was still recognizable. I tilted the passport on its side to make it more interesting. I used our company blue background. This icon took the longest time to create, but I was very satisfied with the result.
The most recent icon I’ve worked on is for our journal component to Trip Boss. Each of our icons open a screen that has a background similar to the icon—for example, the budget goes from a piggy bank icon to a background with a piggy bank. For the journal, the page opens to a moleskin-inspired leather bound journal cover, complete with an elastic bookmark and charm—an embossed globe from our main icon. Again, I colored the leather blue, to keep with our company color. The concept for the icon was easy—a smaller version of this page. A trend in icons is to utilize the curved edges of the icon as part of the item, so I used the curves for the corners of the journal, exposing pages on the side to convey a book. Now I needed to add the travel themed border to match the other Trip Boss module icons. However, the white version of this border did not mix well with the journal design. The solution was to emboss a border on the cover. This embossment is just enough to keep with the theme, yet clever enough to not take away from the icon’s main conveyance.
Sometimes you might have two equally good concepts (or do a follow-up redesign). How do you determine which one will garner the most sales? It’s difficult to do a trial and error period, like with pricing, because in order to change your icon you have to release a new binary. One way to do experiment is via an A to B test, using advertisements. This time, however, I’m asking for your feedback and comments.
Need Your Feedback!
I’m considering switching our main icon with the journal icon but thought I’d ask for feedback from the #idevblogaday and Mobile Evolution readers. Again, we need to convey international, travel, yet indicate a wide range of travel tasks, such as tracking expenses, planning itinerary, setting budgets, keeping a journal, converting currencies, and calculating tip/splits, everything Trip Boss can do for the traveler.
Which icon is more generic to cover all the features? Which one is more eye catching? Please tweet your comments and use the hash tag #TripBoss. Thanks!
Are you looking for a designer to do an icon for your app? I’m available to do app icons, screen designs, tool bar icons, misc. graphics, and logos, as well as advertisement designs and newsletters. You can find sample screenshots of my work on our website and in some of the blog posts listed below. Please contact me for a quote.
Related Mobile Evolution posts on the design of our apps and icons:
- Serving Sizer recipe converter–the Visual Design Process
- Trip Boss Evolution – from Palm to iPhone, a behind-the-scenes look at the design process
- Serving Sizer Pro Recipe Converter and Cookbook Now on AppStore
This post shows new screenshots of the redesign of the sliders for picking units.
Each unit graphic (teaspoons, cup, etc.) is custom rendered. - Date Wheel–Not Your Run-of-the-Mill Date Calculator
