Salutations, Industrialists!
Salutations! The focus of this Dev Diary is UI Design! Specifically, we will be discussing hierarchy and interactivity.
In this Dev Diary, you will meet Timor, who recently joined our team as the Art Director for Gilded Destiny. He previously worked for a company that we are sure a lot of you are familiar with. Also, be sure to watch to the end, as we have a special guest towards the end of the video!
We are pleased to announce that our Kickstarter has officially ended. It brought in a total of £31,974 GBP, which is 159% of our goal! We offer the most gilded appreciation to all of our backers and our community. Your support, positive feedback and encouragement, and our growing vibrant community of industrialists motivates more than ever to make Gilded Destiny the most moddable, immersive, fun, and grandest GSG out there.
You can find the full script for the Dev Diary below.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Let us know if you have any questions or feedback over on Discord. And be sure to wishlist us to stay up to date!
Join our Discord community today!
https://discord.gg/3d77T9gxDF
Finally, if you are interested in what we do and want to join us but do not see a relevant job, send us your resume at [email protected]!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Script for Dev Diary 16:
Greetings, ladies and gentlemen, and welcome to another Dev Diary for Gilded Destiny.
Allow me to introduce myself. My name is Timor and I have the privilege of working as the art director on Gilded Destiny. Before joining Aquila interactive in late January of 2024, I worked at a company I think a lot of you are quite familiar with... But I'm getting ahead of myself.
Before I begin, I want to say thank you to everyone who backed our Kickstarter—which ended earlier this month and earned almost £32,000 and reached 160% of the funding goal!
My first job in the Gaming Industry was actually at Platinum Games in Osaka Japan, and the very first title I worked on was Metal Gear Rising Revengeance. I'm sure that a lot of you have heard rumors about how it is to work in Japan, and I dare say that at least 50% of those rumors are true. So in 2014 I got a job at Paradox Interactive and moved back to Sweden. Initially I was working at Paradox North, on the Magicka IP, but when that studio was shut down, all of us were fortunately offered positions at PDS, Paradox Development Studio. I was at Paradox Interactive for 10 years, until early 2024, and worked on just about every PDS title in various capacities. I have done just about anything from flags for Stellaris and icons for Europa Universalis IV, to loading screens for Hearts of Iron IV and complete UI designs and redesigns for Imperator: Rome.
And now, here I am, working on Gilded Destiny. I hope to make this a user friendly, and aesthetically pleasing game experience, without sacrificing any of its complexity and moddability.
Today I would like to show you some of the work I have done so far on the Trade Interface. If you wish to learn more about Trade and its game design aspects, please have a look at the previous dev diary: Dev Diary 15 - Trade and Logistics.
First of all, as you already know, this is all still a work in progress and may be subject to change. In fact, there are already parts of this interface that have changed while I was writing this dev diary. I would also like to mention that I am still fairly new to the team, so I can not take credit for a lot of the art you see here.
Today, I would like to focus on two things. Hierarchy and Interactivity. Let's start with the former.
Hierarchy in UI is something we very rarely think about as players, but it is so obvious when it goes wrong. For instance, if you saw a Trade interface where the information concerning foreign trade was under the Domestic header, it would be confusing to say the least.
Just like the game needs needs a hierarchy for its various mechanics, the UI must be able to visually represent this hierarchy.
Looking at the Trade Interface, it should be clear that there is a hierarchy of information being presented. This can be seen in the headers.
First of all there is Trade. Within that there is either Domestic or Foreign trade. Within Domestic trade there is the category of Commercial Diplomacy (among others), and within that we have things like Trade Agreements and Access Agreements. Pretty straight forward stuff, right? Now lets try to visualize this hierarchy through art.
By giving each header a distinct look, we can create a visual language that can represent this hierarchy. When doing this, everything from the visuals of the font to the decorative elements of the background plays a huge role. Just as the headers level in the hierarchy goes up, the "fancyness" if you will, needs to go down.
For example, imagine if we switched around the Level 3 and Level 4 headers. Like so...
Here we can see at a glance that something is off. The Level 3 header doesn't feel more important than the Level 4 header.
These are the kinds of things one needs to keep in mind when designing a visual language for a User Interface. Effectively, we are creating visual rules for ourselves that can help the player read the UI at a glance, and understand what is more important than what.
Pop quiz time!
If we were in need of a Level 3 Header that should function as a Tab, can we simply reuse the graphics of these Tabs here?
The answer is "No."
The reason is simple.
It would have the same "fancyness" as the Level 2 header, causing confusion with existing Tab graphics, as well as simply not looking good.
Now lets move onto Interactivity.
I would like to conduct a little experiment. Please take a moment to look at this interface, and tell me which elements you think are clickable, and which are not.
Normally, of course, it's difficult to tell without being able to mouse-over parts of the interface. Something Grand Strategy Players often do is hover the mouse over every element on screen, looking for that mouse-over effect to deduce what is actually a button and what is not. There is nothing wrong with doing so, but I dare say that this is a side effect of an unintuitive visual language. Ideally, one would want the player to be able to tell what is a button and what kind of effect it has merely by looking at it. The most obvious example of this would be the close button. Its position, color, and icon are things most computer users are very familiar with.
Hopefully, when you look at this interface you can see the pattern for what is clickable and what is not, but I'll leave the excitement of finding out if you are correct till the release of the game.
[During the previous sentence the "Troll" image slowly slides up in the bottom left of the screen and slides back down. Doesn't need to slide all the way out.]
I realize that I am explaining something extremely basic and fundamental right now, but these are things that can very easily get out of hand when you have: Headers, Tabs, text buttons, icon buttons, sliders, progress bars, menu buttons, flags, list entries, pie charts, graphs, scroll bars, collapsible menus, sort buttons, filter buttons, check boxes, toggle switches, and so much more.
Ahem...
As you can imagine, it can be quite challenging to create a visual design that is consistent across all interfaces. Sure, a Close button is always a close button, but an icon button can be so much more. So let's take a look at a few variations of these.
Here we see three icon buttons, outside of their natural habitat. They have yet to grow distinctive icons of their own, and instead display merely a common question mark. However, even at this young age they exhibit signs of the functions they will eventually serve.
As we can see, the first button camouflages itself against the greenery of its background. It does not want to draw unnecessary attention, and remains a subtle, unobtrusive member of the species. Although it shares its shape with the rest of its family, it bears tiny arrows on one side, which mark it as a sort button.
The button in middle is somewhat smaller - but its diminuitive stature is deceptive. This creature holds the power to build factories, raise and lower market prices, and so much more. This is an action button.
Last, but not least, we come to the largest of the trio. Aside from its green edges, there appears to be very little relating this button and its cousins. Yet the primary connection lies not in the color of its edges, nor in the drop shadow effect. Instead, it is in its leathery texture, and the distinct pigmentation of its icon, that we find evidence of their shared heritage - for this button is a menu button. Like its fellows on the left side of the screen, it is capable of guiding the player to other menus and habitats, where even more buttons can be found.
And that concludes this Dev Diary. I hope you found this informative and entertaining. Although we barely scratched the surface, hopefully this gave you a small glimpse into the intricacies of UI art and the thought that goes into it.
Thank you very much for watching.
Also:
Be sure to listen closely to the backing tracks in all our videos—they are the pieces you will come to hear in the game, composed by John Skoog. Also, the solo clarinet on this track was performed by yours truly, Marc.
Listen to some of John Skoog's other work on Spotify: https://open.spotify.com/artist/3PGd3lmURa72oFasqK3N7N?si=nDl4DUTRQGKKLaDtGcHBJw
John Skoog Music: https://www.johnskoogmusic.com/