Level Design
For this assignment I was given 3 options Sci-Fi, Horror or medieval. Depending on which I chose I would have to research and create menus centred around that theme. I chose Sci-fi as it was the option I had the most interest in. I will be going in depth about menus from different games as well as describing my own menus.
Research and Analysis
Half Life Alyx
Half life Alyx is a VR game made by valve in 2020. Although being in VR the menu is quite simple but this works in its favour. Half Life Alyx has the advantage of being in Virtual Reality as the environment of the menu will feel more immersive in the Sci-Fi setting. The menu has a static look as well as having the orange and yellow look Half life is know for. The colours give the menu a dark theme because the lack of colours like red, blue and yellow make it feel dark and soulless. The font is fairly standard computer text which would fit the Sci-Fi theme; as well as all the letters being capitals.
Half Life Alyx in Game Menu
The in-game menu of Half Aylx is almost identical to it’s main menu. However there are some difference such as the “continue” option being changed to a “save” button and the “start new game” button was replaced with a “main menu” option. The font and colours pretty much stay the same however when the menu opens all the colours become darker as well as the surrounding area turning pitch black. This adds immersion as it gives the impression that the player is in a simulation. Also the layout is the same as the main menu however depending on which way you’re facing when you open the menu it will automatically be facing that direction. This is easier on the player as they don’t need to search for the menu whenever they pause the game.
Halo Main Menu
The Halo Anniversary game was released in 2011. The Halo menu screams Sci-Fi. The background has the far reaches of space as well as what looks to be a giant mechanical ring. The colours of the menu are blue with light blue highlights on selected options, this gives it a futuristic feel because blue is a colour that film and media companies have used to showcase Sci-Fi. (Please see the images below for examples of this). The colour of space is a mix of colours which give it a spectacular view. The font looks like Bahnschrift SemiLight as well as the text being white so the player can see it without it fading into the background.
Cyberpunk 2077 in Game Menu
Cyberpunk 2077 is a game created by CD Projekt RED and was released in 2020. Cyberpunk 2077’s in-game menu has the crafting, inventory, map, character and journal. The red and blue colours mix well and are an appealing colour scheme because the black background makes the other colours stand out. The lines of code on the side and bottom of the screen gives it a digital look. The font in cyberpunk looks like it was ripped right out of a database making it fit the theme.
Call of Duty Infinite Warfare Menu
Call of Duty infinite warfare has a very simple menu. The background seems to have a lot of static hexagons, this works however it does feel simple. The menu itself is black until the player chooses one of the options, it then subsequently changes to yellow. This fits the theme as well as helping the player. Located in the options there is an choice for parents to turn off swearing and blood. This is an important option to have as Call of Duty is a violent game and some parents might not want their children playing that type of content.
Flowcharts, Mock-ups and their Justification
Flowchart
My flowcharts consist of a main menu and an in game menu. Both of these set the boundaries for my prototype as well as laying out all my ideas for the menu as a whole.
My main menu consists of a continue, load game, start new game, options/settings, quit and store page buttons.
-
Continue will take the player to the game.
-
Load game will take the player to the save select screen.
-
Start new game will let the player choose a difficultly and a new save file.
-
Options/settings gives the player a variety of options which they can change to their liking.
-
Quit allows the player to leave the game.
-
Store Page will show cover art of DLC and allow the player to download said DLC.
-
Continue will take the player to the game.
-
Load game will take the player to the save select screen.
-
Start new game will let the player choose a difficultly and a new save file.
-
Options/settings gives the player a variety of options which they can change to their liking.
-
Quit allows the player to leave the game.
-
Store Page will show cover art of DLC and allow the player to download said DLC.
For the main menu I have taken heavy inspiration from Half life Alyx which has a very simplistic menu. In options/settings there are four choices the players can choose from however parent controls is just for the adults of the players. I have chosen to have parent controls as some sci-fi games could be considered as overly violent like call of duty advanced warfare which is why I’m giving the option.
The in-game menu has an option to save game, to look at the map, to look at you inventory, to look at the options/settings, quit to the main menu, to look at the store page and the quit the game.
-
Saving game will let the player save their progress.
-
The map will let the player view the world.
-
Inventory lets the player view their armour or weapons.
-
Options/settings gives the player a variety of options which then can change to their liking.
-
Quit to the main menu is self explanatory.
-
Store Page will show cover art of DLC and allow the player to download said DLC.
-
Quit allows the player to leave the game.
For the in-game menu I’ve took inspiration from both Cyber Punk 2077 with it’s inventory option and Half Life Aylx. The reason both seem so similar is because it is easy to understand. The player should be able to easily navigate though both menus therefore I made them similar with small differences.
Mock-ups
Above are the annotated mock-ups of the menus. Below I have focused on the designs of the buttons. My idea was to make them simple and appealing to the eyes. All my buttons are see though however you can see the colour which gives it a Sci-fi look fitting my theme.
Alternative Mock-ups
These are alternative mock-ups. I feel they give the menu a more sinister look with red replacing the blue on the buttons. I did this by inverting some objects to see how they would look with a different colour scheme. These mock-ups were not used for the menu as I still preferred the old ones.
Blue Main Button
The main font is Agency FB in all caps lock. This gave the look it a Sci-fi look as well giving the text some glow. The colour of the main button is a light blue as this is because light blue is a highlight colour commonly associated with space or Sci-Fi related media.
Back Red Button
The colour of the “quit” and “back” is a red, this made it pop out compared to the rest of the buttons and is recognised as warning colour. It also gives more importance to the those buttons.
Store Page
The store page shows two images of the DLC. I’ve also made the the store colour green, I did this as it stands out from all the other buttons and draws the player in.
News Page
The news page shows a picture of gameplay from the most recent DLC. This makes the player interested. The news page is quite big so I changed the borders to be bigger to make it seem different.
Grey Out Button
The grey out buttons are used on the “load game” and “start new game”. The grey colour is used to make the buttons look inactive as they are supposed to be not in use.
Purple Settings Button
This button is used to show whether something is on or off, it may also be used to hold other things like percentages or other settings. The on is coloured white to show it is active whereas off it greyed out to show that it is inactive.
Red Quit To Menu
The quit to menu buttons shares the same shape and border colour as the first button. I did this because so the in-game menu looked more clean and concise. I have also coloured it red to emphasise that you are quitting.
Sliders
The sliders are used in the volume settings to show whether sound is high or low. Each one is coloured differently depending on where it is. If it is light blue then your at 100, if it is orange than it’s 50 and if it’s red it is at 0.
A Working Prototype
My Prototype contains all of my mock-ups and some other things. I have done this in PowerPoint with backgrounds to go along with it. I’ve also add music to my prototype (you will be not be able to hear it in this video but you will in the PowerPoint.)
Feedback and Reflection
After sending this Prototype to five people and I got very positive feedback with all of them saying “I love it”. However some people did say that the “music was annoying” and some of “button sizes could have been different”. This is something to consider when making the actual menu.