Designing with style
A big update that we didn't have time to ship with the last release (the Hanseatic League) was an overhaul to the game's UI.
Long-time players will know that, while the UI has gone through many changes, the interface is still very lightweight and, to be perfectly honest, placeholder.
It certainly doesn't feel medieval or Gotlandish.
In this post I wanted to break down what we are working on and, maybe more interesting, how we go about updating the already quite large UI of Imperia Borealis.
Setting the theme
When designing the new UI we started by looking at the reference material. What does medieval Gotland actually look like?
Everything from colors, themes, iconography and fonts should share the same design language for it to feel consistent and on theme.
From the references we then derived a simple color palette, the base colors of our medieval Gotland.
Internally we have created a design guide covering everything from what content goes where, hover effects on buttons, gradients that are OK to use, decorations (and how they function based on context), and much more.
We also created a sort of testbed, isolated from the actual game, where we could try out changes, tinker with proportions and generally get a feel for the look. It's set up in a way that it can later be, more or less, easily imported into the game when we're happy with the result.
Iterate, iterate, iterate
With all the building blocks in place, the real work begins. We iterate on different versions of the UI, keeping what we like and discarding what we don't.
This phase never really ends, and you'd be surprised how many times a button can be moved just a few pixels to the left or right. It's a bit like moving furniture, but without the heavy lifting.
Simple work
It's when doing this kind of major overhaul that you realize just how much UI, and variation of UI, is actually in the game. The CSS (Cascading Style Sheets, what browsers use to style websites) is mostly nice and modular, but combined we are talking several thousands of lines of code.
If you have ever worked on a larger web project, you also know that CSS can be one of the most rewarding but also one of the most annoying things to work with.
When it works, it feels great, but then you spend an hour trying to align that one button and swear you will never touch stylesheets again in your life.
New UI When?
We believe the UI update will really take Imperia Borealis to the next level, from a neat prototype to something more like a real game.
We will begin the rollout of the UI update in the near future, likely during next week. Keep your eyes peeled for that fresh new look in game: