UI Game Mockup

Tools : Adobe Photoshop

One of the tasks of game design is to create game UI documentation to explain to programmers, the following is an example of a UI mockup for the game "Giko's Telescope" in the Narrative Choices Matter genre.

Free mode (Wireframe & Final)

In free mode, the character can walk and interact with objects or NPC around character.

When the crosshair aimed to interact icon, the interact option will popped up in bottom cinematic bar. For example when we aimed to the object we will get the option to pick up object or look at object etc. When we aimed to the NPC we will get the option to talk or kick NPC etc.

Choices mode (Wireframe & Final)

In choices mode, we will choose the fate of a character and each choice has a different fate. The choice mode will appear if the character talk to NPC or character enter the direct event.

Example of direct event like when the character entered a forest suddenly there a monster attack and that is when choice option popped up.

The white line in choice mode is Timer Bar. When we are given a choice we will get a timer, if the timer runs out the different fate will appear.

Notification

Notification function is to provide a help, hint, and feedback.

Help function is to tell us how to play this game.
Hint function is to provide hints based on fates.
Feedback function is to tell us about the response or feeling of an NPC after we choose the choice option.