Fundamentals of iconography in user interface design (UI) | by Leonardo Moreno | Dec, 2023

[ad_1]

Iconography refers to the use of symbols to communicate specific ideas, whether simple or complex concepts. Icons are in many ways, writing on images. When used correctly, they could add functionality to our designs, speeding up user interactions by being immediately recognizable, as the human brain processes icons 60,000 times faster than text.

Because the users read less and less and the regular permanence of a website is only a few seconds, it is a usability point to capture attention as soon as possible, facilitating calls to action or any feedback from the system in a fast way. But, good icons could also add personality and joy to the interface.

From left to right: outline, filled, and two-tone style icons.

To create a successful icon set, we need a grid. Grids are essential tools in iconography. It’s a systematic arrangement of lines that helps structure the design elements within a defined space. In iconography, grids are used to provide consistency, alignment, scalability, and balance among the visual elements of the icons.

Grid maintains a sense of order, making it easier for users to recognize patterns and associations among related icons. For designers it provides a structured starting point, reducing the effort required to create icons. This is important because the grid acts as a guide, helping us to focus on the details and ensuring overall coherence.

Having established this, six principles must be taken into account to create a correct iconography:

Clarity

Keeping icons simple and clear will make them more recognizable. Cluttered or overly complex details can be confusing and uncomfortable to look at. It is necessary to design the most direct and synthesized representation of the concept that the icon represents.

HBO Max manages to effectively synthesize the options of its bottom navigation without losing recognition of the concepts. Basically built with squares, lines, and circles.

[ad_2]

Source link

2023. All Rights Reserved.