Skills needed for icon design

For UI designers, the ability to design icons is crucial 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 project needs, losing the opportunity to develop hands-on skills. In fact, icon design is not difficult, below we have shared with you the skills of icon design, I hope it will be helpful for your icon design, learn it together! Icon design needs to master the skills: 1. Not too much material for new designers, the occasional use of material is understandable, but must learn to disassemble and analyze, to master the skills and ability to restore the design. Excessive reliance on material can easily lead to curing thinking, unwillingness to create, the loss of innovative design capabilities; also easy to lead to high aspirations, the idea but not out, it is easy to harbor the idea of giving up; to material collage in the form of design completed in the form of norms and details are also greatly discounted, resulting in the design of the work is not enough to refinement and standardization. 2. consciously practicing to strengthen our need to improve the iconography design through deliberate practice The icon designing ability is improved through deliberate practice. According to the law of 10,000 hours, through repeated honing to achieve the improvement of technical level. 3. Remove the material, make it standardized icon design from the material habit to design hands-on is actually very easy, but from the drawing ability to draw between the seemingly simple but difficult to master. Remove the material is the key to standardize the icon design, and then unified style and details, to master the digital relationship is also a subject that requires us to study over and over again. Take this weather icon as an example. I believe that many students can draw it, but it is difficult to control the relationship between the numbers inside. From the figure below we can see that 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 allow us to improve the design of the icon and explore the quantitative criteria and relationships behind the design.4. Layers of Enhanced TexturesWhen we have finished drawing the shape of the icon, it is also important to enhance the textures with appropriate styles. Here I started with one of these styles and chose a frosted glass texture. To make the texture and hierarchy more apparent, the sections were light-enhanced and bordered separately. See the steps below to break down the image to get a feel for it. Note:The software used is Background Blur, which can be achieved with Sketch or Figma.5. Extending the Interface SceneTo further enhance the icon exercise, a simple interface scene was extended, an interface design consisting of a grid layout. To fill in the desired content, I will put in some of my previous icon work to occupy the space. Although they are all texture icons, there is still a certain sense of exclusion due to the inconsistency of perspective, color scheme, style and detail specification.6. Re-adjustment according to the interface environmentAs the interface design belongs to the dark color theme, the weather icon practiced before is too prominent in the scene, and the transparency of the glass texture has not been well brought out. Therefore, the weather icon was readjusted according to the interface environment, the cloud part was adjusted to dark relationship, and the color and size ratio of the sun was adjusted.7. Continuing the style and completing the design with the adjusted weather icon as the style specification, and the icon design of other commercial scenes was directly continued from perspective, detail specification, color ratio, light and shadow effect, and so on. Vertical division is selected in the direction of light and shadow. The three on the left choose upper-left lighting, and the three on the right choose upper-right lighting. (Of course, you can also set the direction of light and shadow consistent) 8. Determine the unity OR differentiation Although the overall design visual style is relatively uniform, there are some problems. Lack of differentiation between icons, excessive uniformity is easy to cause visual fatigue, and then began to tangle in the unity and differentiation. In order to ensure the unity of icon design and expression, and to form visual differentiation, the 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 functions, highly condensed, rapid information transfer, easy to remember. Icons have a very wide range of applications, from a variety of software hardware to real life everywhere you can see the figure of a variety of icons, it can be said that our lives have been inseparable from the icon. And the icons we see are generally need to design! In order to teach you icon design, above we share the icon design skills for all partners, together with learning to master it!