Moisten the matter to be fine silently! 5 Ultra-practical rules to help you design icons accurately

today's icon tutorial does not stay on the operational level, in depth, to say those subtle and key icon design principles, after reading these five points will find that a good icon can not only good visual effect, in the user experience has also been delicate thinking, not clear of the students, poke >>>

Have you ever encountered the difficulty of designing icons for a given problem? Working with your developers, but finding it hard to give your customers a perfect solution? This article will help you when you are having trouble designing the page icon.

　　Guiding Principles

Icon Design is one of the most important visual elements in the whole page visual design. The details, styles, and functions of an icon are determined by a lot of things. I've also been making the corresponding page icons for a series of websites to convey subtle metaphors.

This article will have some recent cases where I set the error icon for a website. In summary, the guidelines for icon design involve the following five parts:

Understand the problem

Adopt a Global Approach

The simpler the better.

Consider environmental factors

Understanding symbolic elements

This article is not so difficult to understand and will give you a lot of help in the real icon design.

　　First, understand the problem

Sometimes you might want to design your site from scratch, so you'll need a lot of icons for visual expression. Typically, your client needs you to customize a unique icon for him. For example, he needs me to design an "Error" icon for a document.

Initially, he suggested putting an X in a page icon to indicate that the document type was not supported, or that the article was not downloaded successfully. The icon in his head looks like this:

It's not bad, is it? To be simple, I removed some elements and changed them:

However, I also admit that it needs to be improved because it's not like an icon specifically designed for a document to load incorrectly.

　　Ii. adoption of a global approach

We need to consider the setting of the icons as a whole, so we took a couple of other icons as inspiration.

"What about this warning icon?"

We think, because it's actually already being used in a lot of pages, and people can easily understand what it means.

When we want to design an icon, be sure to consider how other icons of the same type are designed. Otherwise, you are likely to use the meaning of graphics in other icons have been used heavily, the expression or another meaning, then your design will have ambiguous.

　　The simpler the better.

After that, we thought of drawing a big triangle in a document icon, like this:

However, experience tells me that it is too complicated. Its moral is not so direct that people can't see what it means at a glance.

　　Iv. Consideration of environmental factors

After that, I suggested that we should use a big X to contain the icons inside a circle, like this:

But this is not advisable, because the message conveyed by this icon is dangerous. This icon expresses too much meaning.

What I want to say now is that you need to consider the environment color. Color and visual magnitude are an important way to transfer images. For example, red is often used as a warning, and light-colored, such as Gray, appears more neutral. If you use neutral color to express, then you can appropriately express the meaning of the icon.

　　V. Understanding symbolic elements

Symbolic language is a kind of communication, which is also a very important part of web design.

For example, decorative fonts are more feminine, while hand-painted fonts look more childlike.

What kind of meaning do you want to express with your icon?

For example, this error icon does not create too many scary elements.

I remember this icon often appears when my network is paralyzed, they are perfect. The meaning is not too much, just the appropriate to tell the user wrong.

Let's say this is more direct:

The following example comes from the Chrome browser, which is the perfect representation of the icon I need. Slight, accurate, telling the user that something went wrong. This icon, in addition to the white line, is gray, allowing users to understand the seriousness of the problem, but not too much to make people feel panic.

The last icon expresses a simple message, but delivers the most accurate information.

　　Conclusion

The art of using icons requires a little good eyesight, but also a little design experience. But it can also be built on several of the principles we discussed above. If your icons are too vague or use the same visual cues, consider the five points mentioned above.

Category:

• PS Getting Started Tutorial
• PS Icon Production Tutorial