UI Presentation
Design Spec Description So for this project we have a design spec for our UI, which gave us the requirements to achieve within the designs, those being user experience, usability and utility. The user experience is important as it needs to summarise the games style and theme to the player before they actually get into the gameplay through visual expression, giving them a strong understanding of what they’re about to get into. Even beyond the main menu, having all of the menus link strongly into the games styling and themes help immerse the player due to its consistency. The usability is important as although the UI should be expressive, it still needs to properly function in a manner that isn’t infuriating for the player by letting all the buttons, options etc. be accessible as quickly as possible. Then for utility, it’s importance is that adding secondary options that wouldn’t be in most games helps with making your game stand out from other, as it suggests other pieces of UI such as settings is required to suit the game.
Our Design Spec ● All ages ● PC ● Bright colours - yellow, green, orange ● Rounded, clear typography ● Woodland theme
Research For our research, we focused on simple designs that just as much artistic style as they did practical function. If it isn’t good on the artistic side then it won’t be visually appealing and the player may be turned away from the game as UI (the main menu) is the first thing they’ll see. It also has to be good regarding the technical side as usability is a key aspect of UI, if it’s difficult to use then the player may be confused and struggle to understand and play the game well. Some of the examples we were inspired by such as Journey of a Roach balances both sides of design well as the limited set of options are easy to read over quickly by Using a metallic sheen for the title along with a more natural dirt look helps to suggest both the contrast and combination of those attributes within the game as the player must utilise the environment and technology as a cockroach.
Typography For the pause menu, I decided to look at simplistic designs again. The UI from Persona - shows off unique style and typography well. The combination of multiple fonts, busy shapes and repeated colours creates a very loud and energetic menu. Using multiple different fonts within single words creates a chaotic feeling, this is spread towards the right side of the screen too where the stars overlap in random positions. The use of red on both the left side and the hand helps to elevate the menu options as they contrast in black and white.
Main Menu: Prototypes Everybody was tasked with making an initial sketch-up of the main menu, trying to convey the style of the game as effectively as possible, while formatting it effectively. There were a few things in common between each design such as rounded, simple typography that’s mostly central to the screen. They also all relate to themes within the game such as mushrooms and villages. There’s differences between each design too such as overall composition and content.
Main Menu: Improved Designs With each of the designs we worked back into them and improved upon them. For the first, we added rough background elements and an options and quit button based off the feedback we received. With the second design, we again looked at adding a background to fill in the empty space. We also altered the scale slightly of the buttons to make the play button the largest of the three along with moving the others down to seperate them from the title. For the final design, we added some more detail to the title to get a better grasp of the font we were after. We worked on the imagery too and developed some parts more, e.g. the stump and flowers on the grass.
Other Menus: Prototypes Just like all of the initial main menu designs, they’re simple in terms of usability and art without being sparse or uninteresting. At this stage, they just contain core elements of potential concepts and so have room for developments in each department. All of these are intentionally limited to make sure that the options are clear to the player.
In-Game Blockout During the blockout phase, we implemented a bare bones version of the main menu to figure how the layout would feel to the player on the most basic level. In addition, it was also helpful in figuring out the coding behind menus and how to link scenes together seamlessly.
Final Designs https://www.youtube.com/watch?v=JGLKIWH8vbg We have created a functional menu system for the player, we have done this by using brightly coloured buttons to take the player to a corresponding scene. When the player presses the start button it will load the game. The volume button will bring up a separate UI and allow the player to adjust the audio levels. The video quality will allow the player to adjust the quality displayed on their screen. The quit button will take the player to the desktop.
Recommend
More recommend
