I wanted to try creating a diegetic UI as a technically challenge, as its something I hadn’t done before. I typically work with non-diegetic, screen-based UIs, so when the chance to experiment with this new approach came up, I eagerly took on the challenge. This project was been a great opportunity to push myself and learn new tech skills. My diegetic UI integrates all UI elements within a mobile phone, which also serves as a key gameplay mechanic.

Gameplay Trailer

Development Log

Research and Design

Diegetic UI is part of the game world, with characters directly interacting with elements like health bars and inventory systems. Unlike static UI, where characters are unaware of the interface, diegetic UI keeps the player immersed, as seen in Dead Space with the health bar displayed on the character’s back. While this approach reduces screen clutter, some players may prefer static UI for its familiarity.

Blair Witch

Blair Witch - Annotation

Dead Space

Dead Space - Annotation

Firewatch

Firewatch - Annotation

Wireframe Design

The piece of UI I wanted to create was a phone that the character holds. I decided this would be best as there are a lot of applications and function I could recreate in UI form. When designing my wireframes I decided to look at my own phone for reference. This helped to make things looks realistic enough, so that players could be more immersed. I started off with a main HUD with four widget applications in mind.

Phone HUD

Phone HUD Annotations

Map Widget

Map Widget Annotations

Texts Widget

Text Widget Annotations

Photo Widget

Photo Widget Annotations

Call Widget

Call Widget Annotations

Low Fidelity Wireframes

I used the low fidelity wireframes above to recreate this in game. It was easier than I had first anticipated, because I expected there to be a lengthier process. However, I found it to be incredibly similar to non diegetic UI, at least in the way I created it. This lead me to create more apps for my mobile phone base.

Phone Application: Map

Phone Application: Call Log

Phone Application: Texts

Phone Application: Photos

Final Screenshots and Further Development

This project started off as a technical challenge, focused more on the function of the diegetic UI. However, I am continuing development on this project, with intent to polish up the design and art aspects, add widget animation and create a fully narrative with more gameplay mechanics. I would love to get this in a state where I can publish this as a short game experience.