Developing the Menus

Creating the Layout

My goal with the menus for the game was to give them all a really clean look, almost as if they were something from a regular sports game, and to avoid them being overwhelming. I created a wireframe of the menus as to layout where everything went and from there layed out each menu in a very similar style.

- Title of menu page in top left of screen

- List of selectable options below the title

- Expanded options appear on the right side of screen when player selects option.

- Back button below all the left side options

I wanted this style to stay consistent across all menus to make navigation easier and to make development move faster so we could reuse templates for building other menus. This proved to be very efficient in the development process as even late addtions such as the Extras Menu only took a few hours to build due to this. Below I have the iterative process shown of how these menus were built by showing the evolution of the Controls Menu as an example of the creative process.

Wireframing the Menus

I used Figma to create a wireframe to get an idea for the flow of the menus. I wanted to try and keep things to a minimum of two or three pages deep to avoid frustration from the player. Certain key design choices I made were separating "Settings" and "Controls". I felt that for player convienience, it'd be best to allow them quick access to it so they could change controls on the fly. Another was to make the Accessibility Menu its own menu instead of baking it into the Settings Menu. This was mostly done as an organizational thing. The UMG Blueprints were super complex for the accessibility options, and so it would have been a huge pain to cram both the settings blueprints and the accessibility ones into one graph while keeping it organized. Overall though most decisions of how this was all mapped out were mostly made by just looking at other FPS games UI's and seeing what worked and what didn't.