The Do’s and Don’ts of Iconography in Digital Design
UI Design

The Do’s and Don’ts of Iconography in Digital Design

4 minutes read

Habil Emmanuail Sep 18 2019

The Do’s and Don’ts of Iconography in digital design

The basic purpose of a UI design pattern is to attract visitors to an application so that they are convinced to stay for a while. In other words, an eye-catching and user-friendly design pattern is the real treasure of the product. No amount of good content is of use to a website if the users can not figure out how to navigate through it.

Iconography is one of the main elements of the UI design. Good knowledge of iconography results in the creation of striking designs. It is important to choose and design the icons carefully as they alone can often have the authority to transform the product into something irresistible as well as something completely dull and boring. Keeping in view the importance of iconography for a design, following are some points that one can keep in mind to be able to use the benefits of this subject to the full level:

  1. Understand the target audience:

The most important aspect to consider while developing any kind of project is to identify the audience who would be using it. As icons use symbols, a designer should collect all information about the region in which the project has to be introduced.

There are many reasons why doing this is crucial. Some symbols might have different meanings in different cultures of the world. For example the “thumbs up” symbol is globally used to express likeness yet is considered an offensive sign in the Arabian countries. Moreover, some regional symbols might be alien to people belonging from other regions.

  • Don’t clutter with pointless icons:

The main goal of the icons is to highlight significant messages to the users, but that does not mean that every message has to be conveyed through them.

Even though icons attract the user’s eye to important information, abundance of them could cause confusion among the audience. Thus, it is better to put iconography to use only where it is appropriate and required.

  • The simpler, the better:

Designers often try to make their icons more attractive by adding more precision and details to the design. But what they mostly forget is that once the image is scaled down to a much smaller size, there’s nothing left to be seen of the details rather than a hazy blur.

Thus the icon should instead have minimal details and a clean look, so that the users can easily grasp the design as well as recognize the information it is depicting.

  • Use legible designs

Icons are supposed to be understood easily and as quickly as possible by the users. Hence the symbols and graphics used should be globally interpretable. Don’t opt to create new, unique designs for common functionalities as the users might not catch the exact meaning of them.

For example, while making an icon for messaging, it is better to design a speech bubble, as this convention is used all over the world, and thus clearly delivers the meaning to the users.

  • Stay on the theme

When adding multiple icons to an application, one should always take care of the family that those icons belong too. Choosing icons following different style themes results in an overall tacky look of the interface design.  Whereas matching icons tend to create a consistent and pleasing appearance to the product.

  • Be careful about the placement

One of the main aspects of designing is to observe where the user’s sight falls more often. These are the parts of the screen where significant information is placed. Similarly, icons have a specific place for them too. Often called “home”, this is located mostly in the upper part of the application. For example, navigation icons are placed in the upper left or center and icons showing dropdowns for options are placed on the upper left.

  • Choose formats wisely

The final result of the design is always stored in a file which can be later used or even shared at ease. But it is also essential to regard the format of these files.

The choice can be made depending upon many factors such as the lack of support for large spectrum of colors and more flexible scalability. While many popular formats, like GIF, are not a good option, other formats such as SVG and PNG are considered as an excellent choice.

  • Benefit from existing material

What’s the point of stressing yourself over creating something new completely from the scratch when there are thousands of designs that could be tailored or simply be inspired from?

Using universal icons is always the healthier decision as they are understood globally by almost all the users. One can just customize them according to their application theme, or the targeted user requirements. But keep in mind not to try to mix match different graphics as that would rather end up in the creation of a pictorial mess.

To cut a long story short, iconography can be beneficial to the design if it is appealing to the user. This outcome can be achieved if the icons are simple, clear and schematic, along with being easily recognizable and memorable.

Habil Emmanuail

Habil Emmanuail

Habil is an IBM certified Design Thinking practitioner and a member of the Interaction Design Foundation. He has been working as a UX consultant and User Centered designer across web and mobile applications for almost four years. His area of expertise include UI/UX Design, UX Research, Visual UI Design, Prototyping, Information Architecture, Agile Scrum, Branding as well as HTML/CSS, UX Writing, Research and Analytics and Strategy and Planning.