laitimes

【Learn UI Design】APP Icon Design Method!

author:Fruit vision

The launch icon must be eye-catching with a strong visual effect. The visual effect of the startup icon is the user's first impression when they see the APP icon, and a good APP icon design will definitely attract people's attention, which will make users have an urge to experience it at first sight. Generally speaking, a strong visual effect is mainly achieved through the choice of elements, shapes and color combinations.

【Learn UI Design】APP Icon Design Method!
【Learn UI Design】APP Icon Design Method!

(1) Select the exact element. The elements of APP icon design, simply put, are the correct expression of the elements of the application, the selection of elements should be a very important step in the design of icons, because it plays an ideographic role in the whole application, the element selection is not accurate, there will be ambiguity, and it will not be able to express the meaning correctly, which will hinder the design of the entire icon.

【Learn UI Design】APP Icon Design Method!

The correct selection of elements plays an important role in the recognition of APP icons, which is also the first step to consolidate the recognition. For example, the icon design of the camera, the simple camera silhouette and lens are very good element choices.

【Learn UI Design】APP Icon Design Method!

(2) Choose as few elements as possible. In addition to choosing the exact elements, the design of the launch icon should also choose as few elements as possible, and the selection of elements should not exceed three. Too many element selections will make the icon appear cluttered and unprimordial, so that users can see at a glance that there are too many elements to remember, which will increase the user's recognition burden.

【Learn UI Design】APP Icon Design Method!

If you choose two or more elements, do not distribute them equally, but determine a main element, which should occupy the center of the icon, and this main element should highlight the design theme, and the attached elements that are closely related to the application of the program belong to the role of foil.

【Learn UI Design】APP Icon Design Method!

(3) Choose elements that are in line with most people's perceptions. As the first impression of the app, the launch icon is particularly important, especially for users with different occupations, different ideas, and different experiences. Therefore, the choice of elements should be in line with most people's cognition, and it is necessary to ensure that when users see the icon elements, they can associate the reference application, so that users will not be ambiguous when identifying the icon. For example, when users see the symbol icon of addition, subtraction, multiplication and division, they will invariably think of calculators, because the choice of the symbol element of addition, subtraction, multiplication and division is very much in line with most people's imagination.

【Learn UI Design】APP Icon Design Method!
【Learn UI Design】APP Icon Design Method!

(1) Determine the main figure. In the design of the launch icon, the simplest and most effective way is to determine a visual subject, just like painting a picture needs to have a subject object, generally this subject object is the most eye-catching, and the area in the whole icon is also the largest subject There will be many kinds of subject graphics, which can be circles, triangles, squares and irregular shapes, etc.

【Learn UI Design】APP Icon Design Method!

(2) Simple modeling. Graphic simplification is the most straightforward way to accelerate cognition, which can summarize the selected graphic elements. Once you've decided which shape your chosen element belongs to, it's time to design it within the outline so that it can be properly expressed, and don't overdo it.

【Learn UI Design】APP Icon Design Method!

(3) The shape is unique. Unique is to have unique features, for APP icons, uniqueness is a means to enhance identification, only with other icon design is obvious will avoid confusion, so as to facilitate identification.

【Learn UI Design】APP Icon Design Method!

Abstract APP application icons are more suitable for graphic uniqueness, because only a simple graphic can no longer interpret the application, so the graphic uniqueness here can be understood as designing a representative graphic image for it according to the application characteristics or concepts.

【Learn UI Design】APP Icon Design Method!

(4) Exquisite details. A good APP icon must be able to withstand the scrutiny of details. Although the APP icon is a person to be examined with an overall vision and needs the overall visual impact, after all, the mobile phone is for users to hold in their hands to watch at close range, so the details of the icon must be exquisite and beautiful, and every detail is worthy of in-depth scrutiny.

【Learn UI Design】APP Icon Design Method!

Whether it's realistic or flat, it's important to make every detail perfect, and to make every highlight, gradient, shadow or corner turn with care.

【Learn UI Design】APP Icon Design Method!
【Learn UI Design】APP Icon Design Method!

(1) Create a uniform color tone. Although the launch icon is composed of a variety of colors, it will still have an overall color tone, which can be blue, reddish, cool, or warm. First, determine whether the launch icon is to be designed in cool or warm tones, and then determine the color of the main element, and then match it from three aspects: hue, lightness, and purity.

【Learn UI Design】APP Icon Design Method!

(2) Use strong color contrast. After determining the unified tone, it is necessary to improve the contrast of the color of the APP icon graphics, and the strong color contrast can attract the user's attention and also have a certain visual impact.

【Learn UI Design】APP Icon Design Method!

The contrast of icon color mainly refers to the contrast between the background color of the icon and the color of the graphic and the contrast of the color of the graphic itself, which can be the color contrast of the color, such as the complementary colors yellow and purple, or the contrast between the light and dark of the color, such as dark blue and light blue, but this contrast is not a mechanical color contrast. Also pay attention to the harmony between the colors. Make your icons appealing and aesthetically pleasing.

【Learn UI Design】APP Icon Design Method!

(3) Use the sense of color to convey meaning. Understanding the attributes of color is also very helpful for the design of the startup icon, first consider what kind of app the app you want to design the icon belongs to, and what the color of the app gives to the designer.

【Learn UI Design】APP Icon Design Method!

Because colors have attributes, different colors give people different feelings, for example, when we think of nature, we can easily think of green, when we think of appetite, when we think of orange, and when we think of hospitals, it is easy to think of white. Therefore, it is very important to have an understanding of the properties of color.

【Learn UI Design】APP Icon Design Method!

Read on