Understanding Isometric Illustration

In the realm of vector illustration, there are lots of different styles. One of the all-time favourites is isometric.

But, was is isometric illustration?

An isometric illustration is a style of drawing which uses a technique called isometric projection.

With isometric projection, any three-dimensional object can be depicted on a flat two-dimensional surface. The cube below is an isometric cube, the basic building block for all isometric compositions. The illustration next to it is an isometric illustration of an apartment.

True Perspective

There is another style of drawing which can accomplish a three-dimensional visual on a flat surface. If you have studied art or art history, you must know the style of true perspective drawing. This is the technique of drawing objects with angles that direct to vanishing points on a horizon.

Understanding the difference between isometric projection and true perspective is the easiest way to understand how isometric illustration works. A true perspective drawing can use either a one-point, two-point, or three-point perspective. All three of these techniques use drawing angles that meet at the end of the perspective view, usually the horizon.

The angles of an isometric illustration never meet and are infinitely parallel.

Source: https://myweb.rollins.edu/jsiry/ArtPerspective.html

It’s all about the angles

Isometric projection is one of three types of axonometric projections. Axonometric drawings are all those that portray three-dimensional drawings without the lines converging at a vanishing point like in true perspective. There are three types of axonometric projections; isometric, dimetric, and trimetric.

Isometric is the only one that maintains the same size angles throughout. All angles used in an isometric drawing are 30-degree angles. It is the most versatile of all three and the one we have been seeing lately on the current website and app designs.

Source: https://medium.com/gravitdesigner/designers-guide-to-isometric-projection-6bfd66934fc7

Original uses for isometric illustration

Before websites and apps started using isometric illustrations as their creative visuals, it was a helpful drawing technique mostly used by engineers, technical illustrators, and sometimes architects.

A common use for an isometric projection is to show the parts of a machine. With an isometric drawing, any kind of complicated apparatus can be taken apart and displayed in a way that is easy to visualize and understand. An isometric drawing can help workers follow instructions to put the parts together of a complex system.

Source: http://getdrawings.com/3-views-of-isometric-drawing

How isometric illustration made its way into our daily lives

Isometric illustrations jumped from engineering drawings to our daily lives through the proliferation of video games. The first arcade games to use isometric projection in the 1980s were games like Q’Bert and Marble Madness.

These games were simple but with the use of isometric projection, they had that three-dimensional quality that we loved and appreciated. From then on, other games like city building games were created on isometric planes. One of the most famous is the original Farmville. Farmville 2 was had a perspective plane.

Now we see isometric illustrations on infographics, presentations, and all over Pinterest. Freepik has recently launched a collection of landing pages with isometric illustrations that are getting a wonderful reception.

Using isometric illustrations as scene creators

One of the best qualities of isometric illustrations is that they are scalable and rearrangeable an infinite number of ways. With a collection of isometric pieces, a designer can create an entire scene.

Freepik has lots of isometric bundles, from cityscapes to educational collections. All you need to do is put the pieces together and create your own composition.

How to create your own isometric illustration

When designers first learn how to create isometric illustrations, they do so with an isometric grid. This helps build simple shapes but after a while the grid becomes restrictive. The idea to learn with a grid is to get the designer’s eyes used to the isometric angles. Once they have that down, they can draw isometric shapes without the grid, but with the help of other tools. Some designers can even do it freehand.

Below are some helpful links to help you learn about isometric design and how to do it.

On LinkedIn:

Drawing Vector Graphics: Isometric Illustration

This 4-hour course takes you on a journey to creating your very own vector isometric illustrations. This is also an intermediate level course for Adobe Illustrator.

On Muzli:
Creating Isometric Illustrations—Made Simple with the Geometric Technique

This tutorial is a bit easier in the sense that it teaches you to create isometric illustrations using a geometric technique. The explanation is done with Photoshop but can be recreated with other design programs as well.

Over to you

Are you a fan of isometric design or do you prefer perspective? Artists in the classic sense are masters of perspective. If you want to find out more, just google “Leonardo Davinci Perspective” and go down the rabbit hole of vanishing points. And if you are an artist with a love of isometric design AND optical illusions, look up MC Escher!