Skills to be mastered in icon design

For UI designers, the ability to design icons is very important and 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 everyone. I hope it is helpful for your icon design. Let's study together! Skills to master in icon design: 1. Don't use too much material. For new designers, it is understandable to use materials occasionally, but they must learn to disassemble and analyze, and master the skills and ability of restoring design. Excessive dependence on materials will 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 material collage is also greatly reduced in standardization and detail, which leads to the lack of refinement and standardization of design works. 2. Conscious practice strengthening We need to improve the ability of icon design through deliberate practice. According to the rule of 10 thousand hours, improve the technical level through repeated tempering. 3. Remove the material and standardize the icon design. In fact, it is easy to change 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 following figure, 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 digital 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 enhance the texture. Here, I started with one of these styles and chose a frosted glass texture. In order to make the relationship between texture and layering more obvious, some parts have been enhanced by light and shadow and boundary processing. 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, the simple interface scene and the interface design composed of grid layout are expanded. In order to fill in what I want, I will put some previous icon works to occupy space. Although they are all texture icons, there is still a certain sense of rejection because of the inconsistency in perspective, color matching, style and detail specifications. 6. Readjust according to the interface environment. Because the interface design belongs to the dark theme, the weather icons practiced before are too prominent in the scene, and the permeability of glass texture is not well displayed. Therefore, according to the interface environment, re-adjust the weather icon, adjust the cloud part to a dark relationship, and adjust the color and size ratio of the sun. 7. Continue the style and use the adjusted weather icon as the style specification to complete the design. Icon design of other commercial scenes directly continues from perspective, detail specification, color proportion, light and shadow effect and so on. Vertical division is selected for light and shadow direction. 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 light and shadow in the same direction. ) 8. Determining Unity or Differentiation Although the visual style of the overall design 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 distinction, we decided 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 are widely used, 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 icon design skills with our friends above and learn and master them together!