Style development 2D illustrations for EPAM
T A S K
Design a 2D vector illustration style for the company’s internal and external products. Create a set of elements for the library, as well as a guideline for further integrating illustrations into products without the participation of an illustrator, but only with the help of experience designers.
1
ILLUSTRATOR
worked on this project
worked on this project
11
MONTHS
of work took the development of style, elements and guide
of work took the development of style, elements and guide
400+
ELEMENTS & ILLUSTRATIONS
was created in 11 months of work
was created in 11 months of work
Conducting a competitive analysis of large IT companies in the international market, I realized that the world of illustrations is in trouble … Yes, there are a lot of incredibly cool illustrators, there are insanely many strong works. But I could not find a good and clear case or process by which the style of illustrations for companies was developed. How it happens now: an illustrator is hired and he just draws. It’s all. I was faced with a difficult task: to understand what processes should be followed when developing a style and how to arrange and convey all this later, so that any designer in the company could competently use it on his project or another illustrator.
Apollinaria Manko
Product Designer, Illustrator
Steps of 2D illustration style development
01 STEPS
01 STEPS
Competitive analysis
(qualitative and quantitative)
(qualitative and quantitative)
02 STEPS
02 STEPS
Moodboard
creation
creation
03 STEPS
03 STEPS
Pencil
composition sketches
composition sketches
04 STEPS
04 STEPS
Character development
in different styles
in different styles
05 STEPS
05 STEPS
Digital sketches
with different character styles
with different character styles
06 STEPS
06 STEPS
Finishing the illustration
in three styles
in three styles
07 STEPS
07 STEPS
Creation of a small illustration
in three styles
in three styles
08 STEPS
08 STEPS
Creation of the first illustrations
in the selected style
in the selected style
09 STEPS
09 STEPS
Developing elements
for the library
for the library
10 STEPS
10 STEPS
Guide
development
development
11 STEPS
11 STEPS
Creating a series
of illustrations
of illustrations
Competitive analysis
At one of the first stages, it was decided to conduct a competitive analysis based on top international IT companies from different industries: Linkedin, Facebook, Dropbox, Tilda Publishing, Atlassian, Etsy, Google, Mail.ru, Flo. There were two types of competitive analysis: qualitative and quantitative.
Selection of illustrations for qualitative competitive analysis
During the competitive analysis, a large selection of illustrations from each company was collected. I also studied articles and video presentations in search of the best approach to creating and developing a corporate style for illustrations. Much to my regret and surprise, I could not find a good example of consistent work on the development of stylistics for large corporations.
Moodboard creation
At this stage, the task was to create a mood board, dividing it into several large categories. Since future illustrations accurately assumed the presence of characters, of course, the mood board consisted of categories: faces, arms, legs. I also collected works of various styles, looking for geometric textures, abstract backgrounds, plants. Below is a small part of the mood board.
Create a pencil sketch
To create the first compositional pencil sketch, an existing story illustration was selected from one of the company’s current internal products. Objective: to radically improve the plot and compositional lines. After drawing up a small association map, three very primitive sketches were created with different compositions. Further, each of these sketches was worked out again in pencil, but in more detail.
01 SKETCH
STARS (RATING), LAPTOP, REVIEWS, PROGRESS BAR, LAPTOP WORK IN THE PARK.
STARS (RATING), LAPTOP, REVIEWS, PROGRESS BAR, LAPTOP WORK IN THE PARK.
02 SKETCH
STARS (RATING), LAPTOP, FEEDBACK, PROGRESS BAR, LAPTOP WORK, BROWSER WINDOW, DESK.
STARS (RATING), LAPTOP, FEEDBACK, PROGRESS BAR, LAPTOP WORK, BROWSER WINDOW, DESK.
03 SKETCH
LOUDSPEAKER, LIKES, PROFILE, STARS (RATING), LAPTOP, FEEDBACK, PROGRESS BAR, LAPTOP WORK.
LOUDSPEAKER, LIKES, PROFILE, STARS (RATING), LAPTOP, FEEDBACK, PROGRESS BAR, LAPTOP WORK.
Character development in different styles
I mentioned above that illustrations should definitely include characters. And in fact, in most of the illustrations, they occupy the main role and the plot is built on their basis. Therefore, it was decided to start developing the style of future illustrations with the creation of a character.
Selected compositional sketch for further elaboration
In parallel with the creation of stylistic options for the character, composition sketches were drawn for the same illustration. Below is the selected version of the command for further elaboration.
Digital sketches with different character styles
Now the task was to apply to the selected compositional sketch of the characters and draw them digitally. Procreate software on iPad was used to create sketches.
All three digital draft sketches
The compositional solution is the same, but the stylistic solution of the characters and the environment is different.
Finishing illustrations in three styles
Now there was a need to translate all three digital sketches into a final form of a vector 2D illustration. The color scheme was purposely used in all three illustrations to be the same. Since at this stage the main task was to choose the final style of future illustrations.
All three clean illustrations in different stylistic solutions
Below are three clean 2D illustrations, as well as an excerpt of several slides from the concept presentation of the illustration style development.
Creation of small illustrations in three styles
In addition to the development of the character's style and large plot illustrations, work was carried out on the development of a style for small informational icon illustrations. This type of illustration is very often found in the interface: in various widgets, zero states, tables, etc.
01 — texture along the outlines of objects + graphic texture;
02 — laconic filling style;
03 — black dynamic lines + graphic texture, also using lines.
01 — texture along the outlines of objects + graphic texture;
02 — laconic filling style;
03 — black dynamic lines + graphic texture, also using lines.
Style consistency
After working out the stylistics of small illustrations, it was necessary to show how each "move" from a small illustration can fall on the character.
Creating a series of illustrations
After choosing the final style for the large plot illustration and for the small informational illustration, the task was to combine both of these styles and achieve consistency.
Developing elements for the library
After the final development of the style of illustrations, work began on the creation of various elements for the library: angles and postures of a person, clothes, emotions, animals, plants and much more. In general, the purpose of this library is to make life easier for designers and allow them to quickly collect competent illustrations for their needs on a project. This set of elements was developed in Adobe Illustrator. Further, on the basis of these elements, a designer library was created in Figma.
How to work with elements from the library
Below you can find the principle of creating a character, as well as recommendations for the stages of creating illustrations from the elements of the library. Recommended steps:
01 STEP
Draw a quick sketch in pencil with the main idea based on the script and composition.
02 STEP
Digitally modify the pencil sketch. First, we throw in all the available elements from the library. Then, we look for the missing reference pictures.
03 STEP
We collect heroes from the presented components to the library. We finish sketching the necessary elements using our findings and references.
Guide development
Guide! Of course, a guide was developed for the competent work of both illustrators and designers. It spelled out all the principles of working with illustrations: from creating a paper sketch to working with composition, color palettes, graphic textures and much more. The difficulty in creating this guide was that I could not find something similar on the market to take it as a basis. The final guide can be found at uui.epam.com.
Creating a series of illustrations
At this stage, there was a global task: to test the created library elements in practice. The illustrations below were assembled from ready-made elements. If necessary, a number of missing parts were completed and in the future these elements were also immediately added to the library.
Thanks for watching!