Game Main Menu UI Visual Asset Design - UQdeco2800/2022-studio-2 GitHub Wiki

Ideation Process

Through the brainstorming process, our team, as well as other teams, agreed that the main menu should feature the Island of Atlantis, and should be positioned so that the user is looking over the water towards the island. After this initial idea was produced, the following images were used to inspire the sketches and final product. image

Sketching Process

In visualising the main menu, the following rough sketches were produced. These assisted in the final creation of the menu in pixelated form.

Idea 1:

With main character looking towards the island image

Idea 2:

Simpler version, no character and different button/title placement image

Design Iterations - Static Main Menu

In Pixilart, the following rough drafts were created, based on the two sketches above:

Idea 1:

image

Idea 2:

image


User testing determined that the second design was preferred, due to the lack of complexity and cohesive aesthetic.

Hence, the following iterations only include the second design. In review of the game’s colour scheme, we noticed that there was a lack of yellow/gold in the design, whilst there was an abundance of blue. To alter this, the title was redesigned to ensure all colours within the colour scheme were utilised.

image

Due to the blue buttons being surrounding with blue water, they tend to get lost and become difficult to see. Hence, the buttons were altered to have a similar colour scheme to the title. This not only increases readability, but also increases cohesion between the two aspects (title and buttons).

“Sinks” was also added to the title, as the planning phase has been completed, and we were confident in the placement and overall look of the finished title.

Also, the details of the island were added upon, with additional buildings being added to tie the city of Atlantis all together.

The ocean was also resized to decrease the amount of contrasting colours on the screen. This way, the island and title becomes a more prominent focal point, and the buttons are clearer to the user.

image

In the final iteration of the main menu design, the buttons were removed from the static image and, instead, were created into widgets. This was to assist the programming team in increasing functionality. In note of this, an exit button was also added, which gives the user an easily accessible way of closing the program. This was also made into a widget.

Final Main Screen (Static)

Static:

image

Static with Widgets:

image

Design Iterations - Animated Main Menu

In response to the user testing, in which there was a strong desire to have the main screen animated, the motion was started to have the island of Atlantis sink in an overdramatic fashion when the user presses start.


The animation would have four stages:

  • Stage one: The Island would slightly shake up and down for a few seconds

  • Stage 2: The island would rapidly sink (within a second), and a small splash of water would arise. Here are the pixel art designs of the small splash:

image

  • Stage 3: The small splash would be overtaken by a huge splash that engulfs the title. Here are the pixel art designs for the bigger splash:

image

  • Stage 4: The water from the splash would rush towards the bottom of the screen, then quickly fill the whole screen with a blue layer (as if the water was engulfing the screen entirely). A prompt to press enter will appear, and will result in the start of the game. Here is the final frames of the animation:

image

Final Main Screen (Animated)

After compiling the each individual frame, the final animation was produced, and was programmed to play once the user clicks start.

ezgif com-gif-maker

Future Directions

In the next sprint, it would be beneficial to user test the main screen animation, to see if imrovements can be made. If enhancements of the main screen were wanted, the static image could become animated, having the water and clouds move constantly.

In terms of the static main screen, our team believes that the final design should not be altered further, as it has been very well-recieved by our peers, as seen in the user test survey.