7.2 KiB
| order | title |
|---|---|
| 5 | Illustration |
Project background
The graphic is the key element of brand identity. It is ubiquitous in Internet products and offline materials. Different from the copy-writing information, graphing can directly describe the inherent information and shape the emotional background, which makes users more immersive and empathetic. Graphic improves the user experience of products and helps achieve business goals at the same time. The graphic style could be complex and the illustrator’s style could be obvious. It is difficult for different designers to unify their styles in the graphical work coordination. On the other hand, there is also a certain risk of simply having just one illustrator to complete the graphics of all the work. Therefore, the graphical system is particularly important in maintaining brand consistency, improving work efficiency and avoiding risks.
Design principles
From the bottom design values to the top design methods, HiTu follows Ant Design's design idea of ETCG, making graphical assets into components, which can be divided into templates and combined into cases. It provides strong flexibility and customization for design values.
HiTu pyramid model
Based on the four-tier brand strategy of science, technology, certainty, nature, and the future, we make the abstract concept embodied. Technological capability offers more possibilities for products, experiences, and the future. So the legends are in one-to-one correspondence. We embody the relationship between characters and products, experience and future. Different combinations of them can meet different demands of business scenarios.
Color
HiTu Color Swatch
The color matching system of HiTu is based on the Ant Design color palette, which is different from the application of the UI color system. The graphical color matching system will be more flexible. Based on Ant Design's basic color palette, we have adjusted the lightness, expanded the tolerance of graphic design, and made the selection more efficient and easy to use. Because the color system is from Ant design, it is perfectly compatible with other UI assets.
HiTu default asset color
Through research, we found that blue and white will account for a large proportion of the use of illustration colors in enterprise-level products. We chose the most technological blue in the palette as our main color to represent exploration.
Based on Adobe color's Ternary color tool, and 3D stereo mosaic ball, combined with our own HiTu color palette, we can easily get the basic color palette of our default version.
Design assets
Character component
Based on the design principle of nature, we do not recommend the use of cartoons and exaggerated artistic design style. In contrast, the style close to the proportion of natural human heads is more recommended.
Meanwhile, we combine emotional design to design 9 kinds of common occupational roles. With some characteristics of the profession, we also give them different characteristics to meet the use of various business scenarios.
With the basic character design, we split the characters, and then match the designed skeleton system to increase the reuse and extension of various postures and actions for the characters. Element components.
Element component
Memory comes from being different, and professionalism comes from being uniform. Element components refer to some business elements in business scenarios. The world of 状态元素图形化 is colorful and changeable. We hope to keep unity without limiting the creativity of designers. In the design of element components, in order to maintain a certain sense of rhythm, we recommend that designers draw components in a 1024 * 1024 grid, and make the size of the rounded corner a multiple of 8.
Design application
With rich asset components, how should we use them? In HiTu's user guide, I recommend that designers build a Z-axis space concept in the process of using assets, and divide the whole image into three levels: foreground, midrange, and background. When the components are arranged, the foreground highlights important elements (such as people, core element components, etc.), the environment is explained in the midrange, and the background is used to render the atmosphere. In terms of color use and transparency, the foreground also has the highest saturation and transparency, which is gradually reduced.