FPS SHOOTER UI/UX project

Originally created as my ongoing assignment for the ELVTR UI/UX for Gaming course. Follow along below as I go through the steps of a UI pipeline from wireframe to full colour mockup!

#01 flOWCHART

Brief

There are 2 goals in this assignment:

Recognize and select the screens you will need to represent the screen flow of the player and game requirements. 
Organize a logic flow to find all the menus and navigation that we will need to connect with these screens.

#02 moODBOARDS

Brief

Create solid moodboards to represent the different aspects of the game like:

UI Game Style.
UI HUD Examples.
Art Game Style.

Art Style Concept

UI Style Word Concept

#03 wIREFRAME

Brief

Create a Player Profile screen wireframe, based on the player’s progress and achievements.

Define the areas

WIREFRAME MOCKUP

#04 Prototype

Brief

Create an interactive prototype of your player profile wireframe screen to show to your stakeholders how the game UI will work.

Prototype

You can click on the main navigation at the top of the page, as well as the ‘All trophies’ button to reveal an overlay.

#05 Mockup

Brief

Create the mockup of your player profile wireframe screen.

If you have artistic skills you can create your own UI elements based on your moodboards.

If you don’t have artistic skills you can use any online library assets that match with your moodboards.