6 Modular Design

illustraStock Modular Design uses Illustration Components as a center of the project.

An Illustration Component is a standardised way of creating encapsulated, reusable Digital Illustration for the web. Illustration component for the web has been around for a long time in the manner of icons, the idea of being able to draw reusable and portable icons is nothing new.

Why illustration components at all?

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.

Why does this matter?

One big reason: Interoperability. 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.

History of the Illustration components:

  • Icons: Icons were probably the first popular attempt at drawing re-usable illustrations. They had some structure to see how they were written and you could easily distribute them — but they weren’t without problems. You’d often get conflicts between icons and you would also have many styling issues trying to figure out what styles you were required to include separately.
  • Platforms icons: Icons for the different platforms (Android, Windows) where the next evolution provided some additional benefits. You could isolate the icons you need from one collection and create the elements you need. You still had to create styles separately for each platform
  • Web for creation of icons: The most recent iteration of this concept would be the modern web sites for creating icons. They allow building icons by just selecting inside elements, color and outside elements from their database providing a much nicer and universal approach. It allows illustrators to upload their illustrations and decorate with outside elements from the database. You are also able to change the final color or create a shadow which finally provides complete integration for your draws. You still had to create your inside elements or/and had the limitations of the database.


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.


Modular Design Copyright © by webadmin. All Rights Reserved.

Share This Book