Skip to content

Main Menu Design

MishKwok edited this page Oct 19, 2021 · 3 revisions

As a quintessential element of game design, the main menu of a game serves as the face. It needs to be able to immerse the player, informing them of what the game is about, and of course, be easy for the player to use.

About this page

This wiki page will be about Retroactive's main menu screen. It will discuss research that was used to inform the design of the screen, and how concepts changed over time to refine the screen.

This page will be split into the following sections:

  • First Iteration
  • Second Iteration
  • Third Iteration
  • Related pages

First Iteration

The original main menu that came with the game engine was a traditional, centered button menu. Some user testing was attempted to identify potential designs for a game of this genre, however, insufficient data was collected due to time constraints. Therefore, only simple changes were made during this sprint, including altering the background colour, some highlight colours, and logo.

Game Logo

The logo was designed once the name Retroactive was adopted as the game name. Drawing upon the styles of retro 80's graphics and other games of that aesthetic, the title was written in VCR OSD Mono, the font that would later become the standard font for the rest of the game.

Retroactive Logo

Result

sprint 1 main menu

Second Iteration

The main menu became less of a focus as the title screen was introduced based on user preferences for an arcade-like navigation style. Some minor changes could be visible on the main screen, such as the overhauling of font to VCR OSD Mono and another team's addition of character selection.

font 1 font2 font3

Result

sprint 2 main menu

Third Iteration

Addressing the mistakes of the first sprint (failing to gather sufficient data), user testing became a priority, as it is something that needs to be done as early as possible to ensure maximum flexibility. By comparing existing game menu styles, users gave a strong preference to keyboard-only frame-like controls for main menu navigation. Despite some bugs, this was implemented.

Some sketches of context screen and potential main menu design.

sprint 3 sketches

Keyboard-only controls

As the game was keyboard-based, and the main menu also know included arrow key navigation, it became agreed upon that transitioning the whole game's navigation system into keyboard-only would be fitting, not only from a usability point of view (preserving flow), but also because it fits the retro theme, where games were usually played on button-operated consoles, rather than with a mouse.

Result

Main menu at full screen (with bug)

sprint 3 main menu

Main menu animation

sprint 3 main menu demo

Fourth Iteration

The fourth and final sprint saw major improvements to the game menu. As most of the game's functionality had been completed, this gave a chance for the polishing of existing features. The layout of the main menu was entirely redone. This was done in order to better make use of space, and to simplify keyboard navigation.

Some sketches to plan layout.

sprint 4 sketches

Result

sprint 4 main menu

Clone this wiki locally