Posts

The Blueprint to Designing Your App Icon

As the visual anchor for your app, you need to nail the icon design at the beginning. In this post, we discuss the best practices to creating a memorable and unique icon that entices app store browsers to download your app.

Uber may only be 6 years old, but that didn’t stop the $85 billion company from recently rolling out a redesign for its entire brand. In doing so, Uber completely changed its highly recognisable monochrome U-shaped icon into something that looks like:

a) A backwards ‘C’

b) An evil Pac-Man

c) It’s forever updating

d) All of the above

So what was Uber’s rationale for the new icon design?

The square is meant to represent the bit — a nod to Uber’s technology. The colours and patterns being introduced to the branding represent the atom — the people and things that Uber transports and the places where it operates.” 

Travis Kalanik, CEO of Uber

That sounds kind of cool and interesting, but Uber’s previous icon had imprinted itself in the minds of budget-conscious travellers everywhere. So why would the transport unicorn completely drop its familiar ‘U’ for a non-distinct shape?

Armin Vit opines for Brand New: “Let’s assume that it’s a matter of being used to poking an app icon for the last six years and that we just need to get used to poking at this new one. Even then, it seems like this is an icon for something else altogether.”

Uber App Icon

Uber’s new icon eating it’s way through the transportation industry.

An app icon is the one, singular piece of graphic design that users will interact with first each time they see your product. A great app icon becomes synonymous with what the app enables users to do and how it makes them feel.

So you’ve validated your app concept and now need to design an identifiable and unique app icon. But what exactly makes a great app icon?

We’ve put together an essential guide to designing an app icon that screams ‘Install ME!’… Without the unnecessary redesign 6 years later.

Scalability – Big or Small, the Icon Needs to Look Good

Your icon is going to be shown on a variety of screens, and in a variety of sizes, so it’s important your creation maintains legibility. It needs to look good on the App Store, on Retina devices and even as a favicon for the app’s promotional website.

One Minute Closer App Icon

An app icon needs to work at multiple resolutions retaining the legibility of the concept across the range of sizes. Source: One Minute Closer

When designing your app icon, consider the following scaling tips from App Icon Template:

  • Design and test the icon in multiple contexts and sizes.
  • Think simple and focus on a single shape or element.
  • Your icon should retain its recognisability when scaled.

As for software applications that let you design with this scalability, we recommend the use of Adobe Photoshop. If this is your first attempt at creating an icon, working with a free Photoshop template from AppIconTemplate.com is probably the best approach.

Simplicity – Clearly Convey What Your App Does

You have a confined 57×57 pixel space for your app icon. This is the first thing that browsers see when searching on the Apple App Store and Google Play. Do these potential users a favour by having your icon clearly convey what your app does.

You can’t always rely on users tapping your app to view it’s optimised screenshots on the preview page. Your icon should stand on it’s own.

App Analytics company App Annie provide the following rules of thumb to keeping your icon simple:

  • The most effective icons have a simple design and clear message.
  • Make sure the icon represents the core brand values of your app. This could be the app’s primary function, such as Gmail’s use of a letter or a gaming app using the main character.
  • The colours used in the icon should pop while still reflecting the in-app colour scheme.

Applying these rules of thumb will greatly assist in highlighting your app’s unique selling point.

Uniqueness – Stand Out in the Crowd

Let’s consider a user who downloads your app, closes their iPhone and then opens their menu screen later on. On a smartphone that’s already filled with apps, what is it about yours that is going to grab the user’s attention and stand out from the crowd? It’s an app icon that’s instantly recognisable and unique.

App Store Productivity Apps

It seems that uniqueness doesn’t enter the design process for Productivity apps. Source: idApostle

When attempting to create a unique icon, focus on a shape or object that stands out. Consider Snapchat’s ghost. The icon both sticks out and highlights the app’s unique selling point of ‘poof-it’s gone’ snaps.

Also consider choosing colours that contrast and pop, as this is often an overlooked way of positioning an app. Spotify does this well by pairing green with a starkly contrasting black. When a user browses the App Store for a music streaming service, these colour choices are what help Spotify stand out from competing apps.

Avoid Text – The App’s Name Often Accompanies the Icon

Words and images are separate representational tools. Combining them in what is supposed to be a visual representation often leads to a cluttered and unfocused experience that is difficult to decode. As such, you should avoid using copy or text in your app icon.

‘But this blog started with a Kanye-like rant about how Uber’s rebranding from a ‘U’ text icon to an unrecognisable shape was a mistake’, I hear you say.

Well first of all, I think we can all agree that this blog’s introduction made more sense than any rambling tweet from Kanye West.

Secondly, if you’re using a singe letter and validate it as a suitable fit, then the letter avoids being ‘wordy’ and becomes iconic by itself. However, this is more often the exception than the rule.

Your app’s name will be written next to the icon on the app stores and smartphone menu screens. Therefore, using text – especially if it’s your app’s name – is redundant.

Before designing your app icon…

An app’s icon is highly influential for standing out on the app store and engaging potential users with your product. Make sure that it’s scalable, simple, unique and visually conveys the app’s core value.

Along with the product strategy you plan to implement, nailing the icon design will put you on the right path towards a successful launch into the market.

Do you have any tools and tips for designing an app icon? We’d love to hear about them.