Website powered by

SteamWorld Build User Interface

SteamWorld Build is a resource manager video game developed by The Station and published by Thunderful Publishing.
This post details the work I did for the UI for SteamWorld Build. Icons were made by myself and my lovely team, Hampus Viklander, https://www.hampusviklander.com/, Max Nafar, https://www.artstation.com/max_nafar & Michal Kowalski https://www.artstation.com/michalkowalski . In-game highlight system concepts by Gabrielle Nilsson, https://www.artstation.com/gabriellenilsson

Right from the start, the idea was to make the UI feel physical, rather than abstract, and using blueprint paper was a given. The blue would contrast well with the orange desert and brown mine palettes.

Right from the start, the idea was to make the UI feel physical, rather than abstract, and using blueprint paper was a given. The blue would contrast well with the orange desert and brown mine palettes.

It was a heavy UI, where we had to balance information clarity and usability - something I often feel similar games lack. The middle of the screen had to be kept clean, and as many menus as possible should be turned off when not in use.

It was a heavy UI, where we had to balance information clarity and usability - something I often feel similar games lack. The middle of the screen had to be kept clean, and as many menus as possible should be turned off when not in use.

The first concepts felt too industrial and we quickly realized we had to keep them as warm as the rest of the game, as well as push the graphics to match the fidelity of the 3D art.

The first concepts felt too industrial and we quickly realized we had to keep them as warm as the rest of the game, as well as push the graphics to match the fidelity of the 3D art.

Most of the UI design was made in Miro using simple shapes, and then styled in Photoshop. We found that the further along we got, less arty and more user friendly did we have to make it.

Most of the UI design was made in Miro using simple shapes, and then styled in Photoshop. We found that the further along we got, less arty and more user friendly did we have to make it.

Screenshot of the final In-game HUD. As you can see here, the UI is clean, warm and simple, reminiscent of games I grew up with.

Screenshot of the final In-game HUD. As you can see here, the UI is clean, warm and simple, reminiscent of games I grew up with.

We also made sure to match the in-game highlight effects to the Blueprint paper - here seen in action in the mine.