CGD413

User Interface Design

Interface Report

Yama0 User Interface Design

Name: AMIR IZZUDIN BIN MOHD KHALEL

Student No: 2021478218

Class: CAAD2331A

Submitted to: DR. ZAINUDDIN BIN IBRAHIM

Submitted on: 14th February 2022

0
Table of Content

1.0 Introduction 2

2.0 Game Title 2

3.0 Interface Reference 3

4.0 Game interface development 9

4.1 Main Menu 9

4.2 Settings 10

4.3 Splash Screen 14

4.4 Licences, Agreements & Disclaimers 15

4.5 Exit Screen 17

4.6 Loading Screen 19

4.7 Paused Screen 20

4.8 Extras 21

4.9 Death Screen 24

4.10 In-Game Interface 26

4.11 Error Screen 27

4.12 Dialogue Screen 28

5.0 Conclusion 29

1
1.0 Introduction
This report will discuss on the User Interface Design for the Game ‘Yama 0’. In
this report, the design of the user interface along with the process of development of
the user interface shall be recorded. Research on other game interfaces shall also be
used as references to improve on the design of the user interface in ‘Yama 0’.
Yama 0 is an isometric pixel-art game that is set in hell. However, hell will take
form as a mountainous city with large disparities in terms of living conditions depending
on which floor of the city someone would reside in. The higher one lives, the better the
living conditions are for them. The player will have to start from the bottom and reach
the top floor of the city to complete the game.
The user interface should fit the theme of the game and be easily accessible to
people of all ages. The design should be concise but aesthetically pleasing as to not
cause misunderstandings where there shouldn’t be. The fonts need to fit the theme yet
also be legible to most if not all players and should have enough contrast to help with
readability. These are the challenges that exist that should would have to be kept in
mind whilst designing the user interface.

2.0 Game Title

The game title serves as the presentation of the name of the game. Yama 0
can be read as Yama-o or in other words, Oyama, which can be translated to a
mountainous city in Japan. This fits the game as the game is about overcoming
mountainous challenges whilst also climbing the floors of a mountainous city. That is
why the title of the game is Yama 0.

2.1 Version 1

In the first version of the title, the font for the ‘Y’ is gothic pixels. This
would serve to represent the pixel-art aspect of the game. The ‘AMA’ is in ‘Bell
MT’ font. While the japanese letters that spell out oyama is written in ‘Dela
Gothic One Regular’. The 0 in the title is a vector shape that shows the number
‘0’ in red that is boxy and shows the modern aspect of the game, contrary to
the sterotype where hell is usually interpreted as a deserted world.

2
 2.2 Version 2

In the second version, the ‘Y’ is altered to give a more simplistic shape
as to not make the other letters balanced. The font used for the ‘Y’ is 8-bit Limit
R (BRK). This however has caused ledgibility to fall apart as the Y now looks
more like a V.

2.3 Version 3

In the third iteration of the game title, the ‘Y’ is accented to experiment
with offsetting the balance of the general shape of the title. The font used for
the ‘Y’ is Blackside. This experimentation works however, the length of the Y
has caused all the letter weight to fall onto the letter ‘Y’ causing an imbalance
in the design.

2.4 Version 4

In the final iteration of the game title, the ‘Y’ has been changed to still
have the accented aspect however, the length of the extension has been
reduced to a point where balance is achieved. The font for the ‘Y’ is Lordish
Regular.

3.0 Interface Reference

These references serve as to guide the design of the user interface. It also
serves as to not sway too far from other game user interface design as having a similar
design to other games can help with familiarity for the users.

3
3.1 Main Menu

3.2 Settings

4
3.3 Splash Screen

3.4 Licence, Agreements & Disclaimers

5
3.5 Exit Screen

3.6 Loading Screen

3.7 Extras

6
3.8 Paused Screen

3.9 Death Screen

3.10 In-Game Interface

7
3.11 Error Screen

3.12 Dialogue Screen

8
4.0 Game interface development
The game interface development serves as a record of the process of
designing the user interface of ‘Yama 0’ the game. With the use of the references
before, the user interface has been altered and redesigned to fit the theme of the game
whilst also taking into account of the other design aspects of the game development
process.

4.1 Main Menu

4.1.1 Ver1

In Version 1 of the main menu, the colour scheme is bronze and the
listed buttons are on the right side occupying a third of the screen while the
logo sits centre of the image in the background. The Selections are written in
serif font and are in white. However, the selection would be coloured black to
contrast the background and the other selections. The bronze colour is to give
the eyes a more pleasing and neutral colour.

4.1.2 Ver2

9
 In the second iteration of the main menu, the selections have been
aligned with the middle to allow for more balance and the text will be in white
with the current selection having a border around it with a glow. The text has
been changed to a bold sans-serif font to make for easier readability. This will
help in guiding the player in terms of navigation as it will move in only one
direction compared to the angular design in version 1. The background will be
changed to red so that more contrast will be given to t he selection and help
with readability of the text. The title has also been moved to the top middle of
the screen.

4.1.3 Ver3

In the final iteration of the main menu, the Japanese text under the
‘AMA’ has been changed to white to make it pop from the background. The
background image has also been replaced with a rendered image compared to
the sketch before. The Font of the text has also been changed to match the
theme of the game which is pixel-art however, at the slight cost of readability.

4.2 Settings

4.2.1 Ver1

10
 The settings screen is named options. It is coloured in birch with white
text. The selection of tabs for different types of settings are put on the right but
centred to the column for the settings. There are various different types of ways
for changing the settings. There are linear options for the resolution,
magnetized sliders for the graphic pre-set and the display mode, and finally a
binary switch for the v-sync. The back button is located at the bottom left and
has a triangle signifying going back to the previous screen.

4.2.2 Ver2

In version 2, the background has been changed to a gradient red with

a lighter pink. The options title has been moved up and has text under it to
describe what each settings change. Button icons has also been added to help
with controller use. A different settings panel has also been added for while
pausing in-game. This will help smooth out setting changes while playing so

11
that the player doesn’t seem like they have to go to a different screen so see
the changes having effect.

4.2.3 Ver3

In the third iteration of the settings menu, the fonts have been changed
to fit the theme of the game. The resolution slider has been changed to only
show the resolution over the slider to lessen confusion of which numbers to
keep track of. The back icon has been changed to fit better with the background
which has been darkened to better contrast the text.

12
4.2.4 Ver4

13
 In the final iteration of the settings screen, audio and controls screen
has been added. The audio screen helps with changing settings relating to
audio and the controls screen displays which buttons are bound to what
actions. The background has been given a repetitive cog pattern throughout
the screen.

4.3 Splash Screen

4.3.1 Ver1

The first iteration of the splash screen shows the title in the centre with
the text “click to start” below the title in white. There is also a border the enclose
the screen into a smaller area.

14
 4.3.2 Ver2

In the second iteration, the Japanese text has been changed following
the main screen. The “click to start” text has also been changed to fit the theme
of the pixel-art game.

4.4 Licences, Agreements & Disclaimers

4.4.1 Ver1

The background in this first iteration is brown. The header text is in serif
with the body text also in serif. The body text is justified and centred on the
screen. The lines will help with differentiating the different texts.

15
4.4.2 Ver2

In the second iteration, the background is changed with a lighter

gradient to fit the other colours of the user interface. The body text was also
changed to a sans-serif font.

4.4.3 Ver3

In the third iteration, both Header and body text are changed to a more
pixelated text to better fit the game theme which is pixel-art.

16
4.4.4 Ver4

In the final iteration of the disclaimer screen, the background has

changed into a darker colour to better contrast the text and help with readability.

4.5 Exit Screen

4.5.1 Ver1

The initial design of the exit screen has the header that reads “Quit
Game” with a binary selection to either accept or cancel the action. The font for
the All the text elements is in serif. The selection will be engulfed in the white
selection box and the text will be changed to black.

17
4.5.2 Ver2

In the second iteration, the background changed into a bright red colour
to catch the players attention in case they didn’t mean to exit out of the game.
The header and body text has been changed to better fit the theme pixel-art.

4.5.2 Ver2

In the final iteration of the exit screen, the background has received a
pattern uplift to give more texture. Additionally, an exit icon has been added
above the title text to help better quickly identify the action of exiting the game.

18
4.6 Loading Screen

4.6.1 Ver1

The first version of the loading screen has the Yama 0 logo on the
bottom right of the screen with the ‘0’ rotating to show the loading sequence.
There will be tips and lore during the loading screen. The ‘tips’ header is placed
to the left of the body text in serif font. The body text is also in serif font. The
background is in bronze to fit with other designs.

4.6.2 Ver2

The second iteration of the loading screen has the new logo replacing
the old one. The ‘Tips’ header has been centred with lines on either side to
emphasise the header. The body text is now centred to the screen. The
background has been changed to red to fit the recolour of the other user
interface elements.

19
 4.6.3 Ver3

The final iteration of the loading screen has the background changing
to a different illustration of the tower in the city of hell. This will open up the
environment and give a more spacious feeling during loading sessions.

4.7 Paused Screen

4.7.1 Ver1

The initial design of the pause screen has the selections in bold sans-
serif font with the header text also in sans-serif. The selection is encapsulated
within the red bar that spans across but not covering the top and bottom of the
screen. The header text is placed above the spanning red row.

20
4.7.2 Ver2

The second iteration of the pause screen has the fonts changed into a
more pixelated font. This will follow suit in the change of other user interface
elements that are going through the change as well to fit the theme of the game
which is pixel-art better.

4.8 Extras

4.8.1 Ver1

The extras screen shows the text files which can be unlocked through
special unlocks. Whenever the extras are unlocked, they will turn white. Dark
coloured elements show extras that are still locked. There will be 3 different
tabs for the types of extras. These types are Notes, Voice lines, and Artworks.

21
4.8.2 Ver2

In the second iteration, the background colour has been changed to

be redder to fit the theme of hell. The locked extras have also been changed
to a more bronze colour to be brighter and easily seen. An additional screen
had also been completed which is the voice line tab. The heads will represent
the voice line of the character.

4.8.3 Ver3

22
 In the third iteration, the background has been darkened a bit more to
have more contrast with the content. Lock icons has also been added to better
show that the extras are indeed locked. An additional screen has been
completed which is the artwork screen.

4.8.4 Ver4

23
 In the final iteration of the extras screen. The background has been
given a pattern to add more appeal to the otherwise plain background.
Additional art has been inserted to the other unlocked extra.

4.9 Death Screen

4.9.1 Ver1

24
 On the initial design of the death screen, there is text in serif font that
writes “You Died”. The background is the same with the splash screen.

4.9.2 Ver2

On the second iteration, the background has become redder to better

contrast the white text. The fonts have been changed to fit the theme pixel-art.
A binary choice of either wanting to load the last checkpoint that has been
reached by the player. The selection would be in the white box with the black
text.

4.9.3 Ver3

On the final version of the death screen, the background has been
replaced with a pattern to declutter the screen and provide better contrast to
the text and the background. An icon has been added above the header text to
signify the player’s death.

25
4.10 In-Game Interface

4.10.1 Ver1

The initial in-game interface has the most the static elements at the
bottom of the screen. At the centre, the different character the player can
change to is contained within the boxes. Above the boxes are the characters
health bars. The d-pad selection is for quick character selections. On either
side of the party line-up, are the current characters health and mana. In the
form of bars. On the bottom right of the screen is the skills that are accessible
to each character. Health bars of enemies and allied NPCs are placed above
the character sprites. The enemy health bar will be outlined in red with skulls
on the sides displaying the difficulty of the enemy.

4.10.2 Ver2

On the second iteration, the d-pad icon has been removed and the
buttons at the bottom right has been changed to skill icons. Additionally, a mini-
map has been added to the top left of the screen to show the layout of the
current level.

26
4.11 Error Screen

4.11.1 Ver1

For the initial design of the error screen, there will be a header that
reads “Error” with 2 exclamation marks on either side to show importance.
Below the Header will be a body text that will display the current errors, what
they can do, and what to do if the error happens continuously. The background
will be in bright red to steal the players attention whenever an error has
occurred.

4.11.2 Ver2

The second iteration of the error screen has the exclamation marks on
either side removed. The Header font is changed to fit the theme pixel-art. The
body text is brought closer to the heard. At the bottom right, the loading logo
will appear and it will stand in as a countdown before closing the game. The
background has been given an exclamation pattern throughout the screen.

27
 4.11.3 Ver3

The final iteration of the error screen has the background become
darker to help improve the contrast of the text from the background further.

4.12 Dialogue Screen

4.12.1 Ver1

The first iteration of the dialogue screen has the character appearing
behind the dialogue box. The name of the character speaking currently will
appear at the top right of the dialogue box. The body text is in sans-serif to help
with readability while the name will be in serif font.

28
 4.12.2 Ver2

The final version of the dialogue screen has the fonts changed. Both
header and body text has been changed to a pixelated style font to fit the theme
of the game.

5.0 Conclusion

To conclude, the user interface design process has been completed. Though there are much
to be improved upon. The font selection sacrifices a bit of legibility for the sake of stylisation.
However, the use of many different references to previously released games by other
professionals has helped guide this project to seem more professional compared to without
the guidance which are some of the few ‘version 1’ designs. The use of references and good
design fundamentals benefits the design process of the user interface greatly and should not
be discounted as unoriginality.

29