Structure in Madness: The UI Design of Stygian

Greetings fellow inmate,

Yes, we are completely aware of the fact that what you had to go through was not a fabrication of your mind. On the contrary, my dear, it was as real as the air you breathe or our darkening sun that fails to warm your soul as it used to… 

Let them believe in their petty, fragile reality and try to cure you like it will make any difference in the upcoming times. Oh, don’t you worry, the Black Day is nigh my dear…

Until our time comes, let me further educate you in our ways. They may call us mad but there is a structure even in madness… Let me introduce an old friend to you…

Hey backers, I’m Mehmet Reha Tugcu, the UI designer of Stygian and I’m here to talk a bit about our user interface. Our primary goal while designing the UI was to preserve the aesthetic of the game while maintaining the user friendliness of modern games.

                                          A segment of character creation screen

Much like the RPGs of old, our HUDs are highly decorative and textured. Even though our UI is a homage to the godfathers of the genre, we’ve tried to avoid their flaws like cluttered elements and confusing players with information overload. Hopefully older players will feel right at home using the interface while newer players won’t be overwhelmed by the depth of the game.

                                          A segment of trade screen

We’ve spent a lot of time on perfecting the typography. With a single glance, players will be able to discern the flow of information through the header fonts,colors and sizes. Stygian has so many different UI panels; the character screen, inventory, map, character creation, exporation, combat, grimoire, journal and much more. With a UI this vast, it was extremely important to be consistent with our design language so it would all feel connected and immersive.

                                          A segment of character screen

                                          Character Portrait Selection

Aesthetic wise, we used real paper, leather and marble textures on a lot of the panels. Our grimoire was made from scratch using paper scans overlaid on top of each other. Every scratch and burn mark on it was placed intentionally. The UI uses a lot of dark shades and textures that complement the game world. All of our panels open as pop-ups, you’ll still be able to see the world of Stygian around these panels. All these decisions were made to avoid immersion breaking transitions between the game and the UI.

                                          A segment of Grimoire

Stygian is primarily designed for PC and the UI takes advantage of that. Our inventory is huge and includes features like filters and a search bar. We also have a dynamic cursor with a gem embedded inside that changes color depending on what it’s hovered on. Most modern games develop their UI in the last few months, with Stygian we designed the UI with the game itself and as the game grew, so did the UI. Our exploration UI went through several iterations, we’re currently in the process of adding gemstones that represent the character’s visibility in stealth.

                                          A few of our Archetype symbols

I’ve had a lot of fun making the UI of Stygian, hopefully you’ll enjoy using it as well. Feel free to check out the details of the UI from the link below. It’s from an older version but it’s pretty close to what the finished product will look like. Take care!

For a more detailed look at the UI elements of Stygian:

https://www.behance.net/gallery/58888283/Stygian-UI

Ah, don’t you worry dear, you’ll learn more in time. Just be patient. 

Take your medicine now and be a good patient. 

Until we meet again in the filthy corridors of Arkham Sanitarium.

Team Cultic

Your email address will not be published. Required fields are marked *

*