I’m doing tonnes of these small UI sketches. There’s 27 of them in this batch, I’m going to resolve 5 into larger sketches with the exact number of buttons on them that my “information architecture” requires.

I’ve specified this architecture, it is a simple sandbox city building experience. However, I was a bit random with the number of buttons, only having the idea there are “some” main buttons, “some” secondary ones, and a content area. I didn’t want to inhibit by creativity while I was doing the thumbnails. This needs to be more accurate in the larger sketches that I will do soon.

Here are some quick conceptual sketches for the UI of my city design app. The idea is to go crazy and explore many different alternatives.

(1) This literally is the idea of an architect’s desktop, the city appears on a piece of millimetre paper. There are tools on the desktop such as pencils and erasers that are interactable and can be selected; (2) The city can be constructed on a sphere, like a small and over-populated planet. There are two curving arcs of UI controls in the top-left and bottom-right corner, and the planet can be rotated with swipe gestures; (3) Japanese folding screen with clouds painted on it, a slice of the city appears in front of the screen; (4) Old television box, the city appears on the CRT screen and there are skeuomorphic knobs on the box; (5) Slice of the city is visible in isomorphic perspective, the UI controls are placed in the same perspective grid; (6) The user builds towering blocks starting with a very small foundation, they become increasingly unstable as they get grow higher; (7) Triangle grid with two UI panels in front of it; (8) Borg cube type of a city, the four small cubes contain navigation controls in the four directions; (9) Slot machine for randomized city design; (10) Jewel, or bracelet, that encircles a vignette of the city. There are gems on the bracelet with the UI controls on them; (11) Another triangle grid, this time the UI controls are in the aqueduct structure behind the city; (12) Spherical orb with ribbons of UI controls floating around it.

I’m currently working on Angular city builder app for my Honours project at Abertay Univeristy. Over the Christmas period, I implemented the UI for proximity check between buildings.

Each building has an “occupied area” as part of the sprite. When you drag a new building, it moves with the mouse until you click and place it. During that movement if the building overlaps with something on the map the “occupied area” is highlighted in red. When there is no overlap and everything is ok, the circle around the new building is highlighted in blue.

The building palette and the map are separate Angular components. I used the @Output event to signal to the map when a building has been selected on the palette to start dragging it. When the building has been dropped on the map, I notify the palette UI that the action is completed.

Also, I’m starting to work on the road network connecting buildings in the city. There are 11 road elements depending on adjacent tiles. There is also a 12^th ‘null case’ of a completely isolated road element, but I will just default to a horizontal road for this special case.

This is a web game, so I have to pack them together, or the game will make separate HTTP Get request for each piece of road. I’m exporting the pieces as image sequence from Photoshop and using kritaSpritesheetManger to pack them together. This is the best export plug-in that I know.

The road tile is implemented as TypeScript class that knows which element in the tile-set to display based on context of the 8 surrounding tiles. This is calculated on the fly when rendering the Angular template. I could pre-compute it, but it’s not really slow. I actually have to re-focus on artwork soon, instead of optimizing, my idea is to paint a background in acrylics inspired by Yves Tanguy.