Quickly generate illustrations

Reprinted from
https://github.com/ant-design/ant-design/blob/master/docs/spec/illustration.zh-CN.md

problem ： The hare is open source , But can it be used commercially ？

---

Project background

Graphics is the key core element of brand recognition , In Internet products , Offline materials are everywhere in use . It's different from simple copywriting information , Graphics can visually describe the inherent information and shape the emotional background , Make users more immersive and empathic . Improve the product user experience while achieving business goals . The graphic style is colorful and complex , The illustrator's personal style is obvious , Different designers work together in a graphical way , Style is hard to reproduce , There are also some risks in simply having an illustrator complete the graphics of the overall business . Therefore, the graphical system is to maintain brand consistency and improve work efficiency , It is particularly important to avoid risks .

Design principles

From the lowest design values to the top design methods ,HiTu Followed Ant Design Of ETCG Design idea , Componentize graphical assets , It can form a template , Together, you can make a case . Provide strong flexibility and customization for design value .

HiTu Pyramid model

Based on Technology , determine , natural , Future four tier brand strategy , We concretize abstract concepts . The technological capability of the underlying technology represented is the product , Experience and future provide technical support and possibility . So the legend corresponds one by one , We visualize people and products , The relationship between experience and future . Different combinations between them can meet the demands of different business scenarios .

Color

Sea hare palette

The color matching system of the sea hare is based on Ant Design Scene application of color palette , And UI The application of color system will be different . The graphical color matching system will be relatively more flexible . be based on Ant Design We have adjusted the lightness of the basic color palette , Expand the tolerance of graphic design , It is more efficient and easy to use when using and selecting , Because it comes from Ant Design Color system , And others UI Assets are perfectly compatible .

Hare default asset color

Through fund search and research , We found that in enterprise products . The use of color is blue , White will account for a large proportion . We selected the most technological color palette , And represents exploration , Geek blue is our main color .

be based on Adobe Color Three element color selection tool , and 3D Three dimensional mosaic ball , Combine our own rabbit palette . You can easily get our default version of the basic color palette .

Design assets

Character component

Design principles based on nature , We don't recommend using Q Cartoon version and exaggerated artistic design style . by comparison , The style close to the proportion of natural human heads is what we recommend .

meanwhile , We combine emotional design , take 9 A common professional role for character design . Combine some characteristics of the career itself , We also gave them different temperament and characteristics , To meet the use of various business scenarios .

With basic character design , We decompose the characters , Then match it with the designed bone system . To increase the reuse and extension of various postures and actions for characters .

Elements of the component

Memory points come from being different , The sense of professionalism comes from uniformity . Element components refer to some business elements in the business scenario , The graphical world of state elements is colorful , We hope to maintain unity without limiting the creative space of designers , Element component design , In order to maintain a certain sense of rhythm , Recommend designers in 1024*1024 Draw components in the grid of , And the size of the fillet remains 8 The multiple relation of .

Design application

With a wealth of asset components , How should we use ？ stay HiTu In the design and use guidelines of , I recommend that designers build in the process of using assets Z Axial space concept , Split the whole picture into foreground , There are three levels of medium shot and background , When discharging components , The foreground highlights important elements （ As a man , Core elements, components, etc ）, Explain the environment in the middle , The background is rendered to set off the atmosphere , In the use of color and transparency, the saturation and transparency of the foreground are also the highest , Step by step reduction .