Journey to the Ashen Glade

Journey to the Ashen Glade is a user interface design project based around a hypothetical dark fantasy dungeon crawler game of the same name.

What I did:

- UI design

- UI art

Software used:

Unreal Engine 5

Clip Studio Paint

My goal was to create a clear and easy to follow interface with the right amount of settings for user customisation, all communicated through a beautiful and dark aesthetic. The project includes a front end as well as a HUD.

Firstly, I thought about how convoluted dungeon crawling games can sometimes be as there is a lot of information for the player to know all at once, so I focused my efforts on narrowing down the essentials to present to the player in a clean way.

HUD:

Features a character portrait I drew in the bottom left to accompany the health and stamina bars. The character name and level are also present. The player's equipped attacks are in their attack bar at the bottom middle, and to prevent screen clutter, the specific attack info is found in hoverable tooltips. The top right of the screen shows the dungeon map and location name, as well as a compact drop down menu that leads the player to other menus like the map and inventory.

Front end:

Features comprehensive, fully customisable settings and a credits menu. All menu switches utilise a fade animation I created in the Unreal editor. This adds to the atmosphere I'm trying to create with the main menu, and provides a smoother user experience. Sound design is also incredibly important in user interface/experience, and I used sound effects for the hovering and clicking of menu buttons that fit with the theme and aren't too intrusive in the user's ears as they will be pressing a lot of buttons.

Furthermore, a simple save select screen was implemented as the first page after clicking 'campaign', and presents crucial information the player is able to use to differentiate their save files, including last location, level, playtime and difficulty. Clicking 'new save' will take you to the difficulty select screen, where 3 options are evenly spaced out with descriptions and corresponding medallions.

The tutor who marked my work described my aesthetics as 'excellent' and remarked on its 'clear theme'. They also praised the flow of the interface, describing it as 'clear and easy to follow'.