Every day thousands of people browse AppStore and GooglePlay in search of utilities and entertainment. Behind every search and download is desire — a desire to solve a problem, to fill the need. Products icons play a critical role in the process of search & download — in the world of short attention span and a lot of alternatives, designers need to capture user attention with just a few elements on a square canvas. When they miss the opportunity to create a connection, chances of relationship are lost. As same mobile app icon also play a great role in app growth .
Every product needs a beautiful and memorable sign that attracts attention in the market and stands out on the home screen. Below you can see a few examples created by Fireart Studio.
Clarity is an essential characteristic of a great interface. A pictogram is the first opportunity to communicate and at a glance, product’s purpose. When they are unclear, there’s a high risk of confusion — when people unable to correctly identify what pictogram is supposed to represent it won’t work for them.
- Symbolism is key. People often associate pictograms with specific objects or actions based on previous experience. For example, in the Western world, the symbol of an envelope is commonly used to represent mail — both in digital and in physical spaces. It’s possible to use such associations to create potent visual signifiers for users.
Mail in iOS is a good example -mobile app icon
- Check competitors. If you have hard times finding ideas on how to design mobile application icon, take inspiration from products in your category. Your competitors have probably already found the most obvious way to represent the primary function of a product.
- Deconstruct user’s preferences. When designing any visual elements it’s important to consider what your target audience like or don’t like. If you can conduct user testing, you can ask users directly whether they like or don’t like by showing them different options. Try out several variations of your design to find the one people like the most.
We should design mobile app icon to make it clear in every screen resolution.
- Avoid fancy graphics effects. Don’t include photographic details, 3D perspectives and drop shadows because they are hard to discern at a small screen.
- Don’t use a lot of details. While on larger displays you have enough real estate to show different graphics objects and impressive visual effects, on a small screen (such as mobile screen) such elements can become muddy.
- Avoid using words. There’s no need to include promo words such as “Free” or product’s name — such information will accompany the pictogram in the interface (e.g. in the form of a label or textual description). Use words only when they’re essential or part of a logo.
This icon isn’t legible (Original shot; How it looks on home screen; How it looks in Notification Center)
- Check against a variety of backgrounds. While you can’t predict what wallpaper users will choose for their home screen, you still should check that your design works for edge cases — check your icon against pure black background and utterly white background and colored background (e.g. see how it looks over different photos).
- Test on real devices. What looks good on desktop screen might not be so good on mobile, so testing on a real device is essential.
Memorability is about making something that stands out. If something stands out, it has better chances to be noticed by users.
- Complexity is enemy of memorability. Try removing elements from the image until the concept starts to deteriorate. The more details you add, the less recognizable the object you design will be.
- Test your icon on the screen. You do a quick test to figure out is the image stands out on the screen — just place it in a grid of pictograms, and you’ll see whether or not it stands out.
1Password has good recognisability
Consistency of mobile app icon
Think of your pictogram design as an extension of what your product is all about. It’s possible to create a connection between this small graphics object and entire experience — both logical connection (convey the meaning) and visual relationship (colors, textures, idea)
Tip: One way to ensure consistency is to use a similar design language (for example, to keep the color palette of your interface and icon in line).
Clear, a gesture-based to-do application popular among iPhone users, has a similar color scheme for both pictogram and home screen.
Just like any other part of graphical user interface, pictograms require following platform conventions. Consider iOS Human Interface Guidelines if you want to create a graphical symbol for iOS and Material Design guidelines for Android devices.
Without any doubts, it’s possible to tell a great story in a wonderfully restricted canvas. Take time to design a beautiful and engaging graphics object that perfectly represents your product’s purpose.