Creating an Effective Icon for Your App | Guest post by Nadav Rikover
We have been approached with questions regarding the importance of the app icon by quite a few brands that we have been working with on creating instruction apps and decided to reach out to our trusted UX specialist Nadav Ricover, asking him to share his DOs and DONTs on creating app icons.
We are happy to share this guest blog post with our readers and hope you find these guidelines helpful.
“The icons on [the desktop] are visible concrete embodiments of the corresponding physical objects.” [1975] This quote by the American computer scientist Dr David Canfield Smith, the person who’s best known for inventing computer user interface icons, references the need for the visual entities known as “Icons”. However, days have gone by, the personal computers arrived into our lives (Dr Canfield Smith was also one of the principal designers of the first PC – the Xerox Star) and humanity needed a way to access software as part of larger operating systems. This software didn’t necessarily resemble the physical object, but rather represented the entire software or application.
An “Application icon” (Apple) or “Launcher icon” (Google) is basically a representation of a specific application, often using the company’s trademark. The idea behind the app icon is to “use as a memorable visual that attracts attention in the App Store and stands out on the Home screen”, according to Apple.
There are 3 main goals for the app’s icon:
1. Promote the brand and tell the story of the app – this is an excellent opportunity to showcase your brand and hint at the story of what your app is about.
2. Help users discover the app on Google Play (or App Store) – with over millions of suggested apps, your potential customers have only a few moments to be drawn in. The app icon is the first impact and opportunity for a brand to approach customers in the App Store or Google Play and enhance the brand presence, however, keep in mind that your competition doesn’t end there – it’s still ongoing, on the users’ personal device.
3. Be clearly visible – the mobile device’s home screen or launcher is the main interaction point between your users and your product, therefore it’s very important that the icon will look great in all situations.
Getting started
Use these guidelines (that summarize Google and Apple’s approaches) when initiating the designing process for your new app or launcher icon.
1. Make sure things are easily understandable
Simplicity is the key – embrace it. Don’t use sophisticated shapes or images. There’s no need to use too many colors either. Find a single visual element from your brand language and make it tell your brand story. Don’t use words – the app’s name will appear just below the icon, so no need to repeat that. Use the icon to capture the essence of the product or brand. Test your icons to figure out if the message is clear or not – try to describe the essence of the app in one sentence, make a few quick sketches that represent this essence and ask different people (or potential users) to describe it. Did they understand? Does their description align with yours? Your users won’t analyze your icon in order to understand it, it needs to be self-explanatory and communicate the purpose of the app quickly.
2. Create a memorable presence
App Store and Google Play are great platforms for promoting your brand, an icon that is both unique and memorable will contribute to your brand’s presence. Keep the consistency by using a color scheme that represents your brand. Don’t use photos. Photographs tend to have too many details, which will make them hard to remember. Avoid misleading and confusing your potential users with an unclear message. When people are in a discovery state of mind, they’re scanning the category or search list, therefore complex figures will be hard for them to memorize.
A simple icon will contribute to its memorability across your potential users. Make your mark!
Using trends as a reference is good, but do not duplicate! Observe your competitors, keep the icon with similar visual boundaries, but also differentiate your icon so it’ll stand out from the competitors on the applications list.
3. Engage your users
Keep your icon unique and attractive. The idea is to drive users to find out more about your app. A high quality icon can encourage people to take action and increase their curiosity, urging them to learn more about your app as it represents a high quality product.
4. Keep accessibility in mind
Test your icon on different wallpapers. Your icon will be placed in the main screen of your users’ device, make sure that it’s well optimized for both light and dark backgrounds. See how it looks on top of photos. Use dedicated generators to keep color and contrast compatibility for color-blind users. Try to avoid decorations and high-detailed icons. Make the icon as single focus point as possible.
5. Retain functionality
Your icon will be placed on multiple screens as part of the operation system, make sure that it’ll function well in all forms. The icons should be clear and recognizable at all sizes, small and big, so the shapes which you’re using shouldn’t be too thin as it will not stand out well. Design a different icon for Android and iOS, make sure you’re aligned with both platforms’ technical guidance and that the icon is scalable for all sizes and formats! For Android, choose the use of an alpha channel (transparency) wisely. In iOS, you should avoid transparency – make sure your icon is opaque.
This post was written by Nadav Rikover, UX specialist & product design consultant.
Nadav is the Co-Founder, UX & Design Consultant of Makeree, the owner of Rikover Interactive and with over 15 years of experience in various creative fields.