The Alpha UI for National administration

23 Aug , 2017 Particle Nations

The Alpha UI for National administration

Notice: We promise next time we will be showing in-game footage. Please enjoy this wrap up on the UI meanwhile.

The path of perfecting anything is fun. Knowing you will never get there takes the pressure off it. That said, in a production schedule you must have milestones to know when to call it “good enough”, bring the product up to speed, then iterate again.

Today I’d like to share with you the latest milestone we’ve achieved on the UI, and not too long after, share with you it’s implementation as well.

Important note: below you will find mockups, not screenshots. It means some iconography might be repeated/missing and values are likely to be incorrect.

Familiar yet simplified

At this point changes are more subtle. During the phase of defining what anything is, mockups can change radically from one iteration to another. We are still defining some aspects of the game, but it’s come down to improving the current UI toolkit rather than inventing more components from the scratch.

National view

Above is the National view. What you see when you enter the game. It now sports a cleaner look, flower-like distribution for the buildings, a unified view switcher on the bottom left, data layers drawer above it, a compressed actions queue on the top right, a navigation compressed as well on the top left, and additional status information on the bottom right.

This is a clutter test. More components than we will actually see on the screen at once, to ensure we have leftover space for any kind of drawer, widget or tooltip that might become necessary in the future.

After many iterations, we have defined how we want to display the breakdown for Attributes. Text aids to distinct what each groups means regardless of the colors, and the simple black-background white-foreground theme make it very easy to read. The scene, now out-of-focus, help the user pay attention to this piece of information.


Happiness will be informed as a bunch of Complaints and Praise icons, the bigger the more prominent. It allows us to have more meaningful feedback on what is wrong with the nation, as opposed to more progress bars and averages.

Clicking on an object on the Happiness view will display the actual complaints and praise that each sector has.


Given we have a more complex capacities system on the nation, we will now be presented with split views when clicking some facilities, displaying which constructions provide one thing or another (i.e: power lines provide Power Distribution, while power plants provide Power Generation).

Please note the lack of iconography above may make this view more confusing than it should.

That said, we will also have contextual budget or tax drawers on the bottom right when applicable. Normally on this screen we wouldn’t see this, as budget and taxes are set on a per-facility basis, not for the whole category (i.e: we’d have to enter the Small coal plant or Large wind power facilities to adjust the budget for each).

Private facilities, like Recreation (pretend those coal plant icons are actually buildings like bars, discos, sports clubs, etc…) will display an average desirability on the bottom left, although entering each building type would allow us to see a detailed list of what is increasing or decreasing the desirability for each building type.

Again, this might look even more confusing due to the lack of recreational facilities iconographies. Imagination time.


After a lot of iteration, once again, we have a cleaner look for the Finances panel.


Population looks fairly similar. We still don’t have specific icons for each age group, but you get the point.

We are aiming for a graph bar now that has more information on it, plus a 50% guide in the middle.

On this mockup you may also appreciate the new contextual policy drawer at the bottom right – in this case Income tax – with a centered tooltip explaining the core effects of the selected value.

A summary of this work

Plenty of time, care, love, and attention to detail has been put to deliver a UI that’s functional, beautiful, and carries a unique style.

Next up

A picture might be worth a thousand words, but videos are made of many pictures a second. Imagine how many words a video is worth!

This is why on the next developer log we hope to show you actual in-game footage, where you will be able to appreciate all the subtle yet gorgeous animations this UI has. Plus introduce to you a new team member that has been helping get all of this done faster for the past couple months.

Stay up to date by following @ParticleGS on Twitter!