Getting the most from your app icon design

Cecily Kellogg

We’ve all heard the phrase, “It’s the little things that count.” When designing an exciting new app, of course you want to focus on the big things, like functionality and uniqueness. But what about icon design? Seems obvious enough, yet it’s a facet of app design that’s all too often given scant attention in the rush to get to market. But with 70,000 apps available to iPhone users alone, the difference between success and failure might just hinge on an eye-catching icon. Here we’ll provide a few tips on getting the most from your app icon design.

Avoid the squint factor

2014-06-16_1535

Design by Beboale

Scale is everything. App icons on mobile devices range from 94×94 pixels to 120×120 pixels. So as a general rule, avoid words in your design. An icon with typographic elements might look good on a laptop, but on the small screen of a smart phone it loses its impact in a hurry. And when scanning a crowded field for an eye-grabbing icon, mobile users don’t want to read, let alone squint to understand what they’re seeing. So think about the visual elements and nix the verbiage.

Keep it simple

30608622~ffdc0a3f8d9a3c4b3c378ab66fc7ae27fb33b459-original

Design by MegaMagiFX

When designing for the small screen of a smart phone, you want an app icon that’s bold and simple enough to grab user attention while still remaining easily identifiable. That means simple colors and bold, easily recognized and reproduced shapes. If your app helps users find local eateries, for example, some element of the design should communicate “food.” Remember that your viewer is scanning from a crowded field, so you’ll need to connect with him or her in seconds.

Don’t be dull

2014-06-16_1542

Design by Pixto

Simple doesn’t mean bland. A burst of detail is good, so long as it doesn’t result in clutter. Be judicious. A simple element such as a crown, an eye, a spoon, a wheel or a stylized facial silhouette can be an asset so long as it’s unambiguous. Glints, gradients, highlights and reflections can be your best friends. Using bold colors or interesting color combinations can also help your app stand out in the crowd. Be aware of other icons, especially those of your direct competitors. You’ll want to capitalize on their weaknesses and emphasize your strengths.

Be consistent with your brand

2014-06-16_1546

Design by Joekirei

When it comes to icon design, the same cardinal rule applies as in any branding effort: be consistent. That means using tones and elements that conform to your larger brand logo and identity. Any viewer anywhere on any screen should be able to see your colorscape and start thinking about your brand. You may also want to see how your app icon looks against some commonly used wallpapers to ensure it won’t be drowned out by background colors.

A few final tips…

Take a look at the icons already available on app stores. Knowing the field will help avoid duplication and wasted effort. Also, beware the ”gloss.” Apple offers a gloss format for app icons that many designers feel dulls and flattens the design. If you want the boldness of your design to stand out, opt out of the Apple gloss.

Hopefully, by taking a little time and minding a few simple guidelines, your app icon will be a shining success!

The author

Cecily Kellogg
Cecily Kellogg

Cecily Kellogg became an accidental designer when she worked at a short-handed non-profit and although she now prefers designing with words, the lessons she learned from doing graphic design make her work in content development more well-rounded. She writes about the intersection of family, technology, and social media for Babble Tech and runs her own web content business. She is also known for her raw tone and humor on various social media platforms including her own blog, Uppercase Woman. Cecily lives in the Philadelphia area, is happily married, is mom to a fierce and amazing daughter, and has occasionally been called a bad ass.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

30 beautiful mobile apps for design enthusiasts

30 beautiful mobile apps for design enthusiasts

With an ever-growing supply of mobile apps, it takes a lot to stand out from the crowd—both in functionality and design. With that in mind, we sloshed through app stores to handpick 30 beautiful mobile apps that designers and design enthusiasts will love. We’ve organized this article into seven sections, so you can easily find the mobile app that fits…

The design apps you need to know about

The design apps you need to know about

The number of design apps out there is simply staggering. Think of any handy tool—calendars, sketch programs, color palette generators, font references—and you’ll find a dozen apps for it, each with slightly different functionality. What is more, almost all of them are well designed (they are made for a demanding market, after all). So how do…

Current Design Contests

Designers, check out these contests so you can start building your career.