28 Matrix System & Structure

Matrix collection of illustrations shares the perspective, light source & palette. Their representation is not stylistically restricted by structural constraints. The primary goal is to provide a realistic representation of the metaphor that is true to the material attributes of the object that is being rendered. The style is more realistic than illustrative, but not quite photorealistic. Matrix illustrations are symbolic images—they should look better than photorealistic!

An icon’s primary job is to be clear and intelligible. Each icon is designed with the highest priority (Legibility-focused aesthetic).

Each icon weight is designed according to a specific grid system—which in turn creates a consistent aesthetic (Precise pixel grid).

Matrix Systems & Structure

The key concept that defines the illustraStock Matrix Collection is a system-based design approach to the structure of the illustrations. The illustraStock Matrix Collection is based on 5 guiding principles that all illustrations share (Perspective, Padding, Object fill vs. Stroke, Color palette and Sizes):

Perspective

Matrix collection of illustrations uses the orthographic projection (orthogonal projection). Projection with 2 views of an object (as a view of the Front and Side) onto a drawing surface in which the lines of projection are perpendicular to the drawing surface.

Padding

Elements should all have their own padding or margins – or white space inside or between them. We need at least 1px (2px recommended) between two lines in order to be able to change the color of the space between lines.

Object fill vs. Stroke

It is important to create the illustrations in the same way, we:

Fill (draws stuff in the interior of the path )

No, if something is Fill, it is because it is wrong.

Actually the truth is the illustrations must be fill, but in white for a later personalization. (a link to a tutorial about how to create illustrations, how to use the join tool)

Stroke (draws stuff on the border of the path)

There are different Strokes for different situations. If the size of the Stroke must be changed, only even numbers are allowed.

Different styles use different size of stroke because the brush of style. Also the size of the object conditions the size of the stroke.

Brush

All our illustrations are made by Strokes, that is why it is important to choose the correct Brush for each illustration and style. Read our tutorial about Brush and Strokes.

Color Palette

A color palette is ready for different styles. Remember, Black is Black with K= 90% (grey color 90% (26, 26, 26)), never pure black and always white color for fillings. Always RGB.

 

 

 

 

 

Matrix Styles for various Icon Types

The illustraStock Style Production Guide provides an overview of the various icon types and context that define the illustraStock icon approach.

Having a system based design ensures a unified brand expression. It also enables us to provide a variety of icon styles that are flexible and complimentary.

There are two key concepts that are useful to understand before proceeding:

xxxx