4 Illustration Components

An Illustration Component is a standardised way of creating encapsulated, reusable Digital Illustration for the web.

illustraStock offers a modular system of illustrations with recommendations for the creation proportions. Additionally; the proportions of the illustrations are more important than the projections, styles and scales because of the fact that their representations are not stylistically restricted by the structural constraints.

Before we can understand why illustration components are so important we first must fully understand what the aspiration of any type of component is.

  • Encapsulation: an illustration component should be completely separate from the final draw as a group. This increases reusability because the component is only responsible for its meaning and shouldn’t be concerned with the full illustration, only its own.
    Illustration component can be edited without fear of affecting the rest of the draw.
  • Extensibility: illustration components should be able to extend each other.
    This means that a component author doesn’t need to reinvent the wheel and can easily reuse functionality.
  • Composability: it should be possible to create more complex illustration components or even entire illustrations from a collection of components. This decreases the need for “global” logic providing a better defined architecture and less chance of mistakes because each individual part of the draw (or composite component) is better defined.
  • Reusability: the big one. With all of the above a component should be easily reusable with minimal dependencies.

The reason why is so important is because illustration components allow the Interoperability (otherwise, you can’t easily use an illustration from one author with other author)

As illustrators we need to change how we draw our illustrations. In the past you probably found yourself locked into a specific draw with a very hard upgrade path — which might have even meant an illustration re-draw.

  • Keep it simple (the fewer lines, the better).
  • Keep it universal (draw the most common representation of the objects).
  • Keep it consistent (use the same proportions in all elements).

Because illustration components are built on nothing more than standards they will work across all of these ecosystems, this has some huge benefits:

  • Interoperability — Your components can transcend and be used in multiple projects.
  • Lifespan — Because your components are interoperable they will have a longer life and there will be less need to re-draw them to fit into newer scenes.
  • Portability — With your components able to work anywhere the barrier to use is significantly lower than if your component relied on a specific art work.

Illustration components are a multi-layered illustration system formed by modular elements (Components, Modules or Elements) of identical design that can be interleaved to form a larger scene. The parts of the illustration components are:

  • An Item is a finish file. Can be just one Element or a combination of several in different artboards (Stage = Setting).
  • An Element is each and every illustration that composes a scene and individually has its own meaning like a table, a house, a person or a window. A scene with a house and a person with a table is also a Element as it is always a final result.
  • A Module is a single piece that can be used as it is (When it works as a Element), adhered to other Modules and to create new Elements or extended with Components for the creation of another more complex/large Elements.
    A Element can be done by different Modules (a big table can be a Element created through the unification of two or three Modules of little tables or by the unification of different pieces or Components).
    – The complements are the big modules, such tables or beds and the objects are tiny modules like phones or pencils.
  • A Component is each independent draw of one Element/Module that can be modified independently. A cube is made by six Pieces or Parts, each one of those are a different Component.

illustraStock templates use a 64px grid where we can create Components and Modules made by units of 64px where 1/1 Unit is 64x64px, 1/2 unit is 32x32px, 2/1 units are 128x128p.


Illustration components are so important because they will allow us to draw our illustrations in a way so that we can adapt to change quicker.

Our illustrations will have a longer life thanks to the interoperable nature of illustration components which are given to them by being built on top of web standards and finally our components should reach more people due to fewer dependencies and requirements.

We are creating illustrations in the same way the informaticians are creating the new web with web components [We create our article base on Leon Revill]. The future of digital illustrations are here.



Designer's guide Copyright © by illustraStock. All Rights Reserved.

Share This Book