Path of the Djinn

We've redesigned the UI & we got a new team member

This post is going to be a little sparse, I assume the title combined with a visit to the steam page and the announcement post will suffice for most. But, if you are interested in a bunch of details about how we came up with the UI or if you wanna see the face of the new team member, keep reading.

When we released the Steam page we weren't really happy with the UI, it was an increment over the alpha one and it was a mish-mash of pieces obtained by butchering our pixel art assets and far too many hours spent in aseprite trying to make something out of it by me. That wouldn't be a problem but it just looked bad, had low readability, low contrast, and didn't really feel nice.

We knew it had to be fixed, but didn't know when, luckily, while collecting feedback, we bumped into a very kind user (shutout to esiao :)) who happened to be a designer, which pretty much gave us a reality check and led us to dive into a UI redesign asap.

One elephant in the room that we had from the get-go was that not many 3D games have a pixel art interface, even 2DHD or 2.5D games. We went for a pixel art UI because it was supposedly simpler (more on that soon) but we lacked a reference and perhaps we just aren't good enough to make a pixel art UI work in a sort of 3D "high fidelity" world.

To make things worse, we have pixel art entities (characters, props, etc.) in the game, can we get away with mixing pixel art icons (skills, portraits etc.) and non pixel art icons? Will it fit? Again, not too many references in the video games landscape, and for sure we aren't experienced designers who can navigate these waters with ease.

These, among other questions, were part of the puzzle that we had to solve if we wanted to achieve a decent UI, I think we did that, but not without a lot of work.

First of all, we collected references about what some people would call 2DHD games (but we can't call ours like that, squareenix trademarked these four characters in a row ;)) and studied their UI. To have a starting point we settled for a dark style with bright borders and text, some transparency, some glossiness. Not particularly original but it gave us a guideline to start working on.

We went with Krita to do the actual work, which is awesome OSS software, give it a shot! To my surprise, I discovered that making some geometric shapes, adding some gradients and a bunch of decent-looking details wasn't too difficult. For the programmers, it felt more declarative than pixel art, which is based upon placing each specific pixels (don't quote me on that) and thus tends to be more imperative.

After a lot of work and discarded ideas we finally landed on a style that convinced us, as before, dark backgrounds, transparency, glossiness, but with a sort of starry theme. Dim yellow borders, light yellow text, stars scattered across the background of the panels, and yellow decorations obtained by playing around with brushes in Krita or by transforming some of our pixel art assets in brushes.

Here are a couple of screenshots with the new UI, head to the steam page for more! Note: we still haven't updated the trailer and won't do so for a while, we are now working on the combat and will wait for that to redo the trailer.

Path of the Djinn

Path of the Djinn

You might have noticed that skills and skill perks icons are still placeholders, we aren't exactly sure when, but we'll eventually settle on a style for those.

New Team member

As I've mentioned at the start of this post we have a new team member, he's a bit inexperienced and tends to be on the furry side, he also sleeps on the job, meet René :).

Path of the Djinn