5 Tips to Making Your App Icon Stand Out
Are you about to design your first ever app icon? Have you designed a few already, but need some inspirational reboost? Or maybe you are a founder of a mobile startup, who wants to give a brief to your front-end developer? Congrats, you have all reached an article that will give you the greatest insights in this field.
To put it straight, here is the list of 5 core app icon design aspects that make all the difference:
- Scalability;
- Recognizability;
- Consistency;
- Uniqueness;
- No words used.
We will discuss each aspect in depth while also providing some examples, but first, let us introduce our hero, who actually came up with this list.
When we decided to write this piece on app icon design we instantly knew who our guy is. Michael Flarup is an icon himself, known for his outstanding ability to be in several projects at the same time. He runs one-man design studio Pixelresort and has co-founded the Danish award winning development studio Robocat. Furthermore, he works on many side-projects, makes games and runs epic kickstarter campaigns with his team. And last, but not least, he LOVES making app icons. Sometimes even just for fun, like, for example, the one you see below. We bet Darth Vader would approve it.
One of Michael’s leisure time creations
As Michael says, he has been a huge nerd since he was little. Everything related to computers was interesting to him: he used to play games on his Amiga, then progressed to building his own games and computers and working for IT support. Michael had also been very active in web forums and soon after started making visual signatures for other community members. That was his first serious encounter with Photoshop and one can say that was the point where all his love for graphic design started. At that time, Michael was about 14, but this passion has continued until the present and blossomed into Michael’s current projects. With such an outstanding experience in graphic design and hundreds of app icons delivered for clients, we knew Michael was the right person to guide us through the best practices in this field.
Michael Flarup, a hero in app icon design
Over his years of practice, Michael has come up with the list of 5 core aspects that are essential to creating a really good app icon. These aspects form a great guideline for an app icon designer, though at the same time they should not be regarded as rules written in stone, since in some cases exceptions can prove to be the way to go, too. The aspects that we will further discuss may also overlap sometimes, but it is worthwhile to assess each of them one-by-one. We will do this in the following paragraphs and will also share some of Michael’s examples of icons that rock a certain individual aspect. These icons may not be the best of the best when assessed by each 5 criteria points, but they will help us to better highlight the importance of perfection in the certain criteria that it is discussed along with.
1.Scalability
Scalability is definitely one of the most important aspects of a good app icon design. It is all about how well the icon scales to look at its best when used in different platforms and in different sizes (e.g. on the App store, on the device, in the settings panel, in the notifications panel etc.). Thus, overcomplicated icons often fall into the trap of bad scalability. To improve this aspect, Michael advises to focus on one single object, make sure the icon works well on variety of different backgrounds and also just try the design out on the device.
Below are some of Michael’s examples of app icons that scale really well.
INSTAPAPER
Michael likes the Instapaper app icon for two reasons: First, it is very simple, and second, it has a really cool background texture of a newspaper, which you barely notice, when it is small. That is one way to get a little bit of definition in there, while also not overdoing it. The texture in this case is just an addition and it does not look muddy when scaled down, because of the high contrast, while the black ‘I’ scales really well.
OVERCAST
Usually you would not think that this app icon is scalable, because of the stokes it has in it. Generally, when you have high contrasting lines and you try to scale them down, they quickly appear muddy. In this case it works great, because of the high contrast that is used here.
Another great point of the Overcast icon is that it closely follows the iOS grid — you can almost see the grid when you look at the icon. Following the grid is not a rule of thumb, but Michael says it is a great example of an excellent craftsmanship. Even the diagonal lines, the cross sections of it fit together.
2. Recognizability
Explaining recognizability and how it differs from the other aspects can be a hard task. To put it simply, recognizability is like seeing the face of a friend in a crowd of unfamiliar faces. Its design has to resonate with the user and create a sense of memory and connection on both functional and emotional levels to be able to stand out among numbers of other icons in the store.
While scalability is a big part of recognizability, so is novelty, thus the challenge is to find a perfect balance between these two aspects. To improve recognizability, Michael suggests to avoid bland or over-complicated icons, try out several variations of your design and also learn from your favorite icons by deconstructing them. Here are some of the examples, Michael believes are highly recognizable.
1PASSWORD
The 1Password icon is an outstanding icon in many ways, but the reason Michael chooses it to represent the recognizability aspect is that blue ring, which is very recognizable thanks to its cartoony characteristic emphasized by highlights and shadows. Another unique element of this icon is the keyhole, which easily explains what the app actually does; keeping your passwords secure.
Michael also emphasizes that the 1Password icon achieves recognizability both on physical and metaphorical levels. When you put a password it seems that you physically open up the app and it feels very tangible in that sense. Metaphorically, it is all about passwords and about that one key for all of your things, which is perfectly portrayed by the use of a keyhole.
SPARK
Even though a shape of a plane itself is super iconic, it manages to look badass here. Michael really likes the symmetry and triangular shapes used, as well as the fact that this icon contains some definition, which creates a sense of depth. He says he is not a massive fan of one color glyphs or one color backgrounds, as it feels that one can always do a little more to make it more enticing. In terms of recognizability, Spark kind of takes advantage of the ordinary mail app, by using very similar colors to get easily noticed.
3. Consistency
Recognizability is probably the most difficult aspect to work on or improve, consistency, on the other hand, is super easy. This aspect denotes that there is a sense of cohesion between the app icon and the app interface. As Michael puts it, a good app icon is an extension of the app’s user interface, thus making sure that the two support each other leads to a more memorable encounter. Consistency can be improved by simply using a similar design language for both the interface and the icon, keeping colors in line and having harmonious symbolism across these two elements. These two following app icon examples are in great consistency with the app interface.
FANTASTICAL 2
This icon is cool, because it has a touch of magic and is not just all flat. It is also very close to what the interface looks like. When you open it up, you can see the same kind of colors and, even though the page does not really curl up like the icon indicates, you can still feel a strong sense of continuity between icon and interface. You know what is going to happen, because clicking it takes you to the interface that looks almost exactly like the icon.
WEATHER LINE
Once again, the icon perfectly reflects the way the interface looks. Michael says it is a great win when you can bring forward parts of the interface and it actually works well as an icon.
4. Uniqueness
Michael admits that uniqueness is his favorite app icon design aspect. It is a hard aspect to improve, though, since it relies on both what you and what EVERYONE ELSE is doing. Therefore, it is essential to do your initial research and come up with some clever metaphors for your design. Color may also work as a differentiating factor. In general, many things that we create nowadays are thought of by many other people and sometimes we are just improving on the execution part. Therefore, standing out can be a good argument for your design. See it for yourself in these examples.
SNAPCHAT
No matter what emotions people have about it, Snapchat icon is Michael’s favorite in terms of uniqueness. People remember this icon so well that if you ask a group of folks to name one bright yellow app icon, many of them would instantly think of Snapchat. And that is a pretty powerful thing, right?
DELIVERIES
With only a few components, there is no doubt that this icon portrays a package. Michael points out some tactility and some drop shadow applied here. He also loves that there is a conflict between the roundings of the icon and the shape inside. Moreover, there are some textures in the background to actually make it seem like cardboard. This is a unique choice, since most of the designers these days tend to remove the texture and lighting. Applying it in the right way helps Deliveries stand out from the crowd.
5. No words
All these examples support one more good app icon design practice — avoiding the use of words. Pictures and words are separate representational tools and mixing them in what is supposed to be a graphical representation creates a confusing experience. Michael adds that whenever he sees an icon containing words, he feels that the designer behind it missed an opportunity to more clearly convey his message.
At the end of the day, talent comes from practice. So keep on sketching, remember these tips and have fun creating kick-ass app icons.
You can also watch this awesome video where Michael himself explains each single criteria with corresponding examples.
Also, check out Michael’s App Icon Template, which can make your life much easier. And if you want to see some his own work, here are his Behance and Youtube profiles.
