Dev Blog - UI

Friday, April 2, 2021

Dev Blog - User Interface

Our vision with Ravendawn has always been to have innovative solutions in the world of isometric games, a genre that has generally been un-innovative. Our user interface (UI) follows the same philosophy. We wanted something unique and modern for our UI instead of the classic old approach. Our design allows for the entire screen to be available to the player, instead of having bulky UI elements all around their screen hurting their immersion and cluttering their screen.

Our main references for our UI have been New World and Ghost of Tsushima and have been valuable reference points for the creation of our UI. We spent quite some time studying both these modern UI’s, to understand why they were designed the way they were, how we can apply the same fundamentals to work in a game like Ravendawn.  

Our main concern was how we would make use of a UI like this in an isometric PvP game without jeopardizing the gameplay where players may attack other players at any point in dangerous locations. That leads us to design the UI with 40% transparency, allowing the player to still follow what is happening in the game while using the UI. Additionally, instead of filling the screen space with UI, we decided to keep most of the UI panels very clean and lean on what is displayed, to allow the player to see as much as possible while using their UI when necessary.

Below you can view one of the more frequently used UI’s, the Spell Tree & Archetype UI.

We have a top menu, also known as the navigation bar, divided between the main topics of the game: Character, Professions, Tradepacks, Ravencards, World Map, Social, Misc, and Settings. Within each category, we also have submenus with the content related to each option.

Below you can see our inventory UI. While in several other games in our style, the inventory UI is required to be frequently used and it makes sense to always have it on your screen, on Ravendawn that will not be necessary for the gameplay.

 

While a lot of comparable games have used 16x16 > 32x32 resolution sprites, we instead are using fully illustrated 64x64 resolution items. This allows us to deliver a much higher quality image and also add more detail and depth to keep every item unique.

Here you can see how items look in your inventory:

 

Here you can see the Professions UI:

The circle around the icon fills according to the progression of the level of each profession.

We remind you that the interface is still being tested and further improved, so some things will change like the spacing between the texts, the arrangement of icons, etc. But we couldn’t wait to share with you our modern design.