The techniques of designing and screening icon icons

The design of icons is becoming more and more important since the flattening and the design of the minimalist design is becoming more and more important. Often there are designers asking, what is the design of this icon in the software program?

In addition, web designers will ask, “we have VIP members on this platform. How do we design the icons of VIP members?

There is also a App Design. How do I design the group icons in this chat?

The design of icons is one of the most difficult tasks for ui/ux designers.


What is the intention of the icon

We use icons to use it to communicate meaningful things on the user’s interface; and this meaningful thing may be your object, idea, action, and then the designer visualizations the meaningful things.

The advantages of icons

1. it is a common language in the world. It won’t be influenced by your culture and language. For example, everyone knows the phone right. There are many types of mobile phones. But if you look at this icon, do you understand this icon of the phone right away?

Icon design 10

Mobile Icon


2., you can quickly identify the user, especially when you are moving fast, you can easily find the functions and things you want immediately.

Icon design 6

The image of mobile phone in mobile will be like this, which is easier to identify when moving than text.


3. increase the beauty of the design.

4. save space, especially for minimalism or flat design.

The 5. icon is a very good click target.

There are so many advantages, but this advantage has a premise that your icons are designed very well and can let users see what you want to express right away. If not, you will make the user confused, causing the user to finish a task or something, the user will do it. A failed operation or a wrong click.

For example:

Look at the Gmail, the red ring.

Icon design 1

Icons in the Gmail letter

Can you just look at the icon to see what this means?


A designer usually made a mistake

Having said so much, many designers have made mistakes, causing users to complain most and cause users’ troubles.

1. often inventing the icon causes the user not to know the icon very well, which causes the user to click frequently.

2. often complain that once a revision is made, no one knows where the function has gone.

3. icons drawing too detail, too creative to make the user mixed with the content, saying that the white point is the style of the icon robbing the content, let the user notice the point on the icon is not the content, and then in the small size, the details of the icons are not necessary; the user is not very clear.

4. using some common icons but not considering the problem of multiple platforms, in fact, it is also a trash can. IOS and Android are very different.

5. use the meaning is not very clear thing to use icons to express, and they are too creative to lead to the user’s cognitive difficulties, such as the special icons inside app to draw, the result is often themselves in the cool, without considering whether the user can grasp.

6. save space for saving space and do not consider users’ learning cost for learning new icons.


Five principles for the design and selection of icons

So you should do it like this:

Can you judge the meaning of your icon in five seconds?

If not, please redesign.

Two. Select icons with high generality

For example, below, you can see what it means.

Icon design 7

If you define these icons yourself, IOS is similar to Android, but there is a distinct style difference. Some icons are very different. To find the icons suitable for the design of the platform, to optimize the IOS and Android platforms rather than to design a common platform for the entire platform.

For example:

Icon design 3

The two very large icons are shared, with Android on top and IOS below.

Three. Keep consistency

The common icon selection is a little more careful. If the icons you choose are often more than two meanings in general, you should be very careful about the use of the icons. This way is to maintain consistency. For example, the love representative joins my favorite, and the whole platform’s love is my favorite.

Several highly versatile but many meaningful icons are shown below.

Icon design 5

Four. Description of abstract icons in text

If space is allowed, you must use a text description; suppose you want to design an icon today, this icon is very special, such as groups, VIP, weather, happiness… .etc; the abstract icon you design is best illustrated with text.

If space is not allowed, then you should not use icons instead of icons instead of icons.

Icon Design 8

The space is really not enough to use the label

There are also abstract types of icons that must be found in the real world, and try not to be completely unrelated; otherwise, your icons are hard to understand or remember the meaning of the icon, even if it is written in words.

Because the abstract label is very complex, you can use many words to express its meaning, but often the user does not know the meaning of this icon.

For example:

Icon design 9

Icons plus labels

Five. Clear feature appearance

You shouldn’t spend too much time on details when you design icons; you shouldn’t spend too much time on details, because it’s hard to see the details of too small icons, and you should spend more time asking yourself where the meaning of this type of icons is.

Therefore, there should be real physical features or visual effects on the appearance.

For example, the following icon is used to test the speed of mobile phone.

Icon design 2

Test network speed

Classic Abstract icons: setting.

Icon design 4

Set of icons

I think you have seen that most of the icons set up are gears, so why?

Traditionally, the adjustment of the mechanical operation is to make use of the position / type / size of the gear. Etc, how does it run? Is it necessary to adjust gears?

Therefore, the use of gear setting is a metaphor. If you want to change the way you work, you need to change the internal operation of the system, which is usually a gear icon.

Leave a Reply