Ten Tips for Designing Icons

Visual Design nine thousand and fifty-six 13 years ago (2011-04-07)

Summarize the characteristics of something into Icon It is a very meaningful thing. It is not easy to recognize the characteristics of things at a glance. Especially when the design requires 48X48 pixels, how to make it as clear as 256X256 pixels.
An unforgettable and metaphorical icon is beautiful, symbolic, meaningful and functional!
Ten suggestions on how to create excellence icons:
1、 Snap to the characteristics of an object
The most important thing about Icon Design is whether users can recognize an icon immediately when you design it.
Whether it is a frog or a pencil, the recognition of the meaning it expresses must be clear at a glance. It must have classic metaphorical features.
In an icon tutorial in a magazine, icon masters Vu (Scrape. SK) and Min Tran (Frexy. Com) discussed their behind process on pencil graphics:
"Icons need to highlight the most typical characteristics of the object to express the concepts and details it expresses.
As you know, pencils generally have three choices:
1. Prismatic pen body, Guan Ze glaze coating
2. Prismatic pen body, tail eraser, white metal ring
3. Cylindrical pen body, no eraser
We choose the second one because it has the necessary elements that users need to recognize more easily.
Sometimes, some objects are more complex or simpler. You must list their characteristics and draw specific images.
Erasers and white metal rings are the characteristics of pencils, making them "classics" to express the image of pencils.


2、 Make the icon simple and universal so that it can adapt to a series of projects
For icon designer DryIcons, the key to designing icons is to make icons as simple as possible. Aim for a style and goal. This helps software developers to use icons more flexibly and increase the usability of icons.
If your icon has a wider range and can be used on the home page or other places, its potential market will be larger.
"As for the trend, we think it is very important to keep the icon simple and basic features, and we follow this trend" - DryIcons


3、 Use consistent lighting
A particularly useful skill: when you design a series of icons, you should not only be consistent in style, but also pay attention to details such as "light source". Although this is secondary, it will affect the overall texture of the picture.
In Windows Vista, icons have different light sources in the operating space. However, the icons of each unit are consistent.


4、 Create an icon in vector format (Argument 1)
Icons are usually used within a size range, so create a vision Excellent effect can be scaled vector graphics, can have a variety of uses. (PS: After zooming to the required size, pixels will wear out, so the path needs to be adjusted to be accurate to each pixel)
When you need different sizes, vector drawing allows you to avoid redrawing. (PS: vector drawing software includes Photoshop , Illustrator, Fircworks, CorelDraw, Xara Xtreme, etc.)


5、 Do not create icons in vector format (Argument 2)
On the contrary: vector drawing is not the best method for icon designers (PS: I usually use it in combination). Because many icons need very small sizes, vectors often cannot be well presented, so they must be redrawn within the specified size (my understanding is that the layers are complex, pixels are used when drawing, and when changing the size of multi detailed icons, it is not necessary to redraw)
W UI Design According to Firewheel, bitmap vs vector
"When you reduce the original 24X24px vector image to 16X16px, there is a way to evenly distribute 24 pixels to 16 pixels? The answer is no, if the image is blurred, there is also no way to evenly expand 24PX to 32PX.
So when you expand the 24X24 pixel image to 48X48, you will no longer have a clear pixel line, they are all blurry transparent Two pixel lines of. "(About small icons: Tencent QQ, Renren Home Page, Jodanfc, R.sky, Dlacksmail and other designers' works are very good)


6、 Pay attention to cultural differences
The classic example of Turbomilk is that different countries have different mailboxes
”Another important aspect of icons is that they have national characteristics. Different countries have different cultural traditions, environments and gestures. “——Turbomilk
Special attention should be paid to: the basis for designing warning icons and traffic icons is different in each country.


7、 Use different color combinations
If the icon's color is very ordinary, it will be ignored. The way for icons to stand out is to use great color combinations and interesting shapes. Remember, icons are very harmful to display in a single background, so they need to stand out. In addition, they can also use more luster and appropriate shadows to make it as attractive as possible.
What is a good icon design?
Good icons need two good foundations: 1, shape 2, and the use of color.
I think it is necessary to add its color and texture on the basis of drawing a perfect figure.
As shown in the figure below, you can see that it has a basic shape and uses multiple color combinations. If you make a blue circle, it will not stand out.


8、 ICON design, from large size icons to small size icons should be equally good.
How to make the icon larger, but clearly displayed at different resolutions?
PS: Draw various sizes at one time. The standard sizes are 102451256128, 56, 48, 32, 16. Make them as needed without having to frame them. When drawing different sizes, you can scale the most basic shapes, align pixels, fine tune them, and then paint texture and details again.
Large icons mean a lot of details. Designers with rich graphical user interfaces will draw various sizes one by one. If the size limit is removed, it means that icons of many sizes will look fuzzy. The most frightening thing is that icons are below 32PX.
PS: When drawing small icons, unnecessary details should be omitted. At 16 or 12 pixels, you can use the front view. As long as you can see the metaphor, you don't need to be the same as the large icon.


9、 Plan your design process carefully
It is very important to plan the process from idea to idea on paper (establishing paper prototype) to make it meet the needs of metaphor and project, and then to software drawing to determine its size.
At first, I always draw on the whiteboard. I try to draw good icons and clear metaphors. I outline different ideas. All kinds of ideas always cover the whole whiteboard. When I come up with a good metaphor, I start to draw the parts and composition of the icon. What angle do I want to use to express it? I search Google images for all available photos, Then I draw the picture according to my own ideas until I know the ideal. Then I draw the path in PS and search for the picture, which can help me get the idea of texture and shape. If I can, I always try to get inspiration through physical objects.
PS: Me too. When you have physical photos, you can better master the details, texture, texture, etc. of icons. life Pay attention to observation. I will carefully observe every place I go to see if there are any interesting objects, structures, textures, etc. that can serve my design, and then take photos.


10、 Create an interesting and metaphorical icon
Icons are meaningful graphical symbols, so meaning is a key point that affects user behavior.
The following is a team's discussion on the meaning of an icon set. One person's ideas are limited, so for some icons that are difficult to display, it is necessary to brainstorm and communicate according to customers, rather than directly let an icon designer immerse himself in the design.