Several key elements that make the icons in the web design more appealing

The role of icons in web design

Icons are widely used in web design, and icons exist in almost every site. Through these small icons, it is easy to achieve visual guidance and functional division. If appropriate, the icon can be integrated with the picture on the page, to maintain visual consistency, but also with the overall style of the site to coincide. Icons are not flashy gadgets, and small icons are of great use. In web design, if the designer is not good at icon design, then need to work on the icon selection.

Generally speaking, according to the use of the method, the use of different occasions, an image can be interpreted in many ways, the icon is also the case. Icons can not only attract the attention of users, but also can split the area of the page, the most important thing, the icon can provide a visual metaphor, can give the object a certain meaning, so that users can scan a glance to know the function, so the icon is a tool to improve the user experience.

The role of icons in web design

Icons can be said to be an unstable visual element because icons contain too many images and can play different roles. A pencil icon, it can represent a lot of meaning, can represent the design, can also represent the sale of pencils, can also represent the sketch. The most important icons apply to:

Visually segmenting content: making content more attractive and readable. Often applied to the subject, list, or other elements of a Web site.

As a visual reference to the concept, fast-booting users: This is most common in navigation elements (above)--such as magnifying glass for search--very simple, sometimes even text annotations do not need.

The effect is outstanding, so the icon is widely used. So you can find icons in almost every element of the Web page design: headings, footnotes, navigation bars, lists, and icons can greatly enhance the browsing effect of elements in the page.

What are the advantages of a good icon?

It is not difficult to find that the icon is an indispensable part of excellent web design, but if the use of improper or icon design is not in place, then the identification is very poor, users are difficult to understand. So we need icons that look exquisite and mean a great thing, such as the top set.

Although the icon design is a long story and complex, the icons are great for a variety of designs. Regardless of the design, if you want to use the icon, then you must remember the following two points: Conceptual communication is perfect, visual validity.

How do I keep the visual validity of an icon?

Icons are good at organizing content, attracting attention, and directing users to important information, provided the icon is consistent with content, other icons, and the visual style of the entire site.

Icon series should remain visually unified

For a group of styles not uniform icon, even if the design of a good icon, but also to give up. Visual unity, which concerns the overall design.

How to achieve the visual unification? Here are some tips, including:

Use the same color or color, as shown above

Set all icons to the same shape, as shown above.

Boundary attributes should be consistent, as shown above.

The effect should be consistent, such as gradient, transparent, shadow and other effects, such as the above figure.

Finally, also consider whether the visual style of the icon and content, the style of the site consistent.

A certain limit of free combination

Sometimes a Web page design only uses a set of icons, but if not enough, you can try to use a number of sets of icons, the This website on the map, the use of a number of sets of icons, but the dimensions of these sets of icons are the same. And these sets of icons are not working together, they apply to different pages, and there is no harmony between each other. As long as you master this workaround, the choice of icons is more free.

Icons should match the overall design of the site

Of course, the icon and other design elements to match the method is not sure, the road is endless. But from a basic trigger, there are two ways:

Icons are in stark contrast to the overall site: When icons are used as navigation, this approach works well, such as the social media links shown above to attract attention.

The visual style of the icon is similar to the overall design style: The icon in the image above, perfect fit with the whole page style, provides a sense of visual harmony.

How to use icons to improve communication concepts

Communicate concepts through logic and consistency.

Icons to be easy to understand

Everyone has the opinion of everyone, the interpretation of the image is not absolute, perhaps some people can understand this icon, the other part of the people can not. But the ability to convey the image is stronger than the text, such as the icon in the above, you can clearly convey the meaning.

But sometimes the designer tries to add complex concepts to the icon information graph, and the confusion of the resulting icons is about to convey the effect, such as the image above. In this case, we need to do further information refining, the return of content. If the problem is still unresolved, the icon does not apply in this design. Advice a lot about information graphic design, this design is very important to the concept of the icon conveyed.

Web design is developing rapidly, and icon design is also progressing fast. Once unable to convey the concept of the icon, now can be achieved through the skills to communicate, the icon has become an important tool for web designers. Based on basic, more practice and innovation, I believe that your design will become more and more full of artistic sense, more and more easy to understand.