Get Fingers Tapping in Google Play and the iTunes App Store with an App Icon that POPS!

app store design

We use them everyday: weather, fitness tracking, mailing, browsing, messaging, photo editing, productivity, lifestyle, matchmaking apps are part of our routine and it’s quite hard to imagine life without (at least some of) them. In March 2017 there were 2.8 million apps in Google Play and over 2.2 million apps in Apple’s App Store and the numbers are set to grow steadily.

That makes the app world a crowded and highly competitive market, where differentiation is essential. And before any introduction is actually made before the app and its future user, it’s down to the visual identity, more specifically the app icon, to grab attention.

Although it’s easy to make the confusion, an icon is not the same with a logo. While the logo is a more flexible brand representation, usually in the form of a vectorial, resizable design, the icon must speak clearly for 1 product (the app) and do so in the most “uncomfortable” placements, through square-canvas PNG files.

So how do you design an app icon to attract new users through as little as 16 x 16 pixels? By taking into account a few fundamental tips.

Mobile devices sizes illustration set

Keep it simple enough to scale

An app icon must be easy to distinguish as both a menu item (think of the Settings menu on a phone) and as an icon on large, full Retina-display. That means its elements, lines and colors must be clean, clear and strong enough to pop-out in at least 6 different sizes, ranging from 16 x 16 pixels up to 1024 x 1024 pixels.

The icon must also play out well on various backgrounds, so it should be tested against multiple colors and patterns.

Rainbow shirts on line

Make color psychology your ally

It’s as relevant as ever to use color perceptions to your advantage. Is the app security-related? You might want to refer to blue and red as main flavors. Is it a productivity app? Consider green and orange in the mix. Is it helping users with their mindfulness? Perhaps purple is the color of the haze. It is a photo-editing app? Then maybe you can use the whole rainbow.

It’s also worth all your while to research other apps in the same category, to get inspired and also avoid unwanted similarities. And this leads us to the next tip..

Anxious woman looking at smart phone app icons flying away from screen

Aim for uniqueness

This may sound a bit discouraging, given the millions of apps in existence, but it’s still a pursuit you should follow.

Perhaps it’s not always possible to reinvent the wheel, but you can always make a classic your own by improvising with shades of color, altering lines, rearranging compositions, switching between design trends (ex. material design vs flat design), etc. Ultimately, your app icon must be easy to understand (based on associations made by users with other products from the same category), display its own personality (hence the hunt for uniqueness) and be easily recognizable.

Man using mobile phone against application icons on black background

Prepare to be recognized

If app icons could talk or sing, they would tell users their name, location and purpose. Since they can’t, however, it’s up to the design to make that connection with users browsing Google Play or the App Store. The icon design should communicate on functional (“I’m great at keeping your reminders”) and emotional (“I’m also really fun!”) levels. And, once installed, it should also make the user remember exactly which button to push to have a better day.

Strip your design piece by piece until the concept is no longer understandable, then go back one step at a time and see where you can get rid of extra details and still tell the story of your app. The purpose is to avoid complications as much as possible, while still doing justice by your app.

You can also try to deconstruct some of your favorite app icons, to identify which element in their design makes you tick and how you could integrate it in your own design.

Flat Ui Infographics Vector Kit. Mobile Data Visualization Pack.

Create a consistent experience

Getting your creative juices flowing can sometimes take you just a little bit too far away from the actual app. Always remember what the purpose of the app is and always establish a clear visual link between the app’s interface and the design of its icon. The icon is a promise to the user and its promise should be well kept throughout the actual app experience. Sometimes it’s possible to adjust the app UI to reflect the icon, sometimes your design begins well after the app is finalized and the design must be built around it. In both cases, consistency is essential.

------------

It may be the case that icon design is sometimes underestimated, in terms of importance and effort, but it would clearly be a serious tactical mistake. An app icon is, after all, the gateway for millions of app users around the world.

Photo credits: Darakchi, Grafner, Gstudioimagen, Kiosea39, Mpfphotography, Wavebreakmedia Ltd.

Your article must be written in English

Publish
January 25, 2018

Egomezta

Interesting, thanks for sharing.

Related image searches
UI related image searches