Today, what we bring to you is how to establish the designer's personal illustration component library. Because the content is too long and there are too many knowledge points, please watch it with a cup of medlar.
Three questions about personal illustration component library:
1. Why build a personal illustration component library?
In fact, the main purpose is to provide a design axis for our illustration. We can create more efficient and standardized illustration content around this axis, evolve more illustration styles, make us more comfortable when using illustration, improve efficient design output, and derive more component-based operation design and brand illustration component library. (Note: according to the following steps, the illustrator can learn it easily!)
2. What is the difference between brand (product, project) illustration component library and personal illustration component library?
Specification differences:
Brand illustration component library: many detailed specifications will be made before the component brand illustration library, such as color specification / scene specification / light specification / joint detail processing / scene element processing, etc;
Personal illustration component library: in order to make our illustration more flexible, we will not make too many specifications when making the personal illustration component library. Instead, for the derivation of illustration, we should pay more attention to character structure, proportion, small components, etc. The purpose is to establish a personal illustration axis. (Note: the personal illustration axis is aimed at the prototype of the first illustration system. Our later illustration style derivation will refer to the prototype of the first illustration system, which will be explained in detail later)
Service efficiency:
Brand illustration component library: it is more efficient to use, and the components can be replaced by dragging in;
Personal illustration component library: because we adopt the method of continuous iteration, when we just established the personal illustration component library, our component replacement efficiency is relatively low, but in the gradual iteration, our use efficiency will gradually improve.
Expansion:
Brand illustration component library: because there are many normative constraints, the expansion force is weak, but it is enough for its own brand. It itself serves its own brand;
Personal illustration component library: from the perspective of the hierarchical division of our illustration component library, it is originally for derivative expansion, so it has strong expansion power. It can not only derive the same type of illustration style, but also derive different types of illustration situations. It can even create a separate operation design component library based on the personal illustration component library, Or upgrade to brand illustration component library.
3. Who should build a personal illustration component library?
I think UI designers should be established most. Many of our online banners, function pages, launch pages, posters, etc. can be designed with illustrations. Whether it is for private work in the company or for yourself, it is a powerful tool to enable you to efficiently complete the tasks of Party A, Ensure the unity of design and the quality of output to a greater extent. (I'm sure you've all met the time when you look for illustration materials everywhere to put together banner. You don't have to worry about having a personal illustration Component Library)
Of course, in addition to UI designers, illustration designers, graphic designers and artists can also establish illustration component libraries. However, it still depends on the different design contents that everyone is exposed to. Some designers rarely touch the illustration part, or rarely touch the illustration that can be componentized (such as complex material and hand-painted illustration), Therefore, there is no need to establish an illustration component library.
How to build a personal illustration component library?
If you want to establish a personal illustration component library, you should consider its essential characteristics. The personal illustration system has three characteristics: reusability, strong adaptability and high efficiency. Then I will focus on these three points to explain how to make the UI Designer's personal illustration system.
1. Design in the direction of reusability
Reusability is a foundation of illustration system. If the problem of reusability cannot be solved, it is meaningless to be a personal illustration system.
If we want to achieve the reusability of illustration, we need to split the illustration content differently, and take the replaceable parts as a reuse style, so that it can replace different components. My solution has five steps:
Step 1:
Set basic character components (limb details, shape proportion) and standardize component content. If you are making the character component for the first time, you can find more reference content on the Internet:
The following figure is a basic character component case I made:
From the perspective of character components, I divide them into 9 small pieces: head, upper body, upper arm, forearm, palm, hip, thigh, calf and sole.
From the perspective of character proportion, the proportion of men is 10a, men are slightly higher, the upper body is broad, and the whole is strong; The proportion of women is 9a, slightly shorter than men, slender and slim. Whether male or female, the whole body structure is simple and conventional, in line with the proportion of real characters, which is conducive to the later component transformation. (for the first illustration component, it's best to use the conventional scale. Why do you do this will be mentioned later)
The division of character components is not fixed. You can refine it into 9 parts or 7 parts. If it is divided into 7 parts, the upper arm and forearm will be integrated into the arm, and the thigh and calf will be integrated into the leg. How to component depends on the characteristics of the illustrator character you design.
In addition to men and women, you can also build more characters, such as the elderly, children, babies... The more characters, the larger the follow-up extension space. In order to make the illustration component library faster in the early stage, you can first establish 1 to 2 characters, and then gradually improve the iteration.
Step 2:
For the dynamic extension of later characters, we can use character components to formulate some high-frequency basic dynamics of characters, such as standard standing posture, sitting posture, running, etc., so as to facilitate the extension of our illustration, as shown below:
Doing basic character dynamics can save us a lot of time in the later illustration design. For example, when we need to use running dynamics in our work, we can directly use the running actions in basic character dynamics to add character details, which will save a lot of working time and improve work efficiency.
Step 3:
With the foundation of character components, we can start designing the style of illustration.
Before design, we can refer to other people's illustration style. The style here mainly refers to the processing methods of illustration, such as color selection, expression processing, clothing material processing, curve and straight line selection, etc.
What we need to pay attention to is that when establishing the first illustration system, we can first make a simple style, which is not only easy to adjust the components, but also conducive to the later style derivation. The following is the simple basic style I added for the characters (features: solid color / fully designed according to the character components / no gradient):
Step 4:
Design character components (you can apply different actions / clothes / expressions / skin colors in different scenes)
- Hairstyle:
In terms of hairstyle, we can distinguish some characters, which can be applied to different scenes. For example, men, the first is applicable to the company scene, the second is applicable to students, and the third is applicable to soldiers
- skin colour:
The main reason for the change of skin color is to adapt the illustration to internationalization. People with different skin colors can be added to different scenes.
- expression:
The expression is to better reflect the character's state in the environment. For example, when receiving a red envelope illustration, the character's expression should be happy or laughing.
- Angle:
From the perspective of illustration, we use the most commonly used: front, half side and front side to make it more adaptable in illustration.
- Texture:
At present, we have designed six basic textures, which can be set not only in clothing, but also in auxiliary elements and background.
- Clothing:
In the whole character component, it is divided into three replaceable clothing components, including upper body, lower body and shoes. For example, the upper body can be replaced with short sleeves, long sleeves, guards, vests, etc. at the same time, the next level can also replace clothing texture, clothing action and clothing color.
Combining the above character components, we can combine various actions as follows:
Step 5:
- Design common component library:
The elements in the general component library should be expressed in black, white and gray at first, because there are great differences in the use of elements in different scenes. For example, the flower pot as a close-up element will have many details, and as a perspective element, it may only be used as lines. These expressions can be added to its child Library in the future, This allows us to use the component library more flexibly and is also conducive to our iteration of the component library, which will be explained one by one later.
After these five steps, our reusability illustration will be completed. Next, let's look at the application effect:
We can see that the following four scenes apply different scene processing methods. For example, the first group is background gradient; The second set of background uses a large area of solid color; The third group of background was expressed linearly; The fourth group was expressed by light color surface.
This is also a big difference from the brand illustration component library. Although they are reusable illustrations, most of the brand illustration component libraries use existing and standardized ones, and our personal illustration component library can add different illustration representation forms with the same auxiliary element, and constantly iterate sub levels. The more sub levels iterate, the higher the content selection, Later, it can be directly dragged into use. For example, the plants in Figure 4 have two states. The first is to display some colors, and the second is directly gray. (Note: it will be explained in detail later)
In the following activity pages, the background elements can also use the same method to retrieve the desired individual illustrator elements in our background component library, combine them into the background of the active page, and get the different background combinations once again. The following three kinds of background combinations can be replaced each other.
2. Make your illustration highly adaptable
Strong adaptability means that our illustration system can match most products. Because the personal illustration component library is made as a designer, we will face various products, and the styles of various products will change differently. To solve this, we can use the following three methods:
Method 1: change the character structure
For example, when you want to make some illustration function pages or banners for product a, you find that your existing first set of illustration component library does not meet the product characteristics. Product a wants to express more exaggerated elements, and our illustration system shows more softness and the public, which is completely mismatched. Then we need to change a basic point, that is, the character structure, We can get the desired exaggeration effect through the reorganization of character structure. Then I will give a comparative diagram of structural reorganization for men and women, as follows:
In order to maximize the effect of exaggeration in the body structure, we have made major adjustments to the original body structure without moving the original 10A ratio. Men: shortening of the upper body, extension of the lower body and protrusion of hands and feet; Women: the whole is stronger, hands and feet are enlarged, and legs are lengthened.
If they are shown in the same illustration style, the following effects will appear:
When you are making character structure adjustment, you will find how important it is to have a conventional human body structure as the basis for design, that is, why the first version of illustration components mentioned earlier let you do conventional, because if it is not the conventional human body structure, the adjustment will be very boring and difficult to have reference significance.
Method 2: change the illustration style
In addition to the character structure, we can also consider more illustration styles to adapt to different products through different illustration styles, such as line and surface / gradient / variegated / minimalist... Similarly, I give an example for men and women, as follows:
After changing the style in the above figure, the male style is more inclined to the expression of lines and bright colors; Women's style is simple and direct, and pays more attention to highlighting the collision of color matching.
Method 3: change the character structure and illustration style
In the above two methods, in addition to the existing basic character structure a and illustration style a, we also get character structure B and C and illustration style B and C. if we combine character structure B (or C) with illustration style B (or C), we can form a new illustration state.
In this way, we can gradually add our own illustration system. If your illustration system has 5 groups of character structure and 5 groups of illustration style, you can combine 25 groups of different illustrations. In this way, your illustration system has strong adaptability. Even when you want to make an illustration system for your products, you can greatly refer to your personal illustration system, Of course, all this needs to be added slowly through iteration.
3. Use software to standardize illustration component library (detailed explanation of levels) to improve application efficiency
In order to better replace components and improve the efficiency of output, we can use software to manage illustrations from the beginning. There are a lot of reusable software available on the market. Here I will explain how to use sketch, which has the highest application rate.
First of all, let me tell you about the composition of my illustration component library. My illustration component library is divided into five blocks: character component library, unconventional character component library, animal component library, auxiliary element component library and auxiliary background component library. These five blocks are also subdivided into many small levels. I will analyze the levels I use one by one.
We can see from the above figure that from the style classification to the smallest component, the most layers I use are 5.
If you are a little confused, let's take an example from level 1 to level 5:
Style Classification (a) - angle classification (front side) - four components (lower body) - action (b) - color (b)
What is used here is the "set in set" in the sketch reuse style. The component method of "set in set" seems complex, but it is actually quite simple, and it is exchanged in the software in large components. Because it is not explained by the software, it does not bring in too much software knowledge.
When making, we don't want to make many small components at one time. For example, when you want to make an expression, you want to do more than 10 and 20, which are all included. In fact, it's not necessary. I personally recommend that you make 3-5 commonly used small components at the beginning. Because the component library needs to be continuously added and optimized, it can be continuously added in subsequent work applications.
With the hierarchical division, we can use sketch's reusable style simple and efficient standard illustration component library. It is also very important to cover the content of replacement components, as follows:
Unconventional character component library
In addition to the conventional character component library, I also listed the unconventional character component library separately. This kind of component library mainly acts on the special action forms of characters, such as the following three Perspective illustration action forms. Many of these dynamic and conventional illustration component libraries are not interconnected, such as the angle of face, the angle of shoes and the perspective size of body, So we'll list an unconventional character component library for him alone.
Both are component libraries, and of course there are replaceable contents. The hierarchical logic of the unconventional character component library is different from that of the conventional character component library. The conventional character component library uses small parts to replace character actions, but the unconventional character component library first replaces the overall actions, and then can replace small components, which is also its special management. (Note: I don't want to abandon it and make greater adjustments for it, so I let it stand alone.)
According to the setting of unconventional component library, let's give you a small case:
As can be seen from the above, I can replace the expression, hair style, texture, upper body and lower body in this Perspective illustration figure.
Animal component library
The animal component library I made here is used to assist characters and reconcile scenes, so it will not be very detailed in hierarchy. It can meet my daily illustration needs. Of course, if you want to make the action component library very detailed, you can refer to the hierarchy of character component library.
According to the level of animal component library I use, let's give you a correct small case and an error small case. Let's look at the error small case first:
It can be seen that the following figure (dog) is a very rough animal component library, which can only replace actions and animal actions. When dog is selected, dog has no other component options except changing actions. Although I want to simplify the animal component library, nothing can be replaced.
Next, let's look at the correct case:
We can see that there are many components to choose from in the cat's state, which can not only replace the cat's actions, but also replace the display form (the display form is differentiated according to the scene, of course, other methods can also be used), the cat's expression and the cat's color. Such an animal component library can fully meet my design needs.
Auxiliary element component library
It's best to add scene categories at the level of auxiliary element component library, because we often encounter that the same element reflects different scene categories in different products. If we don't distinguish them, it will hurt our brain when selecting components. Experience and strong requirements.
For better understanding, let me give you a small case:
We can see that I can switch not only the elements, but also the scene and color. As for other small components, I don't need them, because they are enough to meet my daily operation and design needs. This hierarchical division is simple and practical, which is very recommended.
Background element component library
The background element component library is divided into two types: combined scene background and texture background.
- Combined scene background:
The combined scene background is pieced together with the auxiliary element component library. It is a complete scene that can be used directly. If the components to be replaced can be replaced in the auxiliary element component library, they can also be replaced in the background component library. (Note: this involves the reorganization and transfer of component library, which will be mentioned in detail in the subsequent articles)
The above illustration changes from day to night, which can be easily completed by using the component library, and these component libraries are not made now. They are all extracted from the auxiliary element component library, that is, the background of the combined scene I call is pieced together with the auxiliary element component library.
You can find that the small house on the illustration Zhongshan can replace all the colors with only one component, while the trees on the left and right sides need to be replaced six times. The reason why the trees need to be replaced many times is that there is no reorganization. If you want to replace the same elements, it is recommended to reorganize the components and optimize the level in the process of replacement.
- Texture background:
The texture background is the simplest relative to. There are only different styles of textures in it, and only colors can be changed.
How to integrate character illustration component library into operation design?
1. Create common operational design specifications
Before doing the design, we must first do a good job in the specification of operation design, so as to facilitate the insertion and application of component library.
Let's take the card pop-up window as an example: we determine the card content before making the design. When the content is determined, the card operation design specification is carried out according to the content:
We should note that the preliminary specification does not need to involve any font, nor does it need to list the size specification of illustration. We can implement it step by step in the later design.
2. Two methods combined with operation design:
When the specification is completed, we can use the specification to make the corresponding component library, which can be divided into the following two methods according to different situations:
Reorganize component library (without character dynamic components)
In some operation designs, if the character actions we want to use have not been done before, we need to redesign the character actions. After the design, drag the character components that can be reorganized into our current components for reorganization, which can be carried out in the following steps:
The first step is to make the design content of the card according to the specification of the card, as follows:
The second step is to divide the designed content into sections to facilitate the hierarchical division of component library. Here I divide them into four blocks: text component, character component, auxiliary decoration component and background element component.
The third step is to divide the small components under the large plate. By combining the small components, we can get the level of our component library, as shown in the figure below:
In the widget, many of them are the original contents in the personal component library. At this time, we can drag them in for reorganization.
If the elements you replace are not enough, you need to design them manually, which can in turn expand the content of your total character component library. In fact, the content of the component library is added in such a little iteration. When the content of your component library is more and more, your design cost will be lower and lower.
After three steps, we will integrate the component library into the operation design and have a new sub level operation design component library.
Direct replacement (in case of character dynamic components)
If you have all the operation contents in the component library, you can drag them directly according to the specifications, and there is no need to reorganize them.
summary
In general, the establishment of component library is a huge project. When you have the infrastructure, you should slowly fill it with more content. When you have enough content, it can provide you with more convenience in reverse. It is your unique and valuable design resource library.
Because there are too many contents in this issue, I will take another time to summarize the application of illustration component library, common module component cases of operation design, reorganization skills and the establishment of brand illustration component library. (it takes too much time to make a case. I hope you will understand)
I have provided you with some reference files of component libraries, including complete sets of component libraries (sketch), complete sets of illustration pictures, publicity animation, and some reference pictures (composition, expression, hairstyle, etc.), which can be downloaded from the attachment.
Welcome to WeChat official account: "black lion power".
