Game UI Designs & Prototypes

On this page you can find a couple of my game UI designs and prototypes.

Console Weapon Selection – UI Design & Prototype

Tools: Balsamiq, Illustrator CS6, Flash CS6, ActionScript3.0

UI Design
The main goal of this HUD design for a console shooter was to reach a high level of visibility. In order to achieve this, the majority of the HUD elements are placed at the bottom of the screen. This allows the upper portion of the screen to be non-obstructive for combat action and gameplay.

FPS_UI01_Main_sUI_WeaponSelection Wireframe

The health bar (1) is located on the bottom left, and the weapon (2) and grenade (3) info are displayed on the bottom right. The objective info (4) text is displayed on the top right corner and the objective icon will be a spatial element within the game world. Finally, the help message (5) is placed in the bottom center on top of the player’s character.

FPS_UI02_WeapSelection_sUI_WeaponSelection screen

Click the image below to play the prototype. The weapon selection menu can be activated by pressing any directional key on the keyboard which acts as a D-pad. In this prototype, the player is currently equipped with a maximum of 4 weapons and can select any of them using the D-pad. The weapon selection menu will highlight the pressed key direction and will remain visible until the player releases the key. Multiple keys can be pressed down simultaneously, but selection verification will only occur when all keys are released. Once released, a short tween animation will play to confirm the selection visually, and the weapon type icon and ammo information will be updated accordingly.



Tablet Gears of War Concept – UI & Level Design

This section contains user interface elements for a conceptual 2D top down Gears of War game for the tablet. It was important in the designs to maintain gameplay mechanics that defines Gears of War and translate those into a 2D game. The following chapters will contain the navigation controls, abilities, weapons controls, enemy types, building blocks, interactive elements and collectables. Finally, all these elements will be incorporated into a level design.

— work in progress