Iconography and the benefit of using icons

Umesh Vainingal

Brand communication plays an important role for any application to connect with its end users. These applications use visual designs to convey their brand message. One of the best strategies to convey brand personality is through icons. Iconography uses color and style to communicate on a graphical user interface.
Icons use small abstract shapes that represent an idea. In UI design, icons make an interface easier to read. An icon is something that a user can interact with. An instinctive visual that is understood across cultures and languages.

As a visual designer, we need to create icons which are not only simple and eye catchy but also create icons whose meaning is easily recognized by users.

Benefits of using an icon in a GUI:

  • You can communicate more words in a lesser space by using icons.
  • Icons easily fit a finger operated user interface and also work well with a mouse cursor.
  • It is easier to create a brand recall if you have a distinct icon.
  • You break language barriers by using icons. You do not need to worry about the need to translate your icons for international users. However, keep in mind the cultural differences while creating an icon to avoid any confusion or miscommunication.
  • Icons enhance your design and are appealing to the eyes.

Tips to improve iconography

The basic rule while creating an icon is that icons must communicate meaning; with users not spending time to analyze what the icon stands for. The icon you create is the first chance that you will get to convey your app’s message.

Before you start working on creating an icon, do your homework. You should be aware of the icons that are used commonly on your target platforms. You should also keep in mind the icons that your competitors use as this will help you a lot in not repeating the mistakes that they did.
Based on my experience, below are some tips which will improve your iconography.

  1. 1. Consistency:
    Use consistency while creating icon sets for your app. Maintain the same thickness of strokes, shapes, curves, color combinations. Use a proper grid system to get consistent measurements. This gives a premium feeling in your interface which signals your user that you know what you are doing.
    Example:

    consistency

  2. 2. Convey a distinct message:
    An icon should be able to convey what it stands for within a second, that should be legible and it can have the brand essence. A good icon should be able to remember and connect with the brand.

    distinct image

  3. 3. Keep it Simple. Giving too much detail will confuse the user:
    We all know a picture represents a thousand words. So keep your icons very simple. Minimalism is a global trend nowadays, and such simplicity of forms and use of sharp edges emphasize neat and visually appealing design. Simple forms are more comprehensible and easy to perceive. They really make a design piece look minimalistic and clean, avoiding a busy and cluttered look.

    simple

    The icon in the image 2 is more than enough to communicate with the user that ‘Mail Received’. Giving too much detail on an icon becomes an illustration.

  4. 4. Stick to limitations:
    You need to consider Design limitations before you design your icon. Many times you should ask yourself whether it convey the relevant meaning or, convey the right message to the user. Try to use universal icons wherever need like Search, add, hamburger and home. Avoid assuming things.
    For example:

    limitations

    By seeing the above image the user doesn’t feel any difference. We can say that either the icon is for a laptop or a desktop.

  5. 5. Create interesting, yet metaphor for the icon:
    We create icons to represent any action or idea in the form of a graphical symbol. Therefore metaphors play a crucial role in translating that action or idea instantly to the user.
    Few example:
    We can use smilies with a different expression on various occasion.
    Laughing icon for positive action, sad icon for failed/negative action etc.
    Using umbrella icon to represents insurance, protection etc.
    Pin icon represents mail attachment.

    metaphor

Conclusion
Do your research and take your time to design beautiful and engaging icons for your application. Hope these tips will help you in improving your iconography.

 

free ebook

about the author

Umesh Vainingal