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.
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.
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.
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.
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.
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.
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.