Illustration Category Logo-Summary of Logo Type and Style

What are the ui design icon types? According to the functional classification, they can be divided into

Application icons, such as logo of websites such as Sohu, Sina and Netease.

Functional icons, such as "start", "pause" and "fast forward" icons of various music players;

According to the design style classification can be divided into

Silhouette icon;

Light imitation icon: on the basis of the original imitation icon, the heavy texture is reduced, the projection and gradient are removed, and the texture is transformed into a flat icon;

Light texture icons: icons such as gradient/projection/opacity are unique and have more details;

Quasi-materialized icons: tangible color icons with style and texture;

Overlay icon;

Icons with text as the main body, such as Alipay and Taobao icons;

Illustration icons, usually game applications, directly use characters, props or pictures in the game as icons.

Summary of Icon Types and Styles This article comes from Youyou.com, mainly because icons are often used in recent work, but the icons given in the design are always a bit uncoordinated on the page, so I want to collect and share this article when I see it.

What the author wrote is still very detailed, so you can pay attention to him if you like. The link address is as follows.

Editor's note: Icon types are ever-changing. In fact, tens of thousands of icons are designed from three aspects: linearity, area and combination of line and surface, combined with transparency, gradient, color superposition, texture and multi-dimensional space. This article is nearly 6000 words, and one article can understand all the design styles!

Icon is an extremely important link in UI design. Almost every interface design we do involves the expression of icons. Excellent icon design can make the interface expression more exquisite and interesting.

Icon design often embodies the basic skills of designers. Therefore, in addition to drawing more pictures every day to improve the control of icon modeling, we also need to understand and learn the trend types of icon design, thus helping us improve the efficiency of design.

For the purpose of self-study, I usually do the corresponding collection when browsing some design websites. Therefore, this paper mainly combs the "types and styles" of icon design, and my own thinking about each icon type.

Icon classification

The icons on the design website can be said to be varied, and different types of icons have unique charm. For example, linear icons are simple and light, and regional icons are heavy and direct. Of course, the same type of icon also has many different forms of expression.

Therefore, according to my understanding of icons, they can be roughly divided into three categories: linear, planar and combination of lines and surfaces. By combining three basic types of expressions, you can create various expressions.

Linear icon

Icons outlined with light lines tend to be refined, meticulous and sharp. Different lines have different visual feelings, thin lines are light, straight lines are tough, and curves are soft.

The Basic Analysis and Thought of 1. Linear Icon

Thickness contrast

The strength and weight of the icon will be different with different thickness. Thick line icons will be more prominent in terms of visual attention, but they will also appear heavy compared with thin line icons. The thin line icon is exquisite, breathable and beautiful.

However, when designing, the thickness of lines should be determined according to the overall UI style, not simply considering the attention of icons, but also considering the balance between icons and interfaces as a whole.

Flexibility comparison

Right angles and rounded corners determine the look and feel of appearance and the trend of style. As can be seen from the comparison below, the larger the fillet, the more lovely and soft the figure is (as shown in the right below), and the smaller the fillet, the more direct, tough and masculine it is (as shown in the left below). Therefore, the value of rigidity or softness depends entirely on the early training of the overall style.

Comparison between complexity and simplification

Besides being light and concise, icon recognition is also extremely important. As shown in the figure on the left below, "too concise" causes the icon to lose its proper recognition and become ambiguous, while the superposition of elements in the figure on the right makes the icon slightly complicated. In the balance between complexity and simplicity, the simplicity of icons is improved to the greatest extent without affecting the recognition degree of icons.

Feature recognition degree

In addition to simplicity, we also need to consider the characteristics of icons. For example, the "comment" icon in the following figure still means "dialogue/comment" after I remove the "three points" from the icon, but when I remove the "arrow" below and keep the "three points", it will be ambiguous and can be expressed as "more", so when designing the icon, we should accurately grasp the meaning and avoid ambiguity.

Keep the unique aesthetic feeling of the icon.

For example, the "heart-shaped" icon below, the picture on the left below is our general icon, which still maintains the original aesthetic feeling after being combined with the circle. However, from time to time, we will see a third design. Although the overall shape maintains love, it is slightly different from the original figure in aesthetics in order to "conform" to the overall style, which is also the focus we need to think about.

Combination proportion

The proportion of the combination will affect the exquisiteness of the icon, and the accurate "proportion value" can make the overall shape tend to be balanced and more aesthetic. As shown in the following example, two groups of effects with different scales are tried, and the narrow edge of the icon is used as the "reference value". When the internal shape is 1:2 of the external shape (as shown in Figure 2 below), the overall visual effect of the icon is relatively balanced; When it is greater than 1:2 and close to 4:3, the internal structure of the icon will appear too full. However, when it is less than 1:2 and close to 4: 1 (Figure 3 below), it will produce sparse and compact effects. (The proportions here are only case requirements, and the actual design is subject to the final visual experience. )

2. Linear type extension

Basic theory, combined with extended application, can produce more creativity in generate. There is not only one design form for linear icons. Through the following cases, we can see the diversity of line icon design types.

Minimalist style

The overall style is extremely simple, without redundant lines, and the essence of graphics is restored through lines. The shape is "simple" but has strong recognition, and it is easy and clean in visual perception.

Minimalist style icons lie in the control of graphics. One more stroke may be complicated, and one less stroke may affect the recognition. Taking the above picture as an example, the combined elements of icons are kept at about 2, which is relatively clean as a whole.

Practical applications: Instagram, Airbnb, Facebook, Twitter.

Two-colored

Compared with the "solid color icon", it is more expressive, richer in details and more diverse in form. Combined with the superposition, contrast and complementarity of colors, the layering and richness of icons are enhanced.

Homochromatic system: the expression of the same cool color system, warm color system or homochromatic system. As shown in the case below, dark color is the main color, and bright colors are dotted to brighten the icon, which makes the icon have a prominent feeling.

Another situation is that the main color of bright color is combined with dark color, and the overall icon effect is ok, but the bright color is not applied to the key features of the icon, which makes the impression of the icon slightly weakened at first sight.

Contrast complementary colors: the color span is larger and the layers are more distinct. As shown in the following example, the contrast between red and blue is more colorful and memorable than monochrome icons.

Actual Case: Tencent Animation My Page

Transparency change

Essentially, it is a type of design with the above one. Through the superposition and change of transparency, the sense of hierarchy and space of icons is enhanced, and the oppression of icons is reduced.

Actual Case: Icon of Iqiyi Palace 9

Gradient layered superposition

The gradient brings out the texture of the icon, and combined with the change of "different shades" or "different saturation", the icon is more detailed and layered.

Black and white+brand color

Black and white is the main color, combined with brand color as an embellishment color. Compared with the conventional black and white icons, it not only has changes, but also takes into account the brand color.

Actual Case: Public Comment Raiders Page Icon

Linear gradual change

Combined with gradient color, it enriches the visual expression of the whole icon and enhances the visual impact and design sense of the icon. The case is combined with black and white background as an attempt. White background: the visual effect of thick lines is better than that of thin lines, which can show the gradient more clearly; Black background: the visual effect of thin lines is more delicate and sharp than that of thick lines.

Practical cases: Netease koala, NAVER

One step molding

This kind of icon has high linear fluency and design sense in visual expression, and the key point lies in the consistency of the setting of the "starting point" of the whole group of icons. For example, "from left to right" or "from right to left" form a complete and coherent line. Inconsistent opening starting points will affect the consistency of the whole group of icons, and it will be messy when applied to the page.

Breakpoint icon

It is similar to the last one, but there is no consistency requirement. On the basis of linear icon, find a gap to break the dull feeling of "all-wrapped icon" and make the icon have permeability and line change. The position of the gap should be kept in the same direction and size, and the number of openings should be controlled to avoid the shape of the icon being too fragmented.

Practical case: Tencent Sports, JD.COM.

Area icon

Regional icons can express the sense of strength and weight of icons better than linear icons, and attract users' attention more easily than linear icons. In recognition, the area icon depends more on the clarity of the outer contour, so polishing the shape is the most important in the design, and a clear outer contour is helpful to improve the recognition.

Basic analysis and thinking of 1. area icon

Contour contrast

Different contours will reflect different temperament, as shown in the figure below. One temperament is straightforward and tough, and the other is soft and lovely. Smooth shapes can make the whole area icon more concise and regular. As shown in the following figure, the icon in the middle is broken in contour processing, and the overall contour modeling lacks coherence.

Hollow contrast

Proper hollowing can not only supplement the recognition of graphics, but also improve the design details of regional icons. In addition, it is necessary to control the proportion of hollowed-out parts in the overall shape. Too small or too large may affect the balance of icons. As shown on the right in the figure below, too small hollowing has little effect on icon recognition, and if it is not hollowed out, it will be less breathable.

Physical contrast

Morphological differences will also have different visual perception. Taking "star" and "heart" as examples, the visual perception of a single shape is more intuitive than that of a combined shape, while the icons of the combined shape are relatively more refined and layered. The experience in daily design is: the smaller the icon shape, the better, the simpler the better, and the better the suggested monomer; If the size of the icon is large enough, the combination design can be used to supplement the details of the icon.

Comparison between complexity and simplification

When designing regional icons, it is also important to manage redundant details. With the increase of details, the block surface is cut too much, which will make the overall icon become too fragmented (as shown on the right below). Keep the design simple, improve the recognition of icons, and supplement the details of key functions (camera flash in the picture below).

2. Expansion of regional icon types

Surface icons can also be combined with various expressions in design to enhance the texture and creativity of icons, rather than simply filling colors.

Monochrome surface+embellishment color

The overall appearance uses a unified color, combined with the icon's attribute perception, decorated with different colors, and the visual effect of the icon is enhanced by embellishing colors, so that it is both unified and different.

Multicolor bicolor

Through the matching of contrast colors and adjacent colors, the overall icon atmosphere is created, the level and richness of icons are enhanced, and the expression of the two colors also increases the interest of graphics. It is very common in daily apps, and it is simple and easy to produce results.

Microscopic texture gradient

The faint gradient enhances the texture of the icon. The direction of the gradient will affect the visual effect of the overall icon, so it can be adjusted according to the needs of different designs. The following situation is displayed:

Practical case: national K songs

Transparency/grayscale change

With the change of transparency/gray scale, the original monochrome icon becomes more layered and spatial, and the design details are richer, which reduces the thickness of monochrome plane icon.

Real Case: Penguin FM My Page

Transparency change+gradient

The gradient design improves the texture of regional icons and has certain richness in color. On the basis of gradient, the transparency of combination types is distinguished, so that the icon has a sense of hierarchy.

Transparent overlay icon+gradient background

This icon is usually applied to lists or top items in the UI interface.

Actual case: national karaoke page.

Color superposition infiltration

After the icons are transparently superimposed, a staggered negative shape is generated and the third surface is superimposed. Although the overall design remains flat, it adds a sense of hierarchy and icon details.

Actual case: Baidu network disk

Gradient layered superposition

The overall effect is close to the icon that changes the transparency. Through the gradual change of depth, there is a contrast between light and dark at the junction of shapes, so the icons also have a sense of heaviness and layering.

Actual case: NAVER, pocket life

Gaussian blur

This kind of icon is basically invisible in the APP, and it has a more layered and spatial sense than "transparency change" or "color superposition", and the icon also has a strong sense of design.

Line-surface combination

Combining the advantages of linearity and flatness, it not only maintains the sense of plane weight, but also has the exquisiteness and delicacy of linearity. Therefore, when designing, we can control the line-surface ratio according to the specific feeling that the icon wants to express, and different proportions can present different visual feelings.

Basic analysis and conception of 1. line and surface combination icon

Line-surface ratio

With the difference of line-to-surface ratio, the tension presented by graphics will have different feelings. According to the icon shape of the middle filler, three different proportions were tried. As can be seen from the following figure, when the ratio of the filling to the narrow side of the shape is 1:3 (left figure), the icon presents an inward feeling; When the ratio of filling to the narrow side of the shape is 1:2, the (middle) icon is balanced as a whole; When the ratio of filling to the narrow side of the shape is 2:3 (greater than 1:2) (the right figure), the whole body tends to expand outward.

Combination form

You can draw lines and surfaces in different combinations. A variety of line and surface icons can be designed based on different combination forms, and different combination forms will reflect different design styles. Therefore, when designing, think as much as possible and find out the combination method that suits you.

Comparison between complexity and simplification

The combination of line and surface itself is composed of two forms, so it is more necessary to control the overall shape when designing. The single (line and surface) shape must be kept highly concise, so that the icon formed by the final combination will not be too complicated (left picture). If the shape itself is too complex, it will reduce the recognition and visual beauty of the icon.

2. Line-surface combination icon expansion

The icon combining line and surface combines the advantages of linearity and surface, and also inherits the advantages of both in design. The design method is also based on the combination of the above two, so more design possibilities can be combined.

Black and white line+facial brand color

Close to the "linear+brand color" approach, the unified linear color and brand color overlap.

Practical case: live well, soul

Line and surface bicolor

On the basis of line and surface, the colors of line and surface are distinguished. The specific method is close to linear or planar bicolor.

Line-surface combination-yin and yang

The combination of line and surface is designed according to the proportion of 50%. According to the basic structural design such as up and down, left and right, and center, the visual effect of the overall icon jumps without being conventional.

Line and plane bicolor+dislocation

On the basis of the two-color icon, the lines and surfaces are scaled according to a unified "percentage" for perspective and displacement design. The overall visual effect is staggered and superimposed, which is richer than ordinary two-color lines and faces.

Actual case: tab at the bottom of idle fish and tab at the bottom of noodle ball.

Linear plane dislocation+gradient

On the basis of the previous style, the color of the face or line is gradually designed, which enriches the texture and color of the icon.

Line-surface transparency change

It is designed in the same way as "line-surface transparency change". In the case shown below, the first recognition degree of "weak lines and strong lines" is weak, while the shape recognition degree of "weak lines and strong lines" is high, which is more in line with the expression of icons.

Actual cases: Sina Weibo, Tencent News.

Based on three basic expressions, different design forms can be developed. In addition to the above cases, some other designs have been collected.

Line-surface combination C diagram

Generally speaking, it is biased towards the feeling of illustration, with many details and elements, which are common in the blank page design of some apps.

Combination of Line and Surface _ Cartoon Illustration

The overall feeling is very cute, cartoon, secondary, which is very common in some secondary or comic apps.

Face _ Gradient Strong Texture

The overall style of light and shadow texture will be relatively strong, often appearing in the interface of some activities or small games.

Facing C plane realism

The overall feeling is relatively dull, and the richness of details is close to the reality perception.

Lines and Surfaces+Gradient Illustration

The overall style is biased towards colorful color styles, with rich texture and details.

Realistic style

3D texture icon

Because the production cost of C4D is relatively high, it is rarely seen in conventional apps at present. However, as the mainstream design trend, 3D needs more attempts when time and ability allow.

Isometric line-surface combination

The equidistant design enriches the original line and surface icons and has the feeling of three-dimensional perspective.

In addition to the above, we will also find some special icon designs in the actual scene.

List icons for more Facebook pages

The overall style is biased towards illustration style+gradient texture. Because more pages are designed as pure lists, the whole page has made a bold attempt in icon design, which is more attractive than the conventional monochrome icons. In order to distinguish different services, the function icons of system nature are distinguished by hue.

Category list icons in APPStore games and new application interfaces.

The whole is a flat design expression, and the color of the icon restores the most basic reality perception.

Start page icon of office software in iOS system.

The overall style is simple in business, figurative in graphic expression and slightly gradual in texture.

Extended Function Icons in QQ Mobile Edition

The overall style tends to be light realism+slight gradient. Each icon has rich details, and the hue is distinguished based on business attributes and brand colors, which is unified and different on the whole.

40 self-media commercial material websites video+illustration+picture+icon CreativeCommons (knowledge * * * enjoyment) referred to as CC protocol material. If the creator voluntarily gives up part of the rights of the work, there will still be restrictions, such as requiring the source and the author's name to be marked. Please read the instructions when you see the CC protocol. The PD agreement proves that the work has been donated to the public domain.

CC0 agreement means that the creator voluntarily gives up all the rights of the work and can use it unconditionally, including commercial use. (But it is not allowed to upload to other material websites, claim copyright, or use it illegally. The content involved in the image may still involve trademark rights, public interests and privacy rights.

Photos of people, landscapes, animals, etc.

/

Sasha vujacic HD video and pictures (Chinese website)

/

High-definition artistic photography pictures (most commonly used by people)

/

Visually search for photos of people, landscapes, animals, etc.

/

Pictures, illustrations, vectors, videos

/

Enjoy beautiful scenery, plants and animals for free.

/

Skuawk's works by professional photographers.

/

High definition still life and landscape pictures

/

Small fresh and high-definition pictures such as kaboompics architecture and still life.

/

Jingwei fashion popular photography gallery

/

Gourmet Gourmet Photography HD Gallery

Freelyphotos with religious high-definition pictures.

/

Aesthetically cool scenery

/

Natural scenery, street architecture

/

Ins wind picture, still life

/

High-definition pictures of Borayoutu tourism

Lifeofpix scenery, food pictures

/

Beautiful scenery video

/

Fancycrave Still Life, Architecture, Retro Style

/

Motstock has many flowers and plants.

/

Retro-style pictures

Megdelenat's exquisite literary pictures.

Designer pictures still life scenery pictures

/

Pictures of various stamps

/

Imcreator figures, art, nature, vector icons

Texture has a large number of texture maps of trees, stones, metals and other materials, which can be used for 2D and 3D maps.

/

Dry icon icon materials.

/

Plane Icons-Design Cute Illustration Style Icons in Japan

/

Illustration clip art

/

Icon fonts, various icon icon materials (Chinese website)

/

Flaticon is a complete icon.

/

Icon ninja icon

Covers all kinds of high-definition video materials.

/

Mixkit real shot HD video material

Video HD, 4K video

/

Videezy various scenes, promotional videos

/

Undraw character scene illustration

Icon 8 character illustration

Drawkit character scene

/

404- Illustration webpage illustration