graphic design process illustration for IT blog tubik

Design Process: How to Create Illustrations for IT Blog or Landing Page

Illustration Processes And Tools UI/UX

There are numerous goals which can be achieved with custom illustrations. Title images for blog articles are one of them getting more and more popular from one resource to the other. Original graphics catch readers’ attention and quickly transfer the topic of the post. With extensive experience of creating unique graphics for Tubik Blog articles, our graphic designer Yaroslava Yatsuba shares tips and practices on creating blog illustrations.

 

tubik studio designer

 

General Approach

 

Having got the task to illustrate the article for an IT blog for the first time, Yaroslava faced the problem of metaphoric transfer of the article theme by means of graphic design. The specific nature of the area required to search for new ideas for the task realization.

 

In her creative process, the designer has developed the following approach to the task. After getting a particular topic of the article and communication with the author or editor, she:

  • analyzes the general message of the content
  • tries to define the core keyword which can become a point of departure for the illustration
  • runs parallels between it and other spheres of human activity
  • considers the ways to play out the theme via colors and shades.

 

With practice, Yaroslava formed three basic methods she applied to creating blog illustrations.

 

Literal Method

 

This method seems to be the simplest but it doesn’t mean it’s the most winning. Literal method means showing the character working on a laptop, PC or mobile device; the background, in this case, may feature the display of the device or interface elements reflecting the theme of the article.

 

 

graphic design illustration tubik

 

As an example let’s check the illustration for an article Gestalt Principles in UI: Principle of Proximity. It has a simple static composition catching attention by means of textures and bright color accents.

 

graphic design illustration tubik

 

The same method using dynamic composition and gradients is applied to the graphics for the article Review of Popular Interface Design Trends in 2017.

 

Combination Method

 

Combination method means that characters come to grips with the interface, interact with its elements reflecting metaphoric exaggerations, such as a small character on the big button, a character stepping out of the mobile phone and the like.

 

animation in mobile ui design tubik blog

 

In the given illustration to the article about UI animation, the smartphone plays the role of a curtain wall or screen like the one used in a puppet theatre and designers reflect actors each of which shows a specific model of motion performance. Unlike the illustrations shown before, here we can see a group composition where all the characters are equally important. Textures drawn by hand and rich color of the background draw user’s eye to the center.

 

buttons_magic_illustration_ui_design_tubik

 

The same approach applying dynamic composition which is developed around the spiral is used for the illustration for this article.

 

Allegorical Method

 

The method of allegory in illustration means the IT sphere is projected on the other spheres of personal or professional life and is shown through the lens of the different area. In the illustrations of this kind, the images of devices become secondary or aren’t used at all. The plot may be strengthened with unexpected perspectives or metaphors.

 

Designer’s Tip: Watch the references with dancers or sportsmen — they are always expressive and dynamic.

 

design agency landing page

 

The illustration above was built upon playing with the keyword “Goals”. The image of a basketball player was perfect for the theme as the moment of hitting the basket is a real reflection of achieving the goal. Rich catchy colors add the feeling of confidence and strength to the illustration.

 

graphic design illustration tubik

 

 

Another example to check is the illustration created for the article 3C of Interface Design: Color, Contrast, Content. In it, the designer chose the keyword “Color” as a core semantic element and showed the literal process of coloring something with paint. The contrast is reflected in the color palette of the artwork while the content is shown with the elements of the furniture in the office shown in the picture. The cat becomes a bright detail which adds dynamics and humor to the scene.

 

Designer’s Tip: Don’t forget that allegories should be recognizable and easily understood by people from different countries and cultures as most articles from the sphere are written for the broad international audience.

 

Animated Illustrations

 

Animation can broaden the potential of the graphic artwork and makes even simple illustration original and impressive.

 

navigation in ui animation tubik

 

This animation is based on the illustration to the article UX Design Glossary: Navigation Elements. Motion made the graphics more expressive and strengthened the accents.

 

Handy Tips on Design Process

 

Color. Proper choice of color and texture adds harmony to the graphics perception in connection with the theme. Moreover, it supports the psychological perception of the illustration and sets the necessary mood: bright colors are perfect for entertaining content while minimalist palette will correspond well to the business themes.

 

Composition. Creating the illustration, it’s essential to decide on the way of theme presentation — by means of one character catching all the attention of the viewer or by means of a group of characters interacting with each other and reflecting the process based on the article message.

 

Details. Working on an illustration, don’t forget about the details and accent which make an important contribution into the general image, style, and originality of the illustration — as well as correct punctuation makes a sentence better.

 

Inspiration. Collect your own big collection of references and images for inspiration. These may be poses of people you like, nice color palettes and combinations, interesting photos, your own sketches, illustrations and artworks by other artists. What’s important, you have to get inspired instead of trying to copy someone else. Sometimes just watching these inspirational sets may light a flame of an idea in your head.

 

graphic design tips and practices tubik blog

 

And the final tip: never stop where you are, always stay in search of new ways to realize your unique artistic style and creative ideas.


Welcome to check the article How to Create Original Flat Illustrations by Yaroslava

Welcome to see designs by Tubik on Dribbble and Behance

Subscribe