🎉 Try Slides With Friends — Zoom Trivia, Live Polls, Icebreakers & more! Check it out →
5 Indispensable Tips to Design More Effective Icons

5 Indispensable Tips to Design More Effective Icons

Is there such a thing as the perfect icon?

Icons are one of the most overlooked elements of user interface design. There is often a lot of history behind each icon that you see in your favourite apps and on the web. As a designer, it is your responsibility to attempt to create the 'perfect' icon for a given purpose. Here are 5 top tips to help you design better icons.

Consider Where The Icon Will Be Used

This one may seem obvious, but the environment that your icon will be used in is very important. It is worth regularly testing your icons at the size that they will be displayed. If you are designing an iPhone app icon the required resolution may be 1024 x 1024 pixels, but the icon will primarily be displayed at the equivalent of 120 x 120 pixels (on a small handheld device). The background is also an important factor to consider, some icons look much better on light or dark backgrounds. If you know that the icon will be used is a specific way, this can be used to your advantage. A quick tip is to screenshot where the icon will be used and actually design the icon on top of the screenshot.

Understand The Purpose Of The Icon

Some icons are purely functional tools within an interface, whereas some others are designed for more aesthetic reasons. There is also quite a bit of crossover between these two purposes. Most icons fall somewhere on the spectrum between being being functional and looking nice. It is a good idea to understand what is most important for your icon. App icons for example are usually very pretty, however their main purpose is to help the user find an app quickly, and give some indication of what the app does. Therefor I would place more importance on making the icon instantly recognisable by using a simple unique shape, and a minimal colour palette as some of these popular apps do: ios app icons

Minimize Complexity

An icon should always strive to be a simple as possible, regardless of whether it is functional or aesthetic. How simple an icon should be is relative to its purpose. For example if I was to design a functional icon for the action 'delete document' I would first and foremost want to make it absolutely clear what the icon does when it is clicked. ios app icons In the example above, icon A is easy to understand but is also clearly overkill in terms of detail. Icon B is more subtle but it loses some of its meaning and could easily be misunderstood as 'bad file' or 'file not found'. Icon C is minimal and if used in proper context it should be clear what the icon means. Icon D is possibly too minimal as the X could imply danger/warning. An icon designed for aesthetic purposes also needs maintain some balance between the message it is portraying and the amount of detail being used. If it doesn't maintain this balance, and is simply striving to be as realistic as possible, or adding in superfluous elements then I think you may want to ask the question "is this actually an icon or is it an illustration?". ios app icons

Utilize Design Limitations

Design limitations can work in your favour when it comes to icon design, sometimes you will have design limitations predefined for you, such as an existing colour scheme that you need to use, or the required size of the icons. But you can take things one step further and create your own design limitations. Some design limitations that I strongly recommend are consistent corner radiuses, specific stroke widths for outlined icons, global light source for reflections/shadows.

Keep Icons Consistent

Icons used together, that have nothing in common, usually look messy and unprofessional. Doing so will create the impression that you have not given the user experience much thought. For example the icons used below have very little in common and look confusing: ios app icons If icons are overly similar to each other they may be difficult to tell apart. However an appropriate amount of consistency can actually help users recognise icons quicker, as they become familiar with the design patterns used. As you can see in the example below, these icons are more consistent and much easier to understand: ios app icons

Conclusion

In order to make better icons, you first need to understand the purpose of the icon and attempt to find the 'perfect' solution based on where the icon will be used and the design limitations in place. Try to avoid unnecessary complexity as much as possible. Do you have any tips for designing better icons?

Comments

X

You've successfully logged in!