top of page

Game UI Re-Design

School Assignment

This Assignment was an introductory to game UI. The goal was to take a game's UI and create 2 alternative versions of it. 

Duration

2 Weeks ~ 5 hours

Team

Henry Mattingly

Tools

Figma

Skills

Research
Wire Framing
Prototyping

Over view

What was the assignment?

The Assignment was to take a game made in the early 2000's or before and re-design 1 screen on the games UI

What game did you Choose?

The Game I choose to re-design 1 screen from was 2003's Kirby Air Ride. 
The Screen chosen to work on was the Main Menu

Original Main Menu

Main Menu.png

Problem

Image of what the game mode is, is very small and hard to see background is still and boring, doesn't have anything to do with what the game is

Proposed Solution

- Create a UI that uses the background showing what the game mode selected is
- Show what each game mode is in a better way

- Make the main menu feel more modern

Finished Re-Designs

Main Menu #1 FINISH.png
Main Menu #2 FINISH.png

WireFrames

Already knowing what is supposed to be on the main menu screen I created a general layout of where everything will go

Main Menu #1.png
Main Menu #2.png

Progress

Moving forward I wanted to add in a background image showing what the game was as well as clearly indicating what you have currently selected

Main Menu WireFrame #1.png
Main Menu #2 Wireframe.png

Add Images and Critique

- Added in all the images and figured how things will look
- Got the designs critiqued and made the modifications on the final model

Main Menu Start #1 Almost done.png
Main Menu #2 Almost done.png

Finished Results

After the critique I changed the background to not stand out quite as much as well and edited coloring to make the main menu more visually pleasing

Main Menu #1 FINISH.png
Main Menu #2 FINISH.png

Reflection

This was my first time using figma and learned the basics. Created new designs from old games and learn how to make a visually pleasing UI for players that informs them of what they are about to be playing.

bottom of page