Saturday, October 26, 2019

Exploring Isometric Design and Illustration: Analysis and Interviews

Exploring Isometric Design and Illustration: Analysis and Interviews

Isometric design and illustration—thinking about this visual direction usually takes me back to a favorite video game or beautiful illustration I've seen in my favorite design magazine. That's one of my favorite things about isometric work: while it might be deliberately limited in terms of its grid, the applications themselves can be quite broad, interesting, and unique. 

Isometric Illustration
Isometric Illustration by wowomnom, Envato Elements

Let's explore isometric design and illustration—what it is, what it can be, and how wonderful it is—and ask some fantastic creative folks, who enjoy experimenting with this aesthetic, for their thoughts and insights on isometric art and design. 

But What Is "Isometric", Really?

Back when I was in school, some of the toughest classes were the ones in formal perspective. We'd have to draw these elaborate scenes that all relied on established and unified vanishing points. That's how we generally see the world around us—based on our eye level, and how different planes will diminish in space the further they are from us. 

An isometric view, however, is a little different. Let's take a look at an isometric design by Vic Bell, as seen below.

Vic Bell
Isometric Design by Vic Bell 

Notice that the planes here are generally parallel. Nothing's diminishing here into the horizon. It makes for a fixed view—and reminds me a lot of some of my favorite early city simulation games! I'd love to navigate a character through this space. 

But working isometrically isn't limited to games—as we see here in an illustration by Anna and Arek Kajda. Can you see the fixed grid? 

Anna and Arek Kajda
Isometric Illustration by Anna and Arek Kajda

Space still exists when we create on an isometric grid—and it still has rules and "laws" that need to be followed, for the sake of visual consistency—but they vary from what we might need to consider if we were focusing more on atmospheric or linear perspective, for example. 

Here's another great example. In this illustration, by Vic Bell, notice the trees. Now try to reimagine this from a "natural" eye level, instead of this fixed, parallel view. Interesting to think about, right? 

I think it's particularly interesting to consider how this approach potentially communicates with the viewer. What does this scene make you think of? How might the perspective affect how this "reads" to the viewer? It's one of many choices that we, as creatives, could consider when creating and delivering work to our audience. 

Vic Bell
Isometric Illustration by Vic Bell

Experimentation and Application

One of the nice things about observing isometric work is the diversity of its applications. You can find it in so many visual spaces—in printed publications, on websites, and in game development. One of my favorite recent finds is a series of isometric experiments by Sriram Govindasamy, as seen below, exploring isometric creations in Adobe Illustrator—fun, quirky, and interesting visual experiments, meant to experience and experiment with the software. 

Sometimes, when I'm thinking about perspective or viewpoints, I, personally, get a little caught up in "the rules" and forget that, as with many types of visual directions and aesthetics, there is so much room for experimentation, freedom, and curiosity. 

Sriram Govindasamy
Adobe Illustrator Isometric Experimentation by Sriram Govindasamy

In fact, the grid doesn't have to be overtly visible either. 

In the example below, the grid is more hidden—we can particularly see it in the puzzle pieces within the illustration, but most of the forms here are rather rounded. The elements here are all adhering to the grid, but they're not necessarily blocky. They don't have to be. 

Isometric Illustration
Strategy Isometric Illustration by angelbi88, Envato Elements

But we could also fully push the "blocky" aesthetic—it's a fun and popular visual trend, both inside and outside of isometric work. 

In this case, even things that we would expect to see with more organic or rounded forms are reimagined in an angular fashion, again, inspired by that isometric grid. 

Isometric Characters
Isometric Basketball Team by sukmaraga, Envato Elements

I find isometric work to have a particularly unique and interesting way of conveying information, in many cases—like the example by Anna and Arek Kajda, below. 

Where, for example, is the emphasis, in your opinion? From a design perspective, are our eyes guided through the composition in a particular way? 

I find it all to be rather rhythmic and visually dense, in that there are plenty of places for my eyes to roam rather freely, rather than with an obvious direction. It's a potential advantage that we might not have if these same figures were arranged in a way that relied on vanishing points—and it's just downright fun to look at. 

Isometric Illustration by Anna and Arek Kajda
Isometric Illustration by Anna and Arek Kajda

At the same time, we're not constrained to depicting a scene or characters, or communicating a straightforward concept. Isometric work can be abstract—personally, I think it lends itself quite well to the concepts of pattern and repetition, when thinking about the principles of design. 

Isometric Illustration
Isometric Maze Pattern by sukmaraga, Envato Elements

That said, I had the wonderful opportunity to speak with a handful of artists, each with experience in isometric work. I asked them for their thoughts, their insights, and their perspective. What makes isometric drawing great, and where can we, as creatives—who might be curious about joining in on the fun—get started?

I hope you enjoy their thoughts, insights, and creative projects as much as I did. Let's dig in and have a listen!

Vic Bell

Vic Bell

I’m Vic Bell, I’ve been a freelance illustrator and designer for around 10 years now. I mainly work within the tech/web sector, helping companies lift their brand and usability using illustration and iconography! 
I personally love how much more detail and depth can be added to an illustration by using this style [isometric], I feel like the work tends to pop off the page and really feels like a little world that we could almost climb into.
Vic Bell
I usually start with a sketch, even though it isn’t going to be accurate, I like to get the idea down first. 
I sometimes like to use the iso grid within procreate to get ideas down but this isn’t always necessary as I enjoy being super rough to start with. Next I jump into illustrator, bringing my sketch in there as a reference, I like to create my grid using the ‘make guides’ tool inside of the ‘view’ menu. This is a great point of reference for spacing and such, I also use the ’snap to guide’ tool sometimes. I also use a set of actions that I created using the 3D extrude and bevel effect, there are a bunch of isometric drop downs and I set the extrude depth to 0 which allows me to manipulate the tougher shapes a lot easier. 
Vic Bell
In terms of colour and shading, I always illustrate in the same way, regardless of isometric or front facing, I like to get the line work down and then group it and colour underneath. It’s not the most efficient process but it’s how I’ve always worked and I prefer to have control over my line work.
Vic Bell
I also think the vast opportunity with this style is super appealing, lighting, shading and colour balance can be used in such amazing ways to really make images pop. Another huge appeal for me is that I’ve always been fascinated by 3D modeling however being freelance and having a little boy to keep me busy I rarely have time to learn something so complex, isometric design allows me to give my work some 3D life using the skills I already have. 
Vic Bell
I would say my biggest inspiration for iso design is game design, check out some old school iso style games, it’s amazing what those designers were able to achieve and the level of depth they add to a game using this style of illustration. 

You can check out more of Vic's work at:

EDEVOX

EDEVOX

Hi! I'm Eddie Hitchcock. I'm a 36 year old, independent game developer from Ontario, Canada. I make indie games under the name EDEVOX, which combines my childhood arcade initials (EDE) with my love for voxel art (VOX). All graphics for my games follow a strict rule that all art must be made using 3D voxel models, which I then render and edit into art assets. I also strive to experiment with combining different genres and play mechanics together to create 'hybrid' games. It's fun, in a “creating Frankenstein's Monster” kind of way. 
With my current game, Jet Drift Dungeon Rally, I'm exploring this further by combining mechanics found in rally-sport racing with those usually experienced in a typical dungeon-crawler. 
EDEVOX
My creative process when working with isometric grids often comes from experiences playing these types of games from my childhood. I'll go back and study classic Rare games like R.C. Pro-Am, Cobra Triangle, and Snake Rattle 'n' Roll if I need help figuring out things like how a player moving up and down isometric slopes and hills should look.
EDEVOX
If I'm placing walls or structures onto an isometric grid, then I'll study games like X-COM or Diablo on how they prevent the player from getting stuck or disappearing behind a wall that's occupying the grid space in front of them. 
In Jet Drift Dungeon Rally, I solve this potential issue by working in the mechanic that the walls are actually alive, and will lower themselves into the ground as you approach, revealing dangerous spikes if the player gets too close. This solves the problem of any walls obscuring the player on the isometric grid, but also provides an in-game story explanation on why they visibly move and react to the player, rather than simply having the walls become semi-transparent when the player is nearby.
EDEVOX
I think the appeal of isometric art/design for me comes from two things: nostalgia playing isometric games growing up, and experiencing the same appeal as that found in similar visual design like shoebox dioramas. 
A lot of isometric games have the in-game camera higher up and pulled away, making it feel like you're watching miniatures moving around on a table-top or board game. A top-down game, like The Legend of Zelda, doesn't grab my attention the same way as it would if the game were simply turned 45 degrees. 
EDEVOX
The four cardinal directions on a controller feels natural when it has a top-down perspective. However, isometric games with the same 4-way movement can feel awkward as 'down' now makes the player move left-down on an angle. 
This is fine if the player is just exploring the game world, or if the game itself is turn-based, but if the player has to chase down monsters or dodge bullets with quick-reaction, my advice would be to add diagonal movement from the start. Adding in those four extra directions allows players to feel like they're playing a game with the traditional movement they are accustomed to, but without feeling 'glued' to the grid and zig-zagging their way around the game world.
It sounds incredibly simple, but I feel a lot of retro isometric games don't hold up because of this. They can often come off as sluggish or clunky, when in fact the character is following the direction they're being told to move in. It's just not in the direction the player needs them to move in.

You can check out more of EDEVOX's work at:

Blagica Taseska

Blagica Taseska

[I'm a] Graphic Designer / Illustrator based in Ohrid, Macedonia working as a freelancer. A lover of coffee and sunny weather, we have lots of it in our beautiful city. Creating isometric and flat designed illustrations, but also experienced in animation and video editing. My hobbies are drawing on paper and reading books (big fan of Stieg Larsson and Jo Nesbø). I also really enjoy learning and trying new recipes in the kitchen together with my partner. 

I have always been fascinated by 3D objects, the details, and complexity they bring. But on the other hand, I have always wanted to work with vector-based software like Adobe Illustrator because of its advantages. Finding out about Isometric Design was the best moment because that is the combination that I actually needed. 

Blagica Taseska
My first project was making isometric commercial and residential buildings. It was a smaller project inspired by a realistic building that I found, with a slight modification in some parts of the buildings, the surrounding, and the color. The second project was building isometric houses. While I was doing this project I actually found out how passionate and connected I became with isometric design. 
Blagica Taseska
The most difficult and challenging part of the process is planning. [For example] this project was a little bit more complex and challenging because houses have more details and the construction is different compared to  commercial and residential buildings.
In the near future, I plan to make some tutorials on how I use the isometric grid and the process of creating my isometric buildings, so if you are interested in watching such tutorials you can follow my work.
Blagica Taseska
The biggest inspiration and passion for isometric illustrations I got thanks to my partner. He was a big fan of the German gaming company InnoGames, specifically their biggest hit Forge of Empires. When I first started playing this game, I realized I wanted to do isometric buildings and surroundings. That was the moment when I was curious to find out how are these buildings created and learned about isometric projection.
Blagica Taseska
Choose to create what you feel passionate about and just do it every day. The passion for it will make you want to become better at it, and that's how you will invest yourself in learning new things. You can find inspiration in everything around you, so never stop creating and believing in the things that you create. Don't be afraid to share your creative work, because you never know how many people you can inspire and motivate.
A mistake that I made, in the beginning, was that I did not spend enough time learning  about the process of creating isometric objects. So, later, I spent a lot of time trying to find my own process, while I could have used that time to create even more isometric work.

You can check out more of Blagica's work at:

Sriram Govindasamy

Sriram Govindasamy

My name is Sriram Govindasamy, I am a Sr Visual Designer at Freshworks Inc. I am a self taught designer based out of Chennai, India. I enjoy creating quirky illustrations with stories and, when time permits, I play some video games.   
Sriram Govindasamy
I got my hands on a grid and action set by Hayden Aube which I printed out and started with some basic shape sketches, just to get the hang of the perspective. The action could turn any flat shape into a perspective (Pro tip: The default 3d rotate settings in illustrator it is way better and powerful than the external actions and it's fun to experiment with). 
I was testing the waters (no pun intended) with "swim"; I wanted to show a depth and then went on to figure out how to extrude (you can find this in 3d rotate settings) non blocky shapes with "float" [shown below].
Sriram Govindasamy
But things were getting a bit boring with the flat colours and stuffs. I wanted to get more out of this and tried adding more RAM taxing functions to the illustrations - Blend [blended objects, in Adobe Illustrator] and the results were super satisfactory "flow" is one of my favourite shots in the project. It showed me how to simulate lighting with the blend function. 
Sriram Govindasamy
Be warned though these work well only for objects. When we deal with characters these actions/settings merely come into play. Reference study helps to add humanoids to this perspective. (Pro tip: The easiest way to understand how to add a humanoid character to the comp is to look at their shoulders and hips and aligning them to the grid can be a great starting point)
Sriram Govindasamy
I started trying out isometric design in late 2016 I just got into my full time position and had a lot of free time to experiment. I was fascinated by Jing Zhang's and Igor Kozak's illustrations and how they showed a micro environment at work and reminded me of some of my favourite video games franchises like Age of Mythology, Age of Empires & Rise of Nations. These games introduced me to this perspective, never knew the name for this technique till early 2010s but they always charmed me by their ability to be "adorable".
Sriram Govindasamy
Fast forward three years and the digital illustration scene has a lot more isometric illustration repositories than any other style which kinda makes this "mainstream/old school", but I strongly believe it's not the style but the kind of story we convey with the style that sets our work apart. So practice good storytelling and feel free to use whatever style/medium that can do justice to whatever you are trying to say. 
Isometric illustration can be a powerful tool in conveying surreal/abstract concepts. The time one has to invest in understanding this perspective is a bit long and it is a tough beast to tame like any other style there are limitations but it can help setup stories at a larger scale. 
My isometric experiment project actually helped me up my illustration game at my job. We were gearing up towards a rebranding around 2017 and yes we chose to go with isometric illustrations. So you might never know ;)

You can check out more of Sriram's work over at:

Anna and Arek Kajda

Hi, we are Anna and Arek Kajda, illustrators with a focus on 3D. Currently, we work at Pitch. Previously, we’ve done work for companies like Bosch, Mixpanel and Y&R.
Anna and Arek Kajda
Our process really varies from project to project.
Sometimes we dive right into 3D app (thanks to isometric camera projection you don’t need to care about the right angle). Other times, we rely on 3d modelling for the complex objects and do the rest of the process in Adobe Photoshop and Illustrator.
A tiny tip: The “Sketch and Toon” effect in Cinema4d gives you an option to render 3d objects as vector if you want to continue illustration in another app.
It’s also really helpful for isometric illustration to start with the sketch and break down complex objects to basic components. Breaking it into parts can make the overall execution easier.
Anna and Arek Kajda
Isometric illustrations are both challenging and fun.
Because there is no perspective and no vanishing points, we find this perspective is the best way to show maps or scenes that tell small stories. It also encourages viewers to discover the details from high-flying bird’s eye view.
Keep it simple. It’s really easy to get lost in details. And if you’re struggling with the right isometric angle, try to use 3D app for sketching.

You can check out more of Anna and Arek's work at:

Thank you so much to all of the lovely artists for their time, insights, and for sharing their work! I hope you enjoyed checking out their work and hearing their thoughts as much as I did! For those looking to explore isometric work—best of luck in your experimentation! I think these wonderful artists put it quite well: jump right in and give it a try.

If you enjoyed this article, here are some others to check out!




No comments:

Post a Comment