Component-based illustration using Sketch, Part 1: principles, styles & characteristics

“Design Systems” is about how to approach your design process more systematically, and ensure your design system helps to achieve the purpose of your product and fits with the culture of your team.

— Alla Kholmatova. “Design Systems.”

#1 of 3 of the series Component-based illustration using Sketch:
Overview | Part 1| Part 2| Part 3


1. Define the theme of illustration

This is the initial stage before we decide what kind of illustration we want to make. The theme of the illustration should be related to the business of an app / website. In this case, we want to create a couple of illustrations for the application / website Ride-hailing services. So we have to define themes related to Ride-hailing services as well as related objects (Vehicles, Cars, Motorcycles, Riders, Passengers, Streets, Buildings, etc)

2. Illustration Design Principles

How do we make sure that the purpose of the product is manifested through design? By establishing a few grounding values and principles. To make a design system for illustration, design principles are very important as a foundation of the design. Express our design approach in three to five sentences. Here are my illustration design principles:

  1. Simple
  2. Impressive
  3. Colourful
  4. Joyful
  5. Collectible

3. Basic Color Schemes

We have 2 types of colors, bright color (Blue & green) and warm color (yellow & red).

Basic Color Schemes

In the illustration, I use more bright colors to preserve and show the brand identity. That’s why 80% of illustrations have a more dominant blue & green color than any other color.

4. Reusable Components

Create a set of components and templates in a single style guide, which these components and templates can be reused without having to make it from the scratch.

Reusable Components

These can help us maintain the consistency of design and make the design process better. And also we have standards and foundations for our illustration design.

Component Usage 1
Component Usage 2
Component Usage 3

We can change the color of components that refer to the existing color schemes. These components will continue to be updated based on necessities & will be updated regularly.


5. Style & design characteristics

Style and characteristics are 2 things that must be owned by the design.

Do you know what animated character is shown above? I think everyone knows who he is. The character above has a style and characteristic. Same with our illustrations, We have to understand the style and the characteristics of our design. The goals are to maintain the design consistency and create standards of design. And also make everyone know and remember the style and characteristics of our illustrations.

Illustration Characteristics & Styles 1
Illustration Characteristics & Styles 2
Illustration Characteristics & Styles 3
Illustration Characteristics & Styles 4

Here are some of my illustration characteristics and styles:

  1. Human. Character styles are humans with large head size, small hands and no detail, and also small feet.
  2. Kawaii face style. Kawaii is the culture of cuteness in Japan. It can refer to items, humans and nonhumans that are charming, vulnerable, shy and childlike.
  3. Gradient color. Blending the color from basic schemes to another color.
  4. 2 dimensions. All illustration elements look 2 dimensional.
  5. Colorful with 2 components color, bright color (Blue & green) and warm color (yellow & red).
  6. Rounded style. Almost all the elements of the illustration are made rounded so that it looks more modern.

Characteristics and style above will be the benchmark of all designers to create The illustrations. So we have the same and consistent illustrations.