Skills to be mastered in icon design

For UI designers, the ability to design icons is very important, which is an important way to enhance the sensory experience. For some designers who have just entered the industry, they are used to downloading icon materials to meet the needs of the project and lose the opportunity to cultivate their hands-on ability. In fact, icon design is not difficult. Let's share the skills of icon design for you. I hope it will be helpful for your icon design. Let's learn together! Skills to master in icon design: 1. Don't use too much material. For new designers, it is understandable to use material occasionally, but you must learn to disassemble and analyze, and master the skills and ability of restoring design. Over-reliance on materials can easily lead to solidification of thinking, unwillingness to create and loss of innovative design ability; It is also easy to lead to high aspirations, but the idea does not come out, and it is easy to have the idea of giving up; The design completed in the form of collage of materials is also greatly reduced in standardization and detail, which leads to the lack of refinement and standardization of design works. 2. Consciously practice strengthening We need to improve the ability of icon design through deliberate practice. According to the law of ten thousand hours, the technical level is improved by repeated honing. 3. Remove the material and standardize the icon design. It is actually very easy from material habit to design, but it seems simple but difficult to master from drawing ability to drawing. Removing the material is the key to the standardization of icon design, and then unifying the style and details and mastering the digital relationship is also a subject that needs our repeated research. Take this weather icon as an example. I believe many students can draw it, but it is difficult to control the digital relationship inside. As can be seen from the figure below, the ratio of large and small circles is 4:3, and the spacing relationship also has a numerical relationship with the size of the circle. These numerical relationships enable us to improve the design of icons and explore the quantitative standards and relationships behind the design. 4. Strengthen the texture layer by layer. When we finish drawing the shape of the icon, it is particularly important to use appropriate styles to strengthen the texture. Here I started with one of these styles and chose the frosted glass texture. In order to make the relationship between texture and hierarchy more obvious, some parts are enhanced by light and shadow and processed by boundary. Please look at the following steps to decompose the picture to feel it. Note: the software used is fuzzy background, which can be realized by Sketch or Figma. 5. Expanding the interface scene In order to further strengthen the exercise of icons, a simple interface scene and an interface design composed of grid layout are expanded. In order to fill in what I want, I will put in some previous icon works to occupy space. Although they are all texture icons, there is still a certain sense of exclusion because of the inconsistency in perspective, color matching, style and detail specifications. 6. Re-adjust according to the interface environment. Because the interface design belongs to a dark theme, the weather icons previously practiced are too prominent in the scene, and the permeability of the glass texture is not well displayed. Therefore, according to the interface environment, the weather icon is readjusted, the cloud part is adjusted to a dark relationship, and the color and size ratio of the sun are adjusted. 7. Continue the style, and complete the design with the adjusted weather icon as the style specification. The icon design of other commercial scenes directly continues from perspective, detail specification, color proportion, light and shadow effect and so on. Vertical segmentation is selected in the direction of light and shadow. The three on the left choose the upper left corner illumination, and the three on the right choose the upper right corner illumination. (Of course, you can also set the direction of light and shadow to be the same.) 8. Determine the unity or differentiation Although the overall design visual style is relatively unified, there are still some problems. Icons lack differentiation, and excessive unification easily leads to visual fatigue, so they begin to struggle with unity and differentiation. In order to ensure the unity of icon design and expression and form visual differentiation, a decision was made to adjust the color relationship. The relationship between the colors of the weather map continues with other colors to see what the final effect is. Icons are computer graphics with reference function, which are highly concentrated, transmit information quickly and are easy to remember. Icons have a very wide range of applications, from all kinds of software and hardware to real life. We can say that we can't live without icons. And the icons we see generally need to be designed! In order to teach you icon design, we will share the icon design skills for our friends above, and learn and master them together!