I wanted to create an illustrated city for the hub of my product. As users progress through the game, they would improve aspects of the city using the SDGs as a guide. The city would start as a wreck, and visually improve every time a goal was completed. This would provide visual feedback and reward the user for learning about the goals in a relatable way.
To start this part of the project, I listed all the buildings I would need for the city. Generally, it was one building per goal, however, there were some buildings I included because they were essential to a city and it would feel weird without them. After listing all the buildings, I grouped them into related buildings, which would help to start the structure of city.
I did a rough sketch of the city to block where everything would go, including roads and paths. This went well, however, I wanted to work on this a bit and get it into a square shape, as this would help with some of the plans I had for visualisation.
I re-sketched the city, now focussing more on the scale between buildings. Rather than divide things like the office area into separate buildings, I just blocked it out, as I could focus on the visual details later. I decided that it would work better if I just got the block areas in, and then only focus on separate buildings when it came to illustrating.
One key aspect of the city visualisation I wanted to do was to draw the city isometrically, creating a 3D effect. I had initially started in top-down 2D as this was much easier for planning, however now I had to translate the city into isometric 3D. I hadn’t drawn like this before, so I started by just playing around with the isometric graph paper I had bought. I felt this worked really well and would be a great visual aspect of the city.
After exploring how isometric sketching worked, I started translating the top-down sketch into isometric 3D. Again, I just blocked this out as I wanted to illustrate the buildings on their own, but this was helpful for me to decide the heights of buildings to ensure everything was visible.