A Method for Isometric Design or Afternoon Tea with M. C. Escher

Never-ending isometric staircase

Isometric design is everywhere you look at the moment.

A few examples

1. In company logos (Airtable, Node.js, the old Rightmove logo, Neo, RaiBlocks, Gas, Enigma, Neblio).
2. In Silicon Valley, the TV show, the opening sequence is isometric.
3. Until recently, Slack had a whole isometric office scene depicted on their marketing website.
4. On dribbble, at any one time, there is sure to be at least one isometric “shot”.

So what exactly is isometric design?

Isometric design (meaning “of equal measure” in Greek) is when you describe objects from a particular 3-D point of view, but without any perspective.

It is the viewpoint we all know from playing Sims or Theme Hospital or from playing the much more recent game Monument Valley from Ustwo Games.

Isometric cube

Recently, I decided I wanted to learn more about isometric design and, in particular, how I could create such a design myself in Sketch.

After a few failed attempts, I soon realised that there must be some method to creating one.

So, I called up the master of isometry himself, my old friend M. C. Escher, to ask if I could come round for a cup of tea and talk it all through. He said it would be his pleasure and we arranged to meet the following afternoon.

M. C. Escher’s House

Unfortunately, the work of M. C. Escher is under copyright and so I have put links to his work in what follows.

When I arrived at his house for tea, I walked through his front door into a beautifully ornate front hall. The floor was paved with a tessellated mosaic of fish… or were they birds… or were they lizards? It was impossible to tell.

See transformation prints by M. C. Escher.

There were stone columns surrounding the room but it was hard to determine where they began and ended, and they seemed to be interwoven, in a way that is difficult to describe.

There were many staircases all heading off in different directions.

The whole place… it was impossible to make sense of it all in one go. Looking in any particular direction, it seemed to make sense geometrically, but when looking at the whole space, it did not. It was as if the walls and ceiling were breaking the laws of dimension and perspective.

There was a huge staircase going up in front of me and a similar one going down to my right.

See Convex and Concave by M. C. Escher.

I spotted a note on the hall table requesting my company on the fourth floor and so I set off towards the staircase in front of me.

I went up four flights, each one a right turn from the previous flight. However, once I had gone up the fourth flight something very strange happened. I appeared to have returned to exactly the same spot where I had begun. I was once again standing by the hall table with the note telling me to go up to the fourth floor.

See Ascending and Descending by M. C. Escher.

This was confusing, but not unexpected from my old friend M. C. Escher. Was the fourth floor identical to the ground floor or had I not been concentrating? I was debating whether or not to go up the four flights again when I heard my old friend come through the door.

He apologised for being late (muttering something about how time was the one dimension he couldn’t bend) and we retired to his sitting room for some tea.

We finally arrived on the subject of isometric design.

Isometric design

He admitted that he was delighted that the design world was enjoying the strange and interesting world of isometry.

He then showed me how to begin with such a design…

“What we are looking to create, my old friend, is a rhombus. Each side of this rhombus must have the same length, let’s say 1, and the rhombus must be at a 30 degree angle.

“To create such a shape in Sketch, we can start with a square which is 1 unit wide and 1 unit high.

“Then we must reduce the width of the square to the square-root of 3 divided by 2 which is approximately 0.866. Then we must sheer the square by 30 degrees along its vertical axis. This provides us with our desired rhombus with all sides of length equal to 1 and with a 30 degree angle.

“And this is one of the planes for our isometric design!

Creating an isometric plane, and then doing the same transformation to a picture M. C. Escher himself

“Now we can simply rotate this rhombus by 120 degrees and 240 degrees to create the other two planes of the isometric cube.

“These three planes form the landscape for isometric design. We can now draw any object from this perspective by applying this very same transformation to the entire object”

In summary, what the old man had told me to do was the following:

1. Begin with a 1 by 1 square,
2. Shrink its width to 0.866,
3. Sheer it by 30 degrees vertically,
4. Rotate it to the plane you want.

Playing around with Isometry

Once I had taken it all in and finished my tea, M. C. Escher wanted to show me one more thing. He continued…

“Now that you have mastered how to draw in isometry, you can have some fun with it, as I am sure you have seen me do in my work, and as you experienced with my staircase earlier.

“Let me take you out to my garden to show you what I mean.”

And so M. C. Escher took me to a water feature in his garden.

“See how the water flows along three sides of this waterway at essentially the same level, but then it falls in a waterfall back to where it began. If I draw it by hand you can see how we can achieve this by using the isometric planes we discussed inside.

See Waterfall by M. C. Escher

Isometric Waterfall

“This is all possible because we are playing with our perception of the world, we are bending reality to a place where it becomes paradoxical.”

And so he drew me the above sketch as a memento to take home. I was amazed by all the wisdom he had imparted onto me and returned home with a desire to have a go at some more isometric design.

If you feel this blog has given you a new perspective, perhaps even an isometric one, please clap👏 to share.

For a different perspective altogether, please check out my previous blog The secret to a longer and happier life is hidden in Einstein’s Theory of Relativity.

Also please check out my company www.pilcro.com. We make smart brand management software for G-Suite.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 289,682+ people.

Subscribe to receive our top stories here.