Designing the perfect app icon, a tiny square that means a whole lot

A customer shows off the new Apple iPhone 6 and 6 Plus at a store in Tokyo in September.
AP
A customer shows off the new Apple iPhone 6 and 6 Plus at a store in Tokyo in September.

Once again, I found myself swiping left and then swiping right, searching on my phone for an app I knew I’d installed only a few weeks prior. But it was lost amid more familiar logos: The bright pink and orange DD that enables me to buy donuts and coffee with my phone, the box of popcorn that informs me of movie showtimes, the speedy-looking Z on wheels that lets me reserve a Zipcar.

A dozen years ago, before the advent of smartphones and “app stores” where the programs are available to download, businesses relied on signs, jingles, and memorable phone numbers to let customers know they existed and remind them to keep coming back.

Today, one of the main tools is the under-appreciated app icon, a half-inch by half-inch square of screen real estate. The icon has several jobs: Persuading you to download an app in the first place, reminding you what the app does, and helping you find it among dozens of others you may have on your phone.

Designing a memorable app icon is “more competitive than ever,” says Drew Condon, experience design director at RunKeeper, a Boston startup that makes a workout-tracking app. “You’re taking your brand and the experience your app delivers and pushing it all into this tiny little square.”

And in the app stores run by Google and Apple, Condon adds, you’re lined up on the screen with all of your competitors, vying for attention. “You have to sell yourself and tell your story in milliseconds.” RunKeeper is planning to unveil a refreshed app — and icon — this month.

In the same way that designers have always toiled over logos and package designs that might help a product stand out on a crowded shelf, today’s app designers try various techniques to distinguish themselves: bright colors, faces with big eyes, stripped-down silhouettes. But the typical Walmart store (without grocery items) displays about 120,000 products on its shelves. Compare that to the roughly three million apps available in Google and Apple’s online stores.

“Understanding that you are in a cluttered space, and that everybody is shouting, is crucial,” says Geoff Donegan, creative director at Tank Design, a design agency in Cambridge.

But the desire to be bold and stand out can backfire, says Jason Jacobs, CEO and founder of RunKeeper. “You want to have a unique brand, but in the app stores, people think of these apps as utilities,” he says.

19KirsnerWeb2

Visitors to the app stores may scan the description and read a review or two — but the app’s icon needs to convey meaning. “People are more apt to download an app when it is obvious what it is,” Jacobs says. “If they want a flashlight app, it should have a flashlight on it.”

RunKeeper’s app, launched in 2008 at the same time as Apple’s iTunes Store, currently features a white silhouette of a runner against a blue background. But other fitness apps have copied that look. Jacobs and his designers have lately been debating how abstract an icon can be, and still communicate what the app does. Under consideration: a cursive capital letter R that is formed by a shoelace.

The question, Jacobs says, “is do we go with a visual identity that is really unique, and that we can own? Or make it really obvious that we’re a running app?” When we spoke on Tuesday, his gut was telling him that the icon needed to do both jobs.

19KirsnerWeb3

Another challenge unique to app design is that you may have chosen a family portrait, vacation snapshot, or a picture of your boat for your home screen. There’s no way for designers to know what kind of background their apps are floating above. “Apps with lots of black just disappear when they’re on top of a lot of different backgrounds,” says Jim Forrest, director of design at Intrepid Pursuits, a mobile app development firm in Cambridge. One solution is to use white around the edges of an icon — or rely on bright colors that aren’t often found in photos.

Companies may develop and consider dozens of versions of an app icon. At Driftt, a Cambridge startup, design lead Algert Sula says that he came up with more than 20 concepts for an icon that would represent the company’s first app. Those concepts were winnowed to three, which were shared with fellow employees, family, and friends for feedback.

Dan Katcher, CEO of the Boston mobile development firm Rocket Farm, says he sometimes turns to sites like LogoTournament or 99designs. Those sites allow businesses to set a prize amount — typically between $300 and $700 — that they will award to the designer whose icon they select. They then receive dozens or hundreds of icons submitted in the hope of winning the prize. Katcher says that some clients pick a handful of favorites and post them to a Facebook page, to get feedback from friends and prospective users of the app.

Yofred Moik, a designer who works at Blade, a tech incubator in Boston, says that he will sometimes show icons and prototype versions of apps to “random people on Boston Common, step them through how it works, and ask questions.” But one problem with that tactic: “Strangers can sometimes be too polite,” he says.

19KirsnerWeb4

Unlike a logo designed in the pre-smartphone world and printed on millions of envelopes or product packages, app icons exist purely in the digital realm, so they can evolve and be “freshened” with each successive release of an app. A new feature that Google rolled out in May even allows companies to run experiments within the Google Play app store, testing whether a different app icon will result in more downloads.

The goal, designers say, is an icon that says a bit about what the app does and a bit about the company’s brand image. But it should also help forge a connection in your brain between that tiny patch of pixels and what the app does for you — whether it’s using Instagram to capture a fleeting moment or Airbnb to book a vacation rental.

“The icon is an extremely important component in forming a new habit,” says Petr Kaplunovich, a product designer at Blade.

On Kaplunovich’s wrist was the next frontier of icon design, an Apple Watch. On the faces of smart watches, the icons are no longer the size of a key on your laptop’s keyboard. Now, they are the size of a Sudafed pill.

Design, jokes Forrest at Intrepid Pursuits, is starting to feel a little bit like molecular biology.

Scott Kirsner can be reached at kirsner@pobox.com. Follow him on Twitter @ScottKirsner and on betaboston.com.