There are many types and styles of icons. When designing an icon, how can you catch the user’s attention and design an icon that you are satisfied with?
The icon is the most common graphic language in the world today. It is a language that can be understood by everyone, regardless of skin color, internationality, gender, etc.
From the real world to the smart phone screen in the Internet age, you can hardly imagine that a small icon can contain so much information. In the information transmission of modern society, it assumes an important role.
In fact, since human beings have independent thoughts, they have been designing icons to express themselves. At that time, it was just a simple pictogram. In modern society, as icon designers, what we need to consider when designing icons is not just the ideology. We need to understand the style, attributes, and design points of the icon. This is the main content of my article. .
1. The historical role of icons
The design history of the icon may be traced back to prehistoric times, including what we saw on the TV Discovery Channel. Scientists used torches in the dark caves to illuminate various graphics created by prehistoric humans on the rock walls. .
Icons play an important role in the information transmission link of our human development. So, this is even more true in today’s Internet era and GUI era.
As the pace of the world accelerates, icons are becoming an important part of our lives. They can help us quickly obtain information, help our thinking, make decisions quickly and find our goals.
Because reading an icon is much easier and faster than reading a paragraph of text or voice. Moreover, it is more versatile than language to a certain extent, without the recognition barriers of people of different ethnicities in different regions.
The same circle, rectangle, and triangle toilet icons of different genders are common in many countries, and people can recognize the meaning they refer to, even if there is no text label.
2. The classification of icons
The design of icons, from the actual guide-type icons to the icons in the GUI interface, is full of various forms and expressions.
It can be divided into two categories from the general category, namely: pictographic icons and ideographic icons .
1. Pictogram
Like the origin of our Chinese characters, pictograms convey meaning through a configuration similar to the reference object.
For example: an apple-shaped icon means an apple.
This is currently the most popular icon type-pictogram icon, which contains many mainstream icon design styles. Including: linear icons, face-shaped icons, quasi-object icons, hand-drawn icons, etc.
2. Ideographic icons
This type of icon will be more complicated, people need to invest in learning costs, you can refer to the English ideographic form, people need to remember what the word means. There are also examples, such as: college students learn all kinds of complicated symbols in high mathematics, students also need to learn, and remember the meaning behind each symbol, the same is true for various graphical logos.
So the basic meaning of the ideographic icon, even if it has a basic shape, but people cannot know the meaning at a glance, but need to learn.
3. The style of the icon
1. Imitated icons: Committed to creating icons similar to the real world
This is the representative design style of IOS in the Jobs era. The original intention is: I hope that the first batch of users who enter the world of smart phones can use the real world to smoothly transition to virtual operations.
For example: the design of the radio, from the entrance icon to the interface inside, is a very high-quality design. It is hoped that users can operate every function and every function as in the real world without spending any learning costs. Button.
Design points : surreal simulative objects, combined with the use of scenes for configuration, the texture expression is in place, and the light and shadow are reasonable.
Although the simulant icon has been eliminated by the times, I still encourage many friends to do some simulant exercises, because this can exercise their texture performance, configuration, and light and shadow control techniques to a certain extent. It is still very helpful for future design career-although this practice will take a long time.
2. Linear icons: the art of lines
This is one of the most popular icon expression styles and the easiest icon design style for every designer to start.
- Features : The icon is a graphic composed of a line of equal thickness. Compared with a face-shaped icon, it will have more detailed expression space. Controlling the thickness and configuration of the line can have a variety of visual performance;
- Application scenarios : usually used in small function entrances, and play a role in referring to functions;
- Design points : The line thickness should be consistent, the configuration should be full, the size should be visually unified, and the angle of view should be consistent (usually icons in the front view, do not insert one or two top views or angles similar to the lateral axis), and the rounded corners are unified.
3. Face-shaped icons: the representative of the flat era
This is also a very common icon, which is a representative of flat and pictographic icons. When designing, it is mainly a process in which the designer extracts the key shape features of things from the real world, and then re-digitizes them through drafts.
- The characteristics are: a pictographic silhouette with small color blocks, which is more visually tense, has a heavier visual sense than a linear icon, and is not easy to portray more details;
- Application scenario: usually used as an entry icon for a software logo or system logo;
- Design points: Boolean operations and positive and negative shapes can only be selected and unified. The size is visually unified, the viewing angle is consistent, the rounded corners are unified, the silhouette area is close, and the configuration is full.
4. Filled icons: icon style represented by “MBE”
This type of icon can be said to be a perfect combination of face icon and linear icon, using a line configuration and then filling the color inside.
- The characteristics are: relatively new, with more room for expression;
- Application scenarios: Usually used in product requirements that are relatively tense and require individuality;
- Design points: uniform lines, uniform colors, and visually uniform sizes.
5. Hand-painted icons: game icons
This is a hand-drawn icon. This style of icon can show the designer’s expressiveness in a wild way. In some themed competitions, this icon style can be said to be in an open state to participate in the competition.
- Features: The visual performance is rich and delicate, very appealing and a sense of scene;
- Application scenarios: more applications in games or mobile phone theme design;
- Design essentials: grasp of details, grasp of vision, icon configuration, uniformity of the entire style, etc.
4. Icon design
In today’s era of fully flat UI, there are many similarities in the UI design of many products. After you remove the logos of the two apps, you will find that their interface designs are actually similar.
In order to get rid of this embarrassing situation, the appropriate icon design with the brand color of the product will make a product more colorful and special.
Because in a general UI interface, the main elements are nothing more than design elements such as color blocks, lines, text, labels, etc. After removing color blocks, lines, text and other elements that rarely express space, the rest can have more performance. Spatial, that is, those sets of icons. Therefore, a set of appropriate icon design can better convey the brand concept of a product and stand out in the APP market.
1. Choose the right style
Choosing a suitable icon style for an APP generally takes into account a variety of factors, including: the VI of the product itself, the demand positioning of the target group of the product, the brand tonality of the product, usage scenarios, and how to create a colorful configuration, etc. .
Of course, all of these premises are based on the icon, which is not only beautiful but also consistent. You can collect a variety of excellent reference programs, or output some different styles of icon sketches, and brainstorm with the team’s designers until you choose a suitable theme.
So once you decide on your icon style, you need to stick to the next set of designs in accordance with this style, and don’t let a single out-of-group icon ruin the overall beauty.
2. The configuration of the icon
The configuration of each icon is related to the final visual effect of each icon output, so the configuration is the top priority at the beginning. For the extraction of icon shapes, some designers may think that I should keep absolutely original from the beginning, extract the shape outline of a thing from reality or from photos, outline the sketch and transfer it to the electronic version. This sounds like a lot. Cool, but I think this is wrong.
I feel more that we should stand on the shoulders of our predecessors to do more, to innovate and to make breakthroughs, instead of starting from scratch. That would be a waste of time.
So my usual practice is to collect a lot of icon works that I think are good and fit the theme I want on the Internet, extract the good configuration methods from them, and combine my own thinking to add my own innovative ideas on the top. , Output a better configuration plan.
3. The size of the icon
It is easy to design a single icon, but it will be much more difficult to make a complete set of more than 5 icons.
One of the first issues to consider is the size of the icons. We must keep the size of each icon visually consistent.
Why should we emphasize visual consistency here?
Because in PS, even if you pull the auxiliary line, the actual visual experience of the two icons with the same area is quite different. We have seen a lot of similar visual illusion errors, so everything depends on the audience’s perception.
For example: two shapes of the same size, a circle and a square. The square always looks bigger, because it fills more space, so we usually make the square smaller so that they have the same visual sense of size.
4. Safe Frame
The safety box is an effective tool for assisting designers to design a set of uniform and regular icon sets. The general safety box is divided into two types: inside and outside. The size of the safety frame needs to be set by the designer according to the needs of the use scene of his own icon. The function of the inner safety frame is to specify the uniform size of the entire icon, and the outer safety frame is used to indicate the total output specification, that is, the specification of the final icon slice to be output for the development.
Of course, if you feel that drawing a dotted line of 9 square grids or other fixed auxiliary lines will help the unity of your icon configuration, you can also add it according to your own needs.
5. Choose the right tool
Choose a suitable tool. The main popular tools now are: PS, AI and Sketch.
The answer here is that it’s okay. There is no need to worry about the performance of the software too much. What we should pay more attention to is our own source of inspiration and overall quality. Recently, I myself prefer to use sketch to design icons, and use Boolean operations to cut and combine the icon shapes I want. In the design, I must align each pixel grid without imaginary edges.
If the tool used is AI, then if your icon is stretched and shrunk before outputting, there may be imaginary edges, and you need to pay attention to it frequently.
6. Choose the right color
According to the style of the icon, you can choose to decide the color of your icon can be a single color, or a collection of multiple colors. However, the colors should not be too many, and the colors of a single icon should not exceed 3 colors. Because our ultimate design goal is for users to better recognize and remember the meaning of the icons.
The addition of colors can create more possibilities for our icon design, not only in terms of visual expression, but also relying on the attributes represented by various colors. We can also use colors to enhance and convey the icon Information in certain specific scenarios.
7. Final operation
When you have completed the entire icon design, you cannot submit it for review or apply it to the product immediately. You must continue to improve and adjust the entire icon set. According to the design of various icon styles, you need to reconsider the consistency, uniformity, etc. Aspect to verify. Make sure they are uniform and beautiful in style. This is an important step and should be taken seriously.
5. Finally
These simple icon knowledge and points to be considered in the design should be the points that must be known before starting a set of icon design, not a clear icon design guideline. Because other designers will also have their own methods and techniques, and ultimately they are all result-oriented, which is to output better icon designs and create better product experiences.
If you want to do more and better icon designs, the best way is to look at things as much as possible, look at the way of thinking of designers around the world, and then keep practice.
