Illustrations

Here we will try to convey the basic principles we used to create our illustration and our approach to tell stories in an engaging and effective way, providing the essential guidelines that can inspire you but never limit your creativity.

Principles

As a design system is here to help you make your design more consistent and flexible at the same time, that’s why we have some set of principles for your illustrations you need to follow and use as guidance to make sure it’s consistent with your overall look and feel.

Tells a story

Every piece of illustration should add value and tell story of its own that’s why you need a context through which you can tell this story, also put in mind that your illustration should deliver one single clear message within this story.

Using Metaphor

Illustrations should be engaging. With the use of metaphors, you tell your story in an effective and engaging way that connects with your users in a human level.

Flexible

Base illustrations are flexible that it can be used to express either day or night and it works well in both dark and light environments, it works well either with or without the use of character as long as it tells a clear story and send one clear message.
It can be used within a containing frame or just using the full artboard as your background and it both gives a sharp and clear look.

Engaging

The color combinations used and its style are full of life and always catchy for the eyes. You should consider the consistent use of colors in each illustration piece. Use main color as the key color and start building your scene upon it mixing the other colors from your palette. Using the gradient colors to give some depth to the illustration and make your story more like if it’s moving around with the user and talking to them.

Abstracted

Illustration elements should be created with the basic geometric shapes, use different shapes and mix them to come up with your basic elements that creates the overall scene, even the fames that contains illustrations should be created out of mixing these basic shapes, the characters, their hair and each elements in your scene.

Detailed

For your story to be engaging you need to give attention to the details of your scene, adding more life to your story and make your users ready to move and interact with your product/service.

Endless creation/Sustainable

Sustainability is the secret behind our art type. Since the challenge was coming up with a flexible composition that never runs out, we adopted a LEGO approach to create an infinite number of designs that works for different environments.
Containing your illustration in frames makes it easy to play around with them and mix many different scenes to come up with a one huge scene by just adding different frames together, that’s how illustration can be sustainable and consistent.

When to use illustration

The use of illustration in the digital word adds real value to products and services out there, that’s why illustration is an important tool to communicate with your user. Still we need to make sure that our illustrations fit in the place where we use it and it’s useful for it otherwise it will be overwhelming and distracting which can affect the experience of your product.

Don’t use illustration in index pages.
Use illustration on side pages when there’s no result “Error pages , Empty states “.
Use illustration if you’re trying to promote new product of feature to your users.
Use illustration while celebrating or announcing for any progress
Use illustration to tell your users how to use your product or to make them understand your new feature.
Use illustration to highlight a feature that users didn’t notice or can’t understand.
Illustration can be helpful if there’s lots of text on a page and you need something to make your users never get bored and continue ready.

Spot Illustrations

Spot illustrations follows your illustration style with less detailed elements and without a background, it follows the principle of illustrations. It can be used to notify users about a new products or features and give them a clear understanding of the project. It can be created with more complexity and adding it into a containing frame or it can be more abstracted and with less details giving focus to just one element.