The Art of Projekt Z - User Interface Design
10 April 2022

The Art of Projekt Z - User Interface Design

Hello Survivors, in this blog post we’re talking about some Art of Projekt Z. This time: User Interface Design, or better known as UI-Design. Every Game needs a clear and understandable vision of how the user should navigate around the Interface. We talked a lot of the Art and Feel of Projekt Z in the past. Dozens of Meetings and irritations were made internally. In this blog, I want to bring you the interface side of Projekt Z closer.

The general Art Direction

Projekt Z is a dark themed coop survival Shooter on a secrete German island. 

Most of the time you will face the absurd projects and places of the Germans. We wanted to bring the Dark themed environment and feel to the Interface itself. 

A modern and timeless approach on the general Art Direction were our way to go. 

But how we exactly come up with our latest concepts? 

At the time we were discussing the game design document and had a clear vision of the game in our minds, we were exploring and reading a lot of articles, books and literature based on the events that happened between 1939 and 1945. 

We collected all types of images, fonts and art from the past and got a better understanding of the time the people were living in.

The Moodboard

In a Design process where the Designer has to develop an art style, it is typical to collect ideas on a Moodboard. 

A Moodboard is a common approach in the Art and Design industry. The Moodboard should give a glance on what the end product should look and feel like. 

An example of our first Moodboard iteration is here:

This was our first iteration on the Moodboard back in 2020. Basically, this is just a photo collection on an Artboard. Some Moodoard elements have made it into the User Interface that you will see in a moment.

The final Design

Now it’s time to bring the vision we have to life. In the second stage we’re doing a concept stage and wireframe the Ideas we had on a pice of paper and later on into Adobe XD our UX and UI Design Tool. 

A wireframe is basically a blueprint for the final design, where we do the User experience and place gray boxes to see if the navigation make any sense. A glimpse of what a Wireframe looks like:

The current result: Wireframe and Design combined:

Note: Concept. Not Final.

And here is a look at how the Art Direction and User Interface Design work together: 

In this concept of our new Inventory, we’re exploring the layout and the art direction based on our Moodboard and Wireframe we have done earlier. Please note at this point: All is subject to change and nothing of it is final! Thanks to your feedback in the latest Devlog, we could improve our first concept that you’ve seen in the Devlog.

After the initial Design, we’re testing and prototyping Animations.

Here is a qucik look:

Placeholder Assets by Escape From Tarkov

I hope you got a first quick look in our Workflow and the general User Interface Design of Projekt Z and why we decided to choose a more dark themed approach. 

Don't forget to save our Kickstarter campaign! The Kickstarter will go live on April 29th at 2 pm CEST!

You can save it here.

The Art of Projekt Z - User Interface Design