7 Handy Tips for Better App Icon Design

Thalion
Thalion
May 7, 2018 · 9 min read
Image for post
Image for post

Everyday users of digital devices interact with dozens of App Icons. In the other hand, some designers tend to treat the craft of icon design as the less important part of the project. Nothing could be more wrong! App Icons are the fundamental element of the solution that helps to design positive User Experience.

This story covers 7 useful tricks that will enhance your App Icon design process and its quality.

Note: I like to keep things clear. This article contains collected tips based on my experience as a designer. What’s more, I am also the creator of APP ICONS — Templates for Sketch. A few of the hints below include references to this design tool, but are relevant if you do not have it.

🤔 But, What exactly are App Icons?

In most cases, App Icons are exported into the raster file formats — usually PNG. Every OS has own specific guidelines, so these icons are also an element of platform branding.

Now, let’s discuss how to apply simple tips that will increase the quality of App Icons.

⛑ Why we should care more about app icons?

These factors lead to the conclusion that these tiny elements are the fundamental and extremely important part of the app when it comes to delivering positive user experience.

7️⃣ How to design better App Icons in 7 steps

😎 1. Make it recognizable

Image for post
Image for post

When you think about the most important factor that may decide about the success of an icon may think that it should be visually attractive, simple and surely match platform-specific guidelines. These are all relevant points, but if your icon will not be recognizable… everything will fail.

Making App Icon recognizable is the most important goal to focus on.

Recognizability is often connected with uniqueness. It is good to make the competitive analysis of the solutions similar to yours. However, a too different icon may lead to the user’s confusion.

Testing recognizability:
When I try to be sure that my design will be recognizable I do a simple test, you can also try to do it:

First, Layout App Icons of the same category apps in the grid (it may be 5x5). Then, Place your icon in this grid somewhere. Next, show your icon to a few people. Next day, show them the grid with icons and ask them to find your icon.

Improving recognizability:

  • Search for the app in the same category. Identify common symbols and colors. Try to design different shapes and use another color palette in your icon. However, be careful — even different symbols should inform users of the purpose or brand of the app.
  • Try to prepare alternative versions of your icon and repeat the test mentioned above (remember to choose different participants every time).
  • Find the balance of the design. A too simple icon will surely look similar to other ones. A too complex icon will be hard to remember.

Recognizability helps to stand-out from the crowd, which is the first step to download or launch our solution. Finally, this factor leads us to memorability which is the next important thing.

💭 2. Create for memorable designs

Image for post
Image for post

App Icons are the doors to your apps. Sometimes, a user to visit them for the first time need some kind of assistance, but in time they should remember where to go and what “doors” open particular solution.

Testing memorability:
To test if my icon is easy to remember, I do a simple test that is quite similar to the one from the previous point. If you would like to do it follow these steps:

Show your icon to a few people. Next day, ask them to describe or to sketch mentioned design.

Improving memorability:

  • Look at your icon. Is it recognizable? If the previous point is fulfilled then we can be more sure about icon memorability
  • Use the commonly known shapes, overcomplicated abstracts may ruin the ability of users to remember your icon

Memorable designs are hard to achieve. However, when we speak of App Icons it is one of the most important things to achieve.

👌 3. Craft Simple App Icons

Image for post
Image for post

Simplicity seems to be buzzword nowadays. However, if you have in mind previous point you must know that the right balance of complexity may have the significant impact on your app success.

Testing simplicity
I have always repeated that good symbol should be as simple as the even 5-year-old child could draw it in a couple of seconds.

If you have kids show them your design. When they become familiar with it hide the icon and ask them to draw the symbol. If they have remembered all elements it is a good sign. If you do not have kids, you can as other people to do it, but give them only 30 seconds for sketching.

Improving simplicity

  • Look at your design, is there something you can remove from the icon without losing its recognizability?

True simplicity may lead your design to great aesthetic values. However, you have to remember — simple does not mean primitive.

🔬 4. App Icon has to look good in multiple sizes

Image for post
Image for post

We work mostly in vector design tools. However, App Icon assets for multiple platforms are still raster graphics formats. Well, designed App Icons are the set of assets that look good in every required size.

Testing multiple sizes
To test if your design looks good, forget for a while about full-size artboard. It is perfect if your App Icon Template support preview of the icon in multiple sizes (note: every Sketch Template in App Icons contains all required previews).

Take a look at various instances of App Icon in your App Icon Template file. If you can use Sketch Mirror or upload the set of icons in various sizes into the device you design for it would be even better.

Improving appearance in multiple sizes

  • Apply the rules of simplicity in your App Design
  • Sometimes it is good to detach the Symbol of original Icon and to work on some details directly in the smaller instance of the asset.
  • Always preview App Icon in various sizes

🎨 5. Design to match the style of an app and brand

Image for post
Image for post

The App Icons purpose is to visually communicate with users. It should communicate the values of the solution. This is why the consistency of the design with app’s UI design and the company’s brand guide should be maintained.

Thanks to this your solution is building coherent experience. If you will try to be too original you may confuse users.

Testing consistency:
Like in the other test we need to ask some friends to help us:

Show your icon to a few people, then show them the app design (or website design). Show 2 or 3 more solutions (icons and apps). Ask match the icons with the solutions.

Improving consistency

  • Check if your icon uses the same color palette as the app and brand
  • Validate if the symbols of the icon and the app are visually similar

Consistency is a key to user comfort. In the end, it makes icon easier to recognize and remember.

📱 6. Make it platform-specific

Image for post
Image for post

Every OS has its own principles. Following them while creating App Icons gives a sense of assets better quality. People quickly recognize things that do not match the environment, these elements make them feel uncomfortable. This is why it is important to follow guidelines if you would like to build good user experience.

Testing guidelines compliance:
It is hard to remember all of the points from every platform guidelines. This is why I have created a checklist of every element I should follow when I design an icon.

Use the checklist attached to every App Icon — Template for Sketch, or visit every needed website with platform-specific guidelines and follow every point.

Improving platform guidelines compliance

  • Use the checklist every time you design an icon
  • Add the guidelines websites to the favorite ones in your browser

Following platform guidelines may be tricky when it comes the recognizability or uniqueness of the icon. However, the best design shows us that it can be achieved.

⚛️ 7. Test App Icon with Various Backgrounds

Image for post
Image for post

When you design User Interface an app you have full control over the screen or canvas of the device. App Icon designers craft is hard because they have no such control. The icon will be displayed on multiple background wallpapers.

You should prepare your design to be displayed in the changeable environment.

Testing Icon with Multiple Backgrounds
To perform the test do following things:

Gather multiple backgrounds and prepare the file where the App Icon will be displayed on them to validate its appearance.
You can also use App Icon Validator file for Sketch (which is the part of bundle in every
App Icon Template for Sketch I made). It contains background color schemes from most popular OS Wallpapers, so you can be more sure about your asset.

Improving appearance on multiple backgrounds

  • There is no simple method — perform tests until you will be satisfied with results.
  • Avoid transparency
  • If the platform does not require particular shape of an icon, you can try to apply subtle shadow to build the better visual hierarchy.

To conclude

I hope this article will help you to create better App Icons!
If you liked the story, do not forget to 👏 👏 👏.

By the way…

To make it easier there is a gift 🎁 Use MEDIUM10 offer code to get 10% Off.

Image for post
Image for post

You can also Create User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch the sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.

Thanks for reading!

If you would like to read more stories like this feel free to follow me on one of more social media platforms:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Design + Sketch

The best collection of articles, tips, tutorials, and…

Thalion

Written by

Thalion

👋 UXMISFIT.COM | Przemysław Baraniak, UX/UI Designer | primedesignsystem.com 🧰 uxmisfit.tools 🚀

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Thalion

Written by

Thalion

👋 UXMISFIT.COM | Przemysław Baraniak, UX/UI Designer | primedesignsystem.com 🧰 uxmisfit.tools 🚀

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store