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

Rizki Mardita
Mar 22, 2018 · 4 min read
Image for post
Image for post

“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).

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Component Usage 1
Image for post
Image for post
Component Usage 2
Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post
Illustration Characteristics & Styles 1
Image for post
Image for post
Illustration Characteristics & Styles 2
Image for post
Image for post
Illustration Characteristics & Styles 3
Image for post
Image for post
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.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Rizki Mardita

Written by

Come up with a game plan before creating something

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Rizki Mardita

Written by

Come up with a game plan before creating something

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store