5 tips on how to design an icon for the site

If you are having difficulty in choosing the best icons for web design or icons for the client, note the tips that are listed below on the right web design icon for the site.


Icons are one of the main visual aspects of web design. The level of detail, style and their direct application depends on a number of different factors.

1. It is necessary to understand the problem of icons development

When you are designing a website from scratch you need to create more than one icon to determine the overall design concept of the site. Often receive requests for the development of unique icons for the site. For example, you have to design the icons for the message of file access error. First the following icon was developed:

After revision of the concept has been developed somewhat different icon:

However, you will agree that this icon is not entirely correlated with the file access error. The result was an abstract icon.

2. Take an integrated approach

It was necessary to consider the meaning of icons in general, so I had to start from the word "notice". But such an icon already existed and has been associated with other sectors:

An integrated approach to the development of icons is important to bear in mind their full range of applications. Otherwise, you mistakenly use the icon, which is already used for another area and has a completely different meaning.

3. The simpler, the better

Following this advice, the icon has been developed, where the file is simply placed in a triangle:

But the end user, this simplicity is unclear: it carries a triangle with the image file inside? Icon should disclose the whole point of the message.

4. Pay attention to context

At the heart of even the icons developed based on the following concept: a large cross in the circle on green background, however, and this icon does not carry the meaning that the message is a kind of mistake. The most important thing in the development of icons for the site - the context and meaning of the message, such as the correct color.

5. Semiotics

Semiotics - one of the main factors in the print shop. For example, a decorative font carries a tinge of femininity and comic font may refer to a site dedicated to children and be a shade of playfulness.

Thus, marked with an error message of access to documents (files) can be found a list of icons that are optimally correlated with the error message, and do not be so hard to scare the user. For this was caused by a bug in the browser Google Chrome.

And it is such an icon has led to the idea of ​​creating icons with the image of the document on which to draw "anti-smile," and she is an icon on a gray background. Thus, the user will know that something went wrong with the document, but the gray background will not scare him badly.

Source: http://webdesign.tutsplus.com/