Looks matter. And a mobile app is no exception. Say, you want to buy shoes in the store. What will influence your choice? Look, size, color, fashion. The same happens in the App Store. Applications with great description, screenshots, and reviews win. But you need to create an attractive door for your users to open to access all these characteristics, and by door I mean an icon. In this article, we’ll talk about how to create a winning app icon.
Before we start talking about what your app icon should look like, let’s see what Apple thinks about that. Every year they pick out 12 apps for Apple Design Awards. These apps, that they say, “raise the bar in design, technology and innovation.” Here are the lucky winners from 2014:
Can you find anything in common? All the icons here look pretty nice, but are also quite different from one another. Nevertheless, we’ll try to identify some criteria so that you get the idea of what design priorities to consider.
Clarity and simplicity
“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains,” said Steve Jobs.
Simple things always work, no matter what you do. People are afraid of something they don’t understand and, therefore, don’t use such products. An app icon has to visually reflect the main idea and of the app, and at the same time, be clear.
While you should strive for a simple solution, it still doesn’t mean that complex icons always lose. The most important here is an idea that an icon is able to communicate, and whether an object it uses is easily recognisable. If a user can quickly identify what’s in an icon and feel attracted to it, then it has all chances to succeed.
Icons have different sizes on different screens. They are small in notification center on your iOS device, a little bigger on the home screen, and huge in the App Store or Google Play. That’s why it’s sometimes hard to find an image that will look good and comprehensive regardless of the size of an icon.
What’s more, you should also take into account that your app is going to live on the same screen with lots of others, and on a variety of backgrounds as well, so make sure you do a fully-fledged “fitting” test before the launch.
According to Android iconography, it’s necessary to follow the scaling ratio of 2:3:4:6:8 for the primary five densities (medium, high, x-high, xx-high, and xxx-high respectively). Apple also has their own table of icon sizes which you can find here.
An app’s color palette should ideally consist of two main colors, and these two colors should also be represented in an icon. Of course, there are brilliant apps with more abundant palettes, but all colors should work harmoniously with each other.
Other than colors, there is also hue, chroma, value, saturation, tones, tints, and shade effects that influence the way a user perceive colors.
According to Google’s Material design guidelines, for example, color should be unexpected and vibrant. Google suggests that you limit your selection of colors in an app by choosing three hues from the primary palette and one accent color from the secondary palette. Accent colors should be used for action buttons and other components like switches or sliders. But you can find a place for them in your app icon as well.
Color is actually a pretty interesting topic to think of. Here is a great article on Smashing Magazine talking about the meaning of colors. Have you ever wondered why so many apps including Facebook, Skype, Dropbox, Twitter, LinkedIn use a blue color? There are several reasons. Firstly, blue is the most popular color among men and women. Secondly, it represents calmness, responsibility, and peace. Light blues can be refreshing and friendly, dark blues are more strong and reliable. And, finally, startups use blue when they want a user to subconsciously associate their product with the established tech services they know and love.
Bad icons don’t only look bad, they can also be the reason for rejecting your app at the app store. Let’s identify what can make icons look bad:
- Using photos. Illustrations look much better.
- Using a lot of text. It’s better to use a symbol in your logo and nothing more.
- Inaccurate elements. The right combination of colors and simple shapes makes icons look clean.
- Mirror reflections
- Inconsistent shadows
- Skeuomorphism (unless it’s really great)
Even though the craft of picking colors isn’t a rocket science, you still need to have some aesthetic feeling, and also know the latest trends in design.
Read also: Product design in app development
Icon design trends 2015
- Low poly. It’s a technique in 3D graphics which uses a small number of polygons. This design style gives usual things a new look. In 2014, we used low poly for wallpapers and backgrounds mostly. But now it’s becoming the hottest trend in the icon design.
Gradient Mesh & Linear Gradients. Not the freshers in the icon design anymore, gradients are still on top. These tools are amazing for achieving different color variations which represent fluid and soft sides of design.
- Overlapping technique wins users’ love with its charm of simplicity. If you remember, simple is sometimes much better than complex. A single overlap element can make an icon interesting and catchy.
- Negative space brings fresh air in the icon design. This technique was introduced by the US designer George Bokhua and quickly became popular. Using alternative colors in graphic design provides a dual imagery and makes an icon look incredibly interesting.
Bold & Thin line is a really simple and cool technique for the icon design. It makes icons look clean and not overloaded with different needless details. On the other hand, this technique makes it hard for designers to make a recognizable icon.
How much does it cost to design an icon
Now as we learned some lessons about the icon design, it’s about time we talked about design costs. Of course, the price depends on thousands of factors, but we can, at least, identify the main three. They are complexity of the project, size of the project, and a designer’s level. We say project, because designing icons is typically included into the entire app design.
The cost of app design also depends on the agency’s location. While you may hire a designer for $20/hour in India, it’ll be really hard to find the same cost in the USA, for example. In Ukraine, the price for app design may vary from $30/hour to $50 and more, depending on the quality of the design agency.
We’ve calculated that designing an entire app may take from 100 to 400 hours, with 8-10 hours spent on developing a single icon. The total cost of a project, however, includes a prototyping phase as well. It’s a long and thorough process from identifying requirements and building mind maps, to wireframing and creating interactive prototypes complete with gestures, transitions, and animations. In fact, we use eight UX design techniques in our design process.