The Dark Cradle (Menu)

Top_DarkCradle

The Dark Cradle (2018)

Platform

Team Size

Tools Used

Setup

Download

About

Project Duration

The Dark Cradle is a 3D - first-person shooter game, where the main protagonist is a female scientist who is the last hope of survival onboard a spaceship filled with hostile robots. She must find the way to survive with her creation, the electric orb emitting gun, while she:

traverse dangerous terrains
solve puzzles
complete quests

15 weeks

Critique

My Role(s)

UI / Modeling Champion

For this project as a UI/UX Champion, I was tasked to focus on the various aspects of UI such as the menu screens, the main gameplay screen, and various icons to aid players in visualizing the meaning of various objects within the game.

Design Iteration Process

- The stages of design prototyping were: Conceptualization, Mockup, Implementation, Critique, Re-iterate.

Main menu

For Dark Cradle, what I had as an idea initially was to have 4 different buttons with hovering animated circles which will move around the buttons when it hovers on when a specific button is being selected.

However, due to time constraints and feasibility of the tasks being done on Unreal Engine 4, I had to settle on a simpler version of the button so that it could work and iterate from there on.

Options menu

For Dark Cradle, the initial options menu was created such that it can utilize the minimalist design which is being incorporated throughout the entire visual feel for the menus.

However, the initial one did not really fit well in terms of shape and visual literacy to players well.

Thus, I decided to change it such that it would better fit the overall theme.

Loading screen

For Dark Cradle, the initial loading screen that I had perceived was one that was able to inform players the next area they would be loaded into, for example, the main gardens present within The Dark Cradle.

However, it was too tedious on the programming side with little time left, thus we settled for a loading screen which has animated dots to show that the game is loading.

Pause menu

For Dark Cradle, the pause menu was created to allow players to have a break in between strenuous hours of gameplay, or for them to learn about the controls within the game.

The idea was to unify the interface to make it look similar to the ones we had within the game, thus, I re-used the initial dialog box that we had for the NPC within the game, and used it.

However, in the end, the buttons do not really fit with what we had from other menus that I had created, thus I changed to another simple rounded edge button.

Game cursor

For Dark Cradle, the game cursor plays an important role for players to navigate if they are using the keyboard and mouse while playing our game.

Thus, to give it a better immersive look, I went to think of a cursor that can fit the game, and I initially created a cursor which looked like the main weapon within the game.

However, due to design and visibility issues, while testing with the cursor, it is not feasible to block the player's view because of a customized cursor, thus I created a newer cursor which would not obstruct the player's view and still know the things that they are clicking or selected on.

Conceptualization

Mockup

Implementation

Reiterate

JESSEN YONG

UI/UX DESIGNER & GAME DESIGNER

The Dark Cradle (2018)

Platform

Team Size

Tools Used

Setup

About

Project Duration

The Dark Cradle is a 3D - first-person shooter game, where the main protagonist is a female scientist who is the last hope of survival onboard a spaceship filled with hostile robots. She must find the way to survive with her creation, the electric orb emitting gun, while she:

traverse dangerous terrains

solve puzzles

complete quests

15 weeks

My Role(s)

UI / Modeling Champion

For this project as a UI/UX Champion, I was tasked to focus on the various aspects of UI such as the menu screens, the main gameplay screen, and various icons to aid players in visualizing the meaning of various objects within the game.

Design Iteration Process

- The stages of design prototyping were: Conceptualization, Mockup, Implementation, Critique, Re-iterate.

Main menu

For Dark Cradle, what I had as an idea initially was to have 4 different buttons with hovering animated circles which will move around the buttons when it hovers on when a specific button is being selected.

However, due to time constraints and feasibility of the tasks being done on Unreal Engine 4, I had to settle on a simpler version of the button so that it could work and iterate from there on.

Options menu

For Dark Cradle, the initial options menu was created such that it can utilize the minimalist design which is being incorporated throughout the entire visual feel for the menus.

However, the initial one did not really fit well in terms of shape and visual literacy to players well.

Thus, I decided to change it such that it would better fit the overall theme.

Loading screen

For Dark Cradle, the initial loading screen that I had perceived was one that was able to inform players the next area they would be loaded into, for example, the main gardens present within The Dark Cradle.

However, it was too tedious on the programming side with little time left, thus we settled for a loading screen which has animated dots to show that the game is loading.

Pause menu

For Dark Cradle, the pause menu was created to allow players to have a break in between strenuous hours of gameplay, or for them to learn about the controls within the game.

The idea was to unify the interface to make it look similar to the ones we had within the game, thus, I re-used the initial dialog box that we had for the NPC within the game, and used it.

However, in the end, the buttons do not really fit with what we had from other menus that I had created, thus I changed to another simple rounded edge button.

Game cursor

For Dark Cradle, the game cursor plays an important role for players to navigate if they are using the keyboard and mouse while playing our game.

Thus, to give it a better immersive look, I went to think of a cursor that can fit the game, and I initially created a cursor which looked like the main weapon within the game.

However, due to design and visibility issues, while testing with the cursor, it is not feasible to block the player's view because of a customized cursor, thus I created a newer cursor which would not obstruct the player's view and still know the things that they are clicking or selected on.

The Dark Cradle (2018)

Platform

Team Size

Tools Used

Setup

About

Project Duration

The Dark Cradle is a 3D - first-person shooter game, where the main protagonist is a female scientist who is the last hope of survival onboard a spaceship filled with hostile robots. She must find the way to survive with her creation, the electric orb emitting gun, while she:

traverse dangerous terrains

solve puzzles

complete quests

15 weeks

My Role(s)

UI / Modeling Champion

For this project as a UI/UX Champion, I was tasked to focus on the various aspects of UI such as the menu screens, the main gameplay screen, and various icons to aid players in visualizing the meaning of various objects within the game.

Design Iteration Process

​

- The stages of design prototyping were: Conceptualization, Mockup, Implementation, Critique, Re-iterate.

Main menu

For Dark Cradle, what I had as an idea initially was to have 4 different buttons with hovering animated circles which will move around the buttons when it hovers on when a specific button is being selected.

However, due to time constraints and feasibility of the tasks being done on Unreal Engine 4, I had to settle on a simpler version of the button so that it could work and iterate from there on.

Options menu

For Dark Cradle, the initial options menu was created such that it can utilize the minimalist design which is being incorporated throughout the entire visual feel for the menus.

However, the initial one did not really fit well in terms of shape and visual literacy to players well.

​

Thus, I decided to change it such that it would better fit the overall theme.

Loading screen

For Dark Cradle, the initial loading screen that I had perceived was one that was able to inform players the next area they would be loaded into, for example, the main gardens present within The Dark Cradle.

However, it was too tedious on the programming side with little time left, thus we settled for a loading screen which has animated dots to show that the game is loading.

Pause menu

For Dark Cradle, the pause menu was created to allow players to have a break in between strenuous hours of gameplay, or for them to learn about the controls within the game.

The idea was to unify the interface to make it look similar to the ones we had within the game, thus, I re-used the initial dialog box that we had for the NPC within the game, and used it.

However, in the end, the buttons do not really fit with what we had from other menus that I had created, thus I changed to another simple rounded edge button.

Game cursor

For Dark Cradle, the game cursor plays an important role for players to navigate if they are using the keyboard and mouse while playing our game.

Thus, to give it a better immersive look, I went to think of a cursor that can fit the game, and I initially created a cursor which looked like the main weapon within the game.

However, due to design and visibility issues, while testing with the cursor, it is not feasible to block the player's view because of a customized cursor, thus I created a newer cursor which would not obstruct the player's view and still know the things that they are clicking or selected on.