Appszoom for Developers

How To Design An Excellent App Store Icon

Posted by on 09/01/2015

appicons

Considering there are more than half a million apps on both the iTunes and Google Play store, you’ve got barely a fraction of a second to secure a potential user’s eyeballs.

The first thing they’ll see before downloading your amazing app will be your app store icon. Don’t turn them away at the door by designing one that’s uninspiring, ugly, or confusing.

Your icon is the visual representation of your app. If it’s is poorly designed, users will likely think your app is, as well.

Beyond impressing your user, it’s important to note that your icon will be used in a lot of places, from your app’s website to its press release. It may be tiny in size, but it looms large. In some cases, it may serve as the foundation by which your app is judged.

Let’s take a closer look at the fundamentals of good app icon design.

Ditch the Words

If you remember one thing about your icon, remember this: It’s a visual representation of your app in a nutshell. It’s not a word or a concept, it is an aesthetic symbol of your product.

If you have to stuff words into a tiny box just to get people to understand what your app does, something is wrong. A well-designed icon is the silver bullet in your pictorial arsenal. Leave the words for the app description.

Take a look at this example:

Bad icon design.png

Unless you’ve got some sort of superpower, chances are you have no idea what this app is about.

Not only does a rainbow border surrounding a guy sitting in a chair tell you nothing, but the icon is packed with words and letters of various sizes. Even in its larger form, you can barely read it. In the smaller thumbnail format, it’s virtually impossible to make out.

If you are committed to using letters, how about just one? In many cases, a distinguishable letter can elevate the brand and imprint itself onto your user’s subconscious.

Incorporate a design element into your letter and make it recognizable to millions.

Pinterest icon.pngVine icon.png

If you own a smartphone, chances are you know exactly what apps these two icons represent. A letter was incorporated into a clever design and then overlaid onto a soft background. It’s clear and descriptive, without needing to be verbose.

The Design is in the Details

If there is one main theme throughout this whole piece, it’s to keep your app icon detailed without being obvious or lazy.

You’ve only got a finite number of pixels to work with. App icon design boils down to clearly expressing the intent of your app in a tiny visual space.

At the same time, you can’t overlook small details. Remember, in some cases your icon will be blown up to 1024×1024.

Don’t be afraid to pay attention to small details. Use a variety of gradients, highlights and reflections to accentuate how totally cool your app is.

detail icon.png

In the above example you’ve got missile trails, detailed explosion effects, and dynamic background lighting. This is a great example of icon detail done well.

Like Icon, Like App

Consistency is one of the most important considerations. After all, don’t you want your icon to express something about your app?

If experiencing your icon and app aren’t too dissimilar an experience, your users will trust your judgement. You’ve worked hard to create anticipation, so reinforce it by making sure both expressions of your creative talent match up.

Consider the icon an introduction to your app’s experience.

app representations.png

Both of these icons provide themselves as a visual representation of what the user can expect. Designing your app icon to match your app’s user interface is key.

Design With Iconography in Mind

If you want your app store icon to have some real punch, you need to ask yourself if you’ve put basic principles of iconography first.

Iconography.png

Do you not consider your app a work of art? Let your app store icon be an interpretation of that work of art. Imagine it as the appetizer to your app’s main course.

Don’t leave the tireless fruits of your design labor twisting in the wind just because your app store icon provides more confusion than clarity. Use the space wisely and design with iconography in mind.

Topics: Uncategorized