The optimal method of icon description in web design

Many people say that design is about detail, and the details that are expressed in web design are icons. The icon brings additional annotations in a design and causes the objects and elements in the design to be noticed by the user.

Watch the Photoshop tutorial published by Web pages: creating innovative Web Navigation

The following is an optimal method for describing an icon. When you use an icon, the description of the icon contains a series of metaphors. This is also the reason for the extensive use of icons and a series of icon groups in site navigation.

metaphor :

Icons are metaphors of words, and they also give a good idea of metaphor, and for usability it's important to communicate effectively between sites, and icons should be a substitute for text that best delivers information. Users need to quickly know what the icon is expressing.

Using the cognitive elements and simple metaphors---users should quickly know what the icon is expressing. As an icon, it is important to use some common elements, just like a room (express "home"). Here are some examples:

• Bubbles--Comments
• Envelope--e-mail and Contact
• Arrows and hard drives--download
• Question mark--Help and common answer questions
• Folder--File
• Horn--Forum
• Two rounded arrows--update
• Monitor--Video
• Magnifier--Search
• Alphabetical chart--alphabetical
• Lock--Security
• Asterisk--Important tag
• Mouse--Indicates that there are a lot of links ...

Icon attached to the label---if the icon is not clearly expressed meaning, plus a small label is a very good choice. For the user, the text is very clear to express its meaning, so you can improve the usability of the icon. In general, try to use only a few words to do the label of the icon, as well as a line of text. Use words that are understandable and concise colors.

Pixelmator in their help navigation bar, and did it brilliantly.

When you use an icon :

The function of---icon as a button is very similar to a button. Replace the text with the colorful elements. Many designs take this approach and can be done in a number of other ways.

It is also a good choice to attach text ---buttons on the button and use icons and text. This will be more attractive to the user's eyes.

In addition, there is a good example in Pixelmator's work. These buttons use icons and text. In addition, these buttons are also very effective when activated. When the user moves through the buttons, the icons change from colorless to colored. This is a fairly good usability.