UI Design

Below is a collection of UI mockups and elements that I have made, primarily for NEX:OS. These mockups and elements were made in Photoshop and the elements later imported into Unreal Engine or Unity for use in creating widgets based on the mockups. While I am not a UI designer by trade, this is something I have had to learn and work on in my projects.

NEX:OS Character & Ability Menus

This is a collection of test and final menu mockups of a Character and Ability menu for NEX:OS. These mockups are designed to give a player the maximum amount of information on a single page, while also keeping a simple and clean look. With the Character Menu player are able to see and change up their weapons and armor. Additionally with the Character screen a player will see what abilities they have equipped and their assigned element.

For the ability screen a player will be able to see and change all of their abilities and skills they have equipped and/or unlocked. There are three main sections that a player will have on the ability screen: Singularity and Runes, Abilities, and Class Skills.

A first draft of an ability screen using a page idea where players abilities and skills were split into two pages.
This was the page for a player's ultimate ability, or Singularity, and other gameplay abilities — A first draft of an ability screen using a page idea where players abilities and skills were split into two pages. This was the page for a player's ultimate ability, or Singularity, and other gameplay abilities

A first draft of an ability screen using a page idea where players abilities and skills were split into two pages.
This was the page for a player's class skills and built. These would be universal and mainly affect stats and non-ability gameplay. — A first draft of an ability screen using a page idea where players abilities and skills were split into two pages. This was the page for a player's class skills and built. These would be universal and mainly affect stats and non-ability gameplay.

Another draft of the ability screen, this was with a unified skill tree in mind. Ultimately once the idea of having Character skills and Singularity/Ability skills be separated it was decided that this would not work.

A near final draft of a Character screen, while there are still elements that need to be refined and worked on this is the cleanest look that I could work out. On this screen is the overall info about the character including Stats, Armor, Weapons, and Abilities. All the slots act as a quick select and change so loadouts can be swapped on the fly.

This is a near final draft of an ability screen for a player character. With this there are three sections: Singularity, Skills, and Abilities. This allows for players to change individual components of their gameplay and character.

Gameplay Icons

This section contains icons for gameplay and UI elements that I created, mainly for NEX:OS. These elements can be seen in the HUD, Menus and other areas of the game. Icons include Abilities, Borders, Class Icons and other elements.