How to Design Better App Icons in 6 Steps

 

What is an ‘App Icon’?

The first belongings you got to understand when beginning to make your icon is what exactly an app icon is and what job it's to perform. An app icon may be a visual anchor for your product.

You can consider it as a small piece of branding that not only must look attractive and stand out, but ideally also communicate the core essence of your application.

Icons are most often raster-based outputs customized to look good within a square canvas, at specific sizes and in specific contexts. The approach, the tools, the work and thus the standards for fulfillment are different.

What exactly are App Icons?

App Icons are the visual representations of the apps. Usually displayed on the home screens or App Store.

They are not logos (and shouldn't be treated as just subsequent place to feature the logo), but they build the primary impression and initial user experience of the solution — they are its primary branding element.

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

Why we should care more about app icons?

As I discussed, within the beginning, people see many of icons on the screen of their devices like desktops, phones, watches or maybe cars. What’s more App Icon is usually the primary thing user sees before they plan to download the actual solution.

In the end, it is the App Icon that reminds the user of the existence of the application (it may be noticed on the home screen or near the notification).

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.

How to design better App Icons in 6 steps:

There are many things to remember when it comes to the App Icon design. Crafting the high-quality asset may be a really challenging process. Let’s take a look how we may begin making them better.

1. Make it recognizable

Making App Icon recognizable is that the most vital goal to specialize in.

Recognizability is often connected with uniqueness. It is good to form the competitive analysis of the solutions almost like yours. However, a too different icon may cause 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 equivalent category apps within the grid (it could also 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 seek out 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, take care — even different symbols should inform users of the aim 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 almost like other ones. A too complex icon is going to be hard to recollect.

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

2. Create for memorable designs

App Icons are the doors to your apps. Sometimes, a user to visit them for the first time needs 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 explain or to sketch mentioned design.

Improving memorability:

• Look at your icon. Is it recognizable? If the previous point is fulfilled then we can be surer about icon memorability.

• Use the commonly known shapes; over complicated abstracts may ruin the ability of users to remember your icon

Memorable designs are hard to achieve. However, once we speak of App Icons it's one among the foremost important things to realize.

3. Craft Simple App Icons

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 conversant in 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've got to recollect — simple doesn't mean primitive.

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

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 art board. It is perfect if your App Icon Template support preview of the icon in multiple sizes.

Take a glance 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 principles of simplicity in your App Design.

• Sometimes it's good to detach the Symbol of original Icon and to figure on some details directly within the smaller instance of the asset.

• Always preview App Icon in various sizes

5. Design to match the design of an app and brand

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 planning with app’s UI design and therefore 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 within the other test we'd like to ask some friends to assist us:

Show your icon to a few people, and 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 an equivalent color palette because the app and brand.

• Validate if the symbols of the icon and therefore the app are visually similar

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

6. Test App Icon with Various Backgrounds

When you design interface an app you've got full control over the screen or canvas of the device. App Icon designers craft is tough because they need no such control. The icon is going to be displayed on multiple background wallpapers.

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

Testing Icon with Multiple Backgrounds:

To perform the test does following things:

Gather multiple backgrounds and prepare the file where the App Icon is going to be displayed on them to validate its appearance.

You can also use App Icon Validator file for Sketch (which is that the part of bundle in every App Icon Template for Sketch I made). It contains background color schemes from hottest OS Wallpapers, so you'll be surer about your asset.

Improving appearance on multiple backgrounds:

• There’s no simple method — perform tests until you'll be satisfied with results.

• Avoid transparency

• If the platform doesn't require particular shape of an icon, you'll attempt to apply subtle shadow to create the higher visual hierarchy.

Conclusion

We have shared the basics of the way to create premium quality icons. These fundamentals are technical skills; anyone can learn and master them with practice. Remember that to make better icons, start from the overall (form) and work toward the precise (recognizability).

And keep your icons internally consistent, also as consistent across the set, by taking note of the shared elements (the aesthetic unity) of the icon or set.

Once you have mastered the technical fundamentals, you can focus your energy on what makes an icon truly stand out: your unique creative vision.

Written by - Umme Amara Shaikh