Users interact with apps every single day. They install an app or a program and glance at its icon multiple times a day. For some designers, an icon is just an afterthought, something created in one afternoon when in actuality, it’s a crucial part of the app design that contributes to the positive user experience (UX) and likeability of the app.
What Is An App Icon?
Let’s first go ahead and define an icon. App Icons are how apps are visually represented in the digital space, meaning app stores or home screens. Yet, an icon is not a logo, though it’s understandable how you’d think that, seeing how they’re similar.
Icons serve to create a great first impression and help out with branding. It is highly advised that every designer know the basic foundations of app icon design. Additionally, they should also constantly look for artistic inspiration from the apps that people tend to like.
App icons are most often created in a PNG file format, meaning raster files. There are specific guidelines for every OS, and this too contributes to making a platform more recognizable. Due to the consistency in design, you can easily tell if an app is made for iOS just by looking at it.
Having said that, here are some easy tips on how you can create memorable and useful app icons.
Why Icon Designs Matter
People glance at icons all the time – on watches, phones, desktops and even in a car. In fact, the first thing a user sees before deciding whether or not to download an app is its icon.
At the end of the day, the icon is what users notice when flipping through their smartphone screens. People like an app icon that simply communicates the app’s purpose. It helps with the increase in app downloads, and despite it being tiny, an icon can be immensely powerful.
App icon designs are all about visual information. No matter what, people adore information especially when presented in a compact and visually appealing way. Therefore, if you can make an app icon that aligns with your logo design, you are well on your way to become a master in design.
Designing App Icon Tips
Here’s a simple checklist of things to do when creating an app icon.
1) Make simple icons
This principle applies to everything we do but when it comes to app icon design, there is a limit in terms of the amount of space there is to work with. Try to avoid complex shapes and deeply layered icon designs where the eye can’t easily distinguish what’s in front and what’s in the back. Make your app icon in such a way that a toddler could draw it out in 5 seconds from memory.
Use clean shapes, make a stark contrast between the foreground and background, and constantly whittle it down. Afterall, you want your icon to be recognizable when users are seeing it with peripheral vision.
2) Make your design memorable
The icon doesn’t have to be literally connected to what it does to be memorable. For example, the ‘Settings’ app uses an image of a cog despite no smartphone actually using cogs. The ‘Save’ function icon, on the other hand, is an image of a floppy disk, while the ‘Call’ function uses the image of a phone receiver that hails back to landline phones.
You’ll probably need a touch of inspiration to achieve memorability but with much effort and constant iteration, it can definitely be done.
3) Match the app to the brand
Branding is a separate branch of design that has to do with making your app icon work in tandem with your logo and the overall look of your product. The trick is to think big and pick a clearly defined set of colors that can be applied anywhere across your brand.
When it comes to creating an app design that people will actually like, you would have already done half of the work through branding. Your goal is to create a consistent experience for your users, so do your best to make sure that this is achieved.
4) Follow OS-specific guidelines
Each OS will have a different set of app design guidelines. These will help immensely, because they represent knowledge on what works and what doesn’t for both users and designers. Follow these guidelines and it’ll make it much easier to have your app approved on the App Store.
For example, iOS the app icon design guidelines recommend avoiding words, screenshots or interface elements. Another iOS requirement is to avoid transparent icons because users with unusual wallpapers might not even be able to see them. Make a checklist with these guidelines and keep narrowing down your design until only the most beautiful one remains.
Google has a set of standards for app icons as well, and you can actually refer to the Google Play Store to check which designers did well in complying to them. The standards change over time, yet not all designers keep up with them. This can lead to brand new apps having icons that feel outdated.
5) Get inspiration from others
Copying is a big no-no but there’s no shame in getting inspiration from those who have done it better. If you’re feeling stuck with ideas, go to the App Store and search for any app.
Sort by the number of downloads and examine the icon design of the most downloaded apps. In most cases, people will decide whether or not to download the app based off its icon. Hence, for these apps to be so popular, this means that people must have liked the visuals of these apps’ icons. If you can figure out why, that will be your secret to designing a great app icon.
Another point that is related to this tip is to use existing conventions whenever possible. Do not try to reinvent the wheel, especially if you’re designing for a foreign market.
For example, an owl in the West represents wisdom, but in Asia it’s a hallmark of dim-witted people. Something similar applies to the ‘Like’ icon or anything with a thumbs up; it’s essentially an obscene gesture in the Middle East, Greece and Australia.
6) Iterate your design
You won’t get your design right the first time around and that’s no problem. You should plan ahead for quick iteration, meaning that you want to make and test as many app icon designs as fast as possible. How you do that is up to you but keep in mind that the best app icon designs are deceptively simple. In most cases, it can take a couple of variations until the very best one is chosen.
There isn’t a shortcut to becoming a great designer – you have to polish your skills by constantly learning and experimenting, creating as many designs as you can. There are many ways in which you can do this. Perhaps you can ask a friend, a colleague or a family member for help in testing or providing inspiration. Every successful entrepreneur began by pleading with family members to help them out and succeeded when they did.
7) Learn about colors
Colors are a crucial part of a successful app icon design. You can make almost any color combination work if you know how they contrast with one another.
Again, look to the real world for examples of colors that match well together. For example, many movie posters use a combination of teal and orange to draw attention. Instead of shadows, use strong lines between the areas with different colors.
To test out your app icon design, make a monochrome version of it and see if it works without color. If it does, then that’s pretty good. You may start to add color to see how it can look even better.
You can even start out with a monochrome design until you land at a successful icon, which is a great tip for your iterative design process. When in doubt, look for inspiration from real-life examples such as paintings, movies and visual novels.
8) Use the Golden Ratio
Artists like Leonardo da Vinci and Salvador Dali have used the Golden Ratio to great effect, creating the memorable works many of us admire until this day. The secret to their success might just be the Golden Ratio, a rule that states two parts in a 1:1.618 ratio provide the most visually appealing effect.
The Golden Ratio can be used in circles, rectangles or any asymmetric shape. In fact, the Twitter birdie icon uses the Golden Ratio in abundance, with each feather on the wing and the bird’s body being a part of a circle that follows the Golden Ratio.
It must have taken thousands of variations until the designers landed on that one design, and now it’s become one of the best known icons across the world. Similarly, the Apple logo also follows the Golden Ratio, as does iCloud app icon. It’s simple, clean and visually appealing.
9) Make a scalable design
If you want to annoy an engineer, simply ask, “Does it scale?” For them, it’s an impossible question to answer but for an app icon designer, the answer should always be, “Yes!” If you’ve made a poor icon design, it’s most likely going to fall apart as you scale it up or down.
From a practical standpoint, your app icon will be shown anywhere from 29×29 pixels all the way up to 1024×1024. Since you can’t exactly tell which resolution or device your users will see your app icon on, try testing your design on as many different mediums as you can. The very best design will have the same look and feel to it across all devices and settings.
For example, if you used a spiral shape within your icon, scaling it down will make it look like a dot which will completely change its look. Avoid putting too many elements in your app icon and keep it straightforward. A good designer usually goes with such design elements that can easily handle being magnified and shrunk while still remaining recognizable. Often times, they are the symmetrical ones.
10) Experiment with optical design
When you do scale your app icon design, keep in mind that it has to be graphically accurate and consistent. However, you should always leave some room for extra tweaking in the future.
Even Google has been found to have altered its logo (a big letter G) and experts have found out that it wasn’t actually a pixel-perfect circle. The response Google designers gave was that the logo followed an optical rather than a metrical design. There’s an entire blog post by Google designers on how they arrived at the final logo titled “Evolving the Google Identity”, and it’s a fascinating read.
First, they defined the company’s design principles: clean and simple on a white background. This was enough for the early 2000s but as user needs are now changing, the company must grow and adapt to it. Understandably, this is what led to the changes in their logo.
Google designers arrived at four main design goals:
- Scalable logo that works well in constrained spaces
- Intelligent, dynamic motion
- Systematic branding approach to provide a consistent experience
- Refinement of the existing logo
These four goals showcase exactly what we’ve been talking about in this article: scaling, quirkiness, branding and iterative process. Google designers then disassembled their logo into its separate components and proceeded to iterate on each until they were pleased. In the end, they just combined all the elements to make the perfect logo.
The idea behind optical design is that human eyes are weird and can sometimes see things differently than what they actually are. Examples of this would be optical illusions and how they can “trick” the eye into seeing something that isn’t there.
By all means, take the best from both approaches – start out with a metric design and tweak it until it looks good.
11) Listen to users’ feedback
The internet is full of critical people, some of which will even use your app. Just because they provide you with negative feedback on your app or app icon doesn’t mean you should take it personally; it’s likely that they’re just having a bad day. However, you should carefully listen to and appreciate all kinds of user feedback, whether good or bad.
While one or a dozen users don’t have to be right, if you happen to get consistent design feedback that keeps circling back to the same themes, you should probably take them into consideration.
Remember what we said about iterative design – you need as many users testing your design before you reach a useful app icon design. In the meantime, keep your head up and look out for useful app icon design tricks.
Conclusion
In short, when designing app icons, you should keep them simple, experiment a bit, use established guidelines, listen to user feedback and iterate a lot. Following these guidelines will allow you to create one of the best app icons users have seen.
However, if you are in need of assistance, the DesignBro team are happy to help. We have a team of design experts who are experienced with app icon design. Hence, we can provide you with high-quality and professional design service you are looking for.
Contact us to find out how you can get started.
Besides having grown up in the design Industry, Christiaan has advised some of the world’s largest companies on their branding & packaging designs. Has been the resident judge for design awards, and has spoken at numerous global design & marketing events. Christiaan founded the London office of the award-winning Cartils agency, and has founded the DesignBro.com platform.
