4 Tips to design an App Icon that Doesn't Suck

4 Tips to Design an App Icon That Doesn’t Suck

At Appifier, we’ve helped clients build over 12,000 apps to date, without writing a single line of code. Despite the fact that we make building apps so easy and fun, we’ve found that many of our users start sweating when they realize that they need to design a tiny square image that perfectly captures the essence of their mobile app.

After all, apps and other digital content are so rich and complex, how can a designer simply boil them down and communicate a concept in a tiny square image?

These four tips will help you design a great app icon that stands out on touch devices and app stores, no matter what the platform.

1. Stick to Simplicity

Great Icons are inherently simple, since they’re a visual representation of a word, object or concept that conveys a clear message about your app and brand.  This visual representation needs to communicate its concept in the blink of an eye as a user quickly flicks through screen after screen of apps.

Simple icons keep type and intricacy to a bare minimum. That means avoiding whole words and “wide-angle” imagery. One way to do this is to focus on a key letter in your app’s name. This approach has been taken by many of the app store’s most popular apps.

single letter icons

Simple and Effective Single Letter Icons

2. Use your Uniqueness

Simple icons don’t always have to be based on a letter. In fact, many apps are based on a website or brand that provides a great deal of visual cues that users have become accustomed to.

Let’s take a look at Fiori, a typical WordPress-powered blog, to understand how to do this. When we wrote this blog post, the site’s logo incorporated a floral motif and bright butterflies flew around the header image.

Fiori Web Page with Graphic Elements Highlighted

Unique Elements of Brand

By combining these two graphic elements, we can design an icon that reflects the uniqueness of the app while retaining the simplicity that makes for a great icon. Notice how we didn’t need to re-illustrate the flowers or the butterflies, anyone can make this happen with some basic Photoshop skills.

Designing an app icon from a website

Combining elements into a unique app icon

Uniqueness doesn’t only have to be about graphic elements, it can also be reflected in mascots, characters and spokespeople that help tell an app’s story. Some popular apps have designed icons centered around these characters with great results.

Character Icons

Great icons based on recognizable characters in clear, dynamic poses

However, it’s really easy to fall into a design trap when building an icon around a mascot or character. Realtors are often guilty of this. If the character is not a central part of your brand, or if you don’t have great, interesting photography. Don’t do it.

Bad realtor icons

Boring photography and crowded design make these icons totally ineffective

3. Make it work in Monochrome

Many professional designers learned early on that a good design usually works in both monochrome and colour. When a design doesn’t work without colour, there’s usually something fundamentally wrong with how it’s communicating a concept.

Popular Monocrhome Icons

Most of the best-designed app icons look great in monocrhome. It’s no accident.

Try designing your icon by drawing it in black and white first, and then adding colour in a second step. When doing this, you should even try inverting the blacks and whites in your design and seeing how they work. This will give you a good sense about how your design will look on a dark or light background.

4. Test with Tools

Adobe templates to kick off your icon design. They help you render icons at various resolutions and get a sense of rounded corners, glossiness and other factors. Check them out for:

Find inspiration for your icon using the Noun Project. This clean site lets you search for any noun and shows you simple pictorial representations of the concept. It’s a great starting point for finding an visual way to communicate your concept that you can build off of.

One of our favourite web tools is Testico. This tool allows you to upload an icon and see it overlaid on a variety of iOS devices and background. It’s great for getting a quick look at all the different ways your icon will be displayed once it makes it to the app store and user’s devices.

Another great tool is Icon Strike. This unique, free tool from Flinto allows you to upload an icon and instantly preview what it will look like on YOUR iOS device. Simply upload your icon, send the link to your device through e-mail or SMS, and you’ll get a sample app icon on your home screen.

That’s all there is to it! If you liked this post and want to build your own apps, then check out Appifier. With Appifier, you can get started building mobile and iPad apps in under a minute, without writing a single line of code. The results look great and the team here is happy to help you turn your project into a success. Get started building your own app with Appifier today.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s