search icons is not a big problem for designers. Not only are there a large number of websites that provide free icon downloads, but it is not a big deal for designers to modify and design themselves. However, this involves a very realistic issue.
is not difficult to find the dozen or so icons commonly used. They all grab a lot of them, just like the icons of "Settings" and "Edit". However, there are many icons that are unique to specific projects. It is unlikely that you want to find one that can be used in the general icon collection. It would be embarrassing if you find a theme match in other places, but cannot maintain consistency in style. You can't just use it, right? That's so easy to get out of the show.
When you look at these icons alone, you may think that it is okay to watch them alone, but it is not so suitable to put them together.
So how can I summarize and integrate icons from different UIKits into a set, and even make icons from different places and sources such as websites and apps into a consistent and pleasant design?
1. Among the many information conveyed by the color
icon, color is the most intuitive one. Unify icons from different sources first in color, such as using the same color.
Although it is convenient to use a single color, if you can use the existing color scheme to unify the icons, the effect will be even better:
If you really like the icons you found, but their colors are different, you can adjust them yourself first, or find a professional icon designer to help you. It is worth noting that the sharing license for most materials includes editing authorization, and you can change colors and sizes.
2. Style
simulative design and flat design have been going on for many years. At present, flat design is the mainstream, but I don’t know how long this situation will last, because today’s flat design contains a lot of simulative design techniques and elements. It is hard to say what will be popular in the next 5 to 10 years. Fashion and fashion are just that.
What I know is that you have to pick a style. Either flat or simile.
Look at this set of icons, the color scheme is the same, but the style is not the case.
Mix and match flattening and simulant design styles together will inevitably lead to messy interfaces.
However, under the big style setting, designers still have enough choices. For example, among the flat design styles, iOS's Apple Human Guideline and Google's Material Design are both very typical flat design style design specifications. Both are very strict in terms of details and style control, and even specific to the thickness of each line:
design new icons based on those system-made icons specially customized for specific operating systems, which is actually the most reliable way. These design specifications accepted by designers guide the work of many designers in daily design.
Therefore, it is most important to keep consistent in color and style. In addition, there are some subtle and noteworthy details that require the designer to pay special attention to. Because the design of these icons has become classic, heavy users and experienced designers can tell the details of the icon that are not fit enough at a glance. Therefore, designers often hear feedback: "I don't know what's wrong, I just think it's wrong."
3. Perspective and perspective
The five icons under
are also quasi-physical. In order to unify, I adjusted their colors slightly and looked more consistent. But no matter how they adjust, they look like icons for 5 completely different applications (in fact they are).
If you place these 5 icons in accordance with the perspective view, you can clearly see that the perspective and position they are in are completely different.
They are scattered in different positions in the perspective view and are obviously inconsistent, which completely violates the consistency of the icon design. The
icon should look like a part of the entire interface, and the relationship between them is equal, and the same relationship should be maintained in both visual and perceptual manner.
4. Shadow
In the design of shadows, this consistency should be maintained between icons. Take a look at the two icons below:
These two icons originate from the same set of icons, but it seems that only one icon is shining by the sun. The direction of light is also important. Therefore, if you want to keep the icon consistent, it is best to keep the icon consistent in the lighting angle.
Tips: Although shadows are mostly considered to be used in simulative designs, in fact, shadows are also used in flat design styles including Material Design. So in principle, it is widely used and designers need to maintain consistent design.
5. Visual weight
icon gives people a sense of size, density and weight, which is what we often call visual weight. In the same set of icons, the visual weight of the icon should be kept to a very close level.
Look at the following two icons:
When you squint your eyes and perceive the color blocks formed by these two icons, you can more clearly compare the visual weight of the two:
The difference is indeed very large. This example looks very extreme, so let's continue to find some other cases to compare:
In terms of visual weight, the above set is obviously unbalanced, and you just need to squint and squint to judge it quickly.
6. Details
The devil hides in the details. However, the types of devils hidden in the details are still very diverse, so we might as well expand on this topic.
1. Repeated elements
Sometimes, designers will add some consistent, repetitive elements to ensure that the icon looks unique enough.
Look at the group of icons below. Some pixelated elements will be added to the lower right corner. Each icon has it and is different. The same is true for this set of user avatar icons:
duplicate elements, the focus is on the consistency of repetitions.
2. Number of details
Another case is inconsistency in the number of details. This inconsistency will disrupt the overall consistency. In short, this set of icons should be balanced in complexity, otherwise, users will find it difficult to judge the attributes of each icon due to chaos.
Conclusion
As I said at the beginning, if you want to incorporate different icons into a system, the main goal of the designer is to ensure consistency. Experienced designers will optimize icons from various angles and attributes. Today's article has sorted out all potential issues that need attention. Only when the icon design work is done well can the interface design be smoother.
