UI Design

Hey gamers! I’m here to share a key part of development with you: UI design.

When designing UI for Exclusion Zone: Reclamation, I wanted to create a diegetic UI that would help immerse the player. “Diegetic” UI is UI that exists within the game world, rather than just an overlay only the player can see. Diegetic UI is excellent for immersion and communication of the story. Because Exclusion Zone: Reclamation mostly communicates its story through environmental details, rather than exposition, it was important to accentuate the UI as an aspect of the story and world.

The first step in designing the UI for Exclusion Zone: Reclamation was sketches and concept art. This sketch was an early concept for the powerup selection UI:

The concept was a cyborg arm, using data chips to download different powerups. This connects back to the story of the player as a reclamation agent in a post-apocalyptic world.

From these sketches, I created a UI flowchart which shows how each screen connects to one another. This step is vital in communicating the function of each screen in order to help the coders set up the necessary functionality. I did this in Miro, a team-based whiteboard program which allows the entire team to have access to the flowchart, as well as make comments in the form of sticky notes if any questions or concerns were to arise.  

Once the flowchart was complete, the technical build was begun (with no assets) to test functionality:

Mock-ups were then created in Procreate (a 2D art program). This allowed us to experience the visuals of the UI without having to spend reworking the technical aspects of the UI over and over before the final concept was finalised. 

After some iteration, the newly created assets were moved to Unity.

Functionality for basic buttons was created, although most of the text was only a placeholder. Most of the time developing the UI was spent in this stage, with lots of tweaking and polishing done to perfect the colours, layout, and readability.

And here is the final version created for the Beta! There still may be tweaks yet to come, but the power select UI has come a long way!

This process has been completed for various other UI screens as well. Here are some of my favourites: