We see icons every day and everywhere, but maybe we have paid less attention to their role. Imagine your laptop screen without icons; In addition to the visual beauty that icons have given to the world of technology and communication, the speed of analyzing icons in the brain is much higher than text, so a part of the growth of technologies should be owed to icons and iconography. From the past to the present, iconography has played a colorful role in conveying information, and the interpretation of the icons of the ancients has provided us with a large part of the history of nations.
Table of Contents
What is an icon?
Icons are small images that have a special meaning, such as a folder icon or a shopping cart icon. Icons play a vital role in any type of design system and product experience, and it can be said that they are the smallest part of a design.
Icons are different from signs. Signs like traffic signs require learning, but icons are the graphic form of a real concept; Like the pen icon.
What is iconography?
Iconography is the visual language and science of designing icons that express features, functions and concepts. Icons have been created to convey a concept in a fraction of a second and simply, for this reason, they have a great impact on the productivity of UI design.
What is the purpose of icongraphy?
There are many reasons for a designer to use icons, and we will mention the most important reasons below.
1. Reducing the duration of learning
Some icons are considered international due to their high usage and most people are familiar with them, so they are quickly recognized and used by new users.
2. Save page space
It is clear that icons can be used instead of words, and in addition to the convenience and speed they have in conveying content, they prevent page clutter. For example, imagine Photoshop’s home page without icons; So we should be very grateful for the existence of icons. Of course, one should be cautious in using them excessively on a page because it greatly reduces the efficiency and beauty.
3. Increasing visual beauty
As we have already mentioned, icons make your pages more beautiful and efficient, and by moving them on the page, you can recognize their appropriate place for the user.
4. Ease of use
Icons can be designed in different sizes and locations and for different systems. For example, icons can be embedded in places that are more convenient for mobile phone users.
5. Having an advantage over the text
Icons do not need translation and localization and are the same for all users in all parts of the world, so they can be used easily and use fewer words and phrases.
The importance of iconography in UI design
UI design is created to create a better connection between users and the website, and icons play an important role in creating a friendly and easy connection. With the help of icons, you can explain the steps step by step and easily in the form of a small image, especially when it is difficult to convey a concept and many words are needed to explain. Images and icons attract more attention than text and are important in this sense.
Importance of Product Design in User Interface
The main elements of iconography
These elements form the basis of design, including iconography.
1. Line
The primary element of any design is lines. Lines cause the formation and change of icons into infinitely different designs, and iconography is associated with diversity.
2. Fig
When lines come together, they form shapes. Every shape has dimensions, length and width. Most of the time, in iconography, icons are designed from a combination of geometric shapes such as squares and circles.
3. Form
Form is created when we design the figure in perspective. Form is three-dimensional and shape is two-dimensional.
4. Space
Space is often referred to as the area around the icon. An important principle in icon design is simplicity, and unnecessary elements can be removed by using space.
5. Color
To comply with the principle of simplicity in icon design, mostly black color is used and not many color combinations are used.
6. Checkered pages
The use of grid or checkerboards organizes and fits the design in any area. In this checkered space, proportions, sizes, and correlations are done easily and accurately.
7. Size
In iconography, the size of the icon is determined based on the page grid, and all the icons on a page must be the same size.
Dos and don’ts of iconography
- Do not design new icons and use old and familiar icons because they will be recognized faster.
- Use icons so that you have more free space and can easily use the functions in the toolbar.
- Icons should be recognized quickly, so use icons that are familiar to users.
- Avoid using heart and star icons in iconography because they convey several different meanings.
- Icons are always designed to convey a concept. Do not use them excessively or for beauty.
- In iconography, remember this rule, if the user does not recognize the effectiveness of the icon in less than 5 seconds, that icon is ineffective.
- Icons should visually describe the function and purpose, so design them simple, meaningful and familiar.
- Leave at least 1 square centimeter around to maintain readability and easy tapping on mobile phones.
- Make sure that the icons on the same screen or software match.
- Use distinctive shapes or colors for icons that are easily recognizable.
- Put an explanatory label for the icons that will be displayed below or on the right side of the icon when clicked.
- Remember that a good icon does not need an explanatory label and is easily recognized.
- The icon should convey only one purpose and goal.
- Design the icons simply.
- The format of icons is ico.