Website powered by

Ikari Escape UI Design

For our final project for my tertiarty stuides, I was tasked with creating the UI elements to visually communicate to the player important information without being overwhelming. Many iterations were designed for this project and were re-done entirely from the ground up to fit the theme, aesthetic and give clear communication to the player.
The project was a remake of an existing arcade video game with a team of 3 people, we chose Ikari Warrior. Military themes were explored and these sprite sheets are my final iteration of design. We renamed our rendition to Ikari Escape to capture our unique version.

Main Logo design with buttons to fill the sprite sheet. Designed from a chevron/badge shape. Colour palette of greens, yellows and solid white for contrast.

Main Logo design with buttons to fill the sprite sheet. Designed from a chevron/badge shape. Colour palette of greens, yellows and solid white for contrast.

A series of buttons needed for the UI. The three variants are for the selected, unselected and clicked states for user interaction cues.

A series of buttons needed for the UI. The three variants are for the selected, unselected and clicked states for user interaction cues.

Custom designed panel fitting the military aesthetic of the project. Rustic trimming with highlights also to give a sense of depth. Header is geometric to give a fitting shape language.

Custom designed panel fitting the military aesthetic of the project. Rustic trimming with highlights also to give a sense of depth. Header is geometric to give a fitting shape language.

Icons designed for HUD visual communication. Ammo, grenade, lives and score count icons. A panel to contain each icon and relative metric.

Icons designed for HUD visual communication. Ammo, grenade, lives and score count icons. A panel to contain each icon and relative metric.

1 Player HUD upon entering the game.

1 Player HUD upon entering the game.

2 Player HUD. Implemented red and blue to differentiate between players. Blood watermarking for responsive feedback to the player upon taking damage.

2 Player HUD. Implemented red and blue to differentiate between players. Blood watermarking for responsive feedback to the player upon taking damage.

Pause panel responding to C# programming upon interaction keys both usable for controller and keyboard simultaneously. Green highlights for selection. Side panel and main panel animates accordingly.

Pause panel responding to C# programming upon interaction keys both usable for controller and keyboard simultaneously. Green highlights for selection. Side panel and main panel animates accordingly.

User Interface in application.