How To Design App Icons

Creating one, singular piece of graphic design that users interact with first whenever you see your product can be a daunting task. A beautiful, distinctive and memorable app icon can have a huge impact on the popularity and success of an application.

But, how exactly does one make a "good" application icon? What does that even mean? Fear not, I've put together some tips and advice to help answer these questions, and guide you on your way to great design application icon.

What is an icon of the application?

The first things you need to understand when to go out and create its icon is exactly what an application icon is and what job you have to perform. An application icon is a visual anchor for your product. You can think of it as a small part of the brand not only has to look attractive and stand out, but ideally also communicate the essence of the basis for its application.

The 'logo' word carelessly throws around these days. Application icons are no logos. While certainly they share qualities-branding as are under a lot of different restrictions. It is an important distinction for the designer to do: Logos are scalable vector branding pieces designed for letterhead and billboards.

Icons are often raster-based outputs customized to look good on a square canvas, in specific sizes and in specific contexts. The approach, tools, work and hence the success criteria are different.

From a practical point of view, which is when you're creating an application icon is a set of PNG files in various sizes - ranging from 29 x 29px all the way up to 1024 x 1024px - that must be included with your application . This set of carefully crafted designs will be used in many settings of the operating system where users meet their application - including the App Store or Google Play, panel, search results and your home screen.

Application icons can be made in essentially any application capable of producing raster files, but stock options are Photoshop, Illustrator and Sketch. Appicontemplate.com offer free tools such as PSD intelligent templates that can help you get off the ground quickly.

Now let's look at some best practices for application design icon.



01. Scalability

One of the most important aspects of an icon is scalability. Because the icon to be displayed at various locations along the platform, and in various sizes, it is important that its creation remains readability and uniqueness. It has to look good in the App Store on Retina devices and even in the configuration panel.

Overcomplicated icons trying to cram too much on the canvas are often victims of ill scalability. A very large part of the conceptual stages of application design icon should be devoted to consider whether any given design scales gracefully.

•     Working on a 1024 x 1024px canvas can be misleading - make sure you test your design on the device and in multiple contexts and sizes.
•     Embrace the simplicity and focus on a single object, preferably a form or an element that retains its unique contours and qualities when scaled.
•     Make sure the application icon looks good against a variety of backgrounds.

02. Recognizable

An application icon is like a song, and being able to easily identify among all the noise from the store or your home screen is a key component in the grand design icon. Like the verse of a song must resonate with the listener, so do the shapes, colors and ideas of an application icon. The design has to develop a sense of memory and connection both functional and an emotional level.

Its icon attention among thousands of other icons, all of which have the same 1024px fabric to make your impact and provide a connection with the viewer dispute. While scalability is a huge part of recognizable, so it's new. The search for a balance between these qualities is the crux of the discipline.

•     Bland icons, overcomplicated are recognizable enemy. Try not to include details on its icon to the concept starts to deteriorate. Does this enhance recognizable?
•     Try several variations in design. Align in a grid and try to view them, see what aspects of the designs draw attention.
•     Try to deconstruct their favorite applications icons and find out what you like and what methods used to highlight.

03. Consistency

There's something to be said for creating coherence between the experience of interacting with your application icon and interaction with the application represented. I feel like a good icon design is an extension of what the application is about. Ensure that the two are mutually supportive create a more memorable encounter.

Shaping an elegant and unified image of its application in the minds of users increases product satisfaction, retention and virality. In short: make sure your icon works harmoniously with the essence, functionality and design of the application is a great victory.

    One way to ensure consistency between the application and the icon is to keep the color palette interface and icon in the row, and using a language similar and consistent design - a green reinforced by an application interface icon green.

    While not always possible, a way to tighten the connection between your application and its icon is the symbolism of the icon to relate directly to the functionality of the application

04. Singularity

This almost goes without saying, but try to do something unique. Imitating a style or trend is perfectly fine, but that is your own. Your application icon is in constant competition with other icons to the attention of users, and standing out can be a perfectly valid argument for design. Singularity is a difficult part of the design, as it not only depends on your skills, but also on the decisions of others who are trying to cope with a similar task.

•     Consider what others are doing in their space, then try a different direction. Always do your research - the world does not need another check mark icon.
•     A single glyph on a background of a single color can be a difficult route down, if you want to stay single. Play around with different colors and compositions, and challenge yourself to find new and ingenious metaphors.
•     The color is a way to reposition a great concept and often overlooked

05. Do not use words

This is one of my all-time top hobbies. Only in the rarest of cases it is OK to use the words in the application icons. If you have to retire to another tool of abstraction - the written word - I would say that is not using the full force of his pictorial arsenal.

Words and images are separated representation tools, and mixing them in what is supposed to be a graphical representation often leads to a messy and unfocused experience, which is more difficult to decipher. Is there really no better way to display the application with dry words? Every time I see the words on the application icons, I feel like the designer missed the opportunity to express their intentions more clearly.

•     No need to include the name of the application icon - most often the interface icon is accompanied. Instead, spend time coming up with a fresh pictorial concept.
•     "But this is the 'f' in its application icon", I hear you say. If you're using a single letter and feel like it is a good (and only) in the form, then the letter loses its "neat" qualities and becomes an icon for itself. However, this is more often the exception than the rule.
•     The company logo and name in a place is never a good solution. Do you have a brand or a glyph that works well within the limitations? If not, you're probably better off coming up with something new. Remember, icons and logos are not the same, and should not be forced into the same context.