Illustrations for Scripbox

Scripbox is a portfolio planning service seeking to redefine wealth management. As the illustrator on the design team at Timeless, my task was to come up with a visual style and create several illustrations within that framework.

Let’s take a look at the basic framework developed to create illustrations in a unified and relatable manner.

About the illustration system

The illustrations needed to be subtle yet detailed in order to complement the UI. Playing with textures and creating a unique perspective within the illustrations helped create a one-of-a-kind simple style that could be used throughout the branding.

Two types of illustrations are created:

• Headers: These are large scale, complex illustrations created to represent the various investment plans offered. They intend to capture the nature of the investment being offered while also creating a scalable composition that can be re-used throughout the app.
• Spots: These are smaller illustrations created to illustrate CTAs, empty states and more. They are mostly independent subjects without a background.

Headers

Headers are composed of a main object, a few secondary objects, and a background surface such as a table or ground. The background surface/texture is left to fade without any hard edges, which helps the illustration to be placed in different UI scales and contexts.

Three main compositional elements in a header illustration

The main object is composed straight on in the center, and the rest of the objects are aligned to create a slightly exaggerated perspective to give a sense of depth. Horizontal lines combined with strong diagonals on the secondary objects help create an exaggerated yet easily scalable perspective.

With the main object firmly in the centre, the secondary objects create a suitably aligned perspective

Creating a scalable composition:
Scripbox offers the user several portfolio options known as “plans” and “goals” which are referenced in different contexts throughout the app. The illustrations have been created with a clear distinction between main object, secondary objects and background. This main object can then be used in isolation in smaller cards, as well as to design the icons for these plans.

The main object being re-used in different ways across the app

Spots

Spot illustrations are used to accompany CTAs, empty states, and some card layouts.

Recurring elements — creating a metaphor

Certain objects are re-used in illustrations throughout the branding to help create a symbolic reference for the user to understand at a glance. Hands are used to denote the user, boxes to denote portfolios and investments, paper planes to denote payment, and so on.

This metaphorical representation helps bring to life concepts that otherwise might be too abstract and impersonal for the user to visualise.

Hands in the illustration always denote the user

By re-using objects, it is easy to denote the status of the payment process

After lots of experimentation, some textures were established as ideal for the kind of art style needed. These were reused as much as possible in all contexts to create a unified look.

Some of the recurring textures and line types used throughout the illustrations

Illustration process

Here’s a look at how an illustration is made, step by step.

The different stages in creating an illustration

• The concept stage is used to throw around ideas for representation and see if they fit with the overall metaphorical visual language.
• The refined sketch is made as a blueprint to finalise the shapes and details of the image.
• The basic colours are added in to finalise a palette for the image.
• Finally, the sketch is rendered with the established textures and shading brushes to create the final illustration.

Throughout the process, it is important to place the sketches in the UI and check the visual balance. This goes a long way towards saving time by making any corrections in the early stages of the illustration.

Check your illustrations in the context of the UI to see if everything balances out.

Thanks for reading!
Check out the Behance case study here.