game design

ux/ui

press.jpg

creating the setting

stage one

main.jpg

ui within the world

When exploring, I wanted the player to have clear navigational goals. I made the UI as minimal as possible to increase focus and enhance immersion.

 

The original beacon symbols (left) were scrapped and I chose to use light to direct the player instead (above).

starting ui design

stage two

Creating a flow

I started by sketching out some screens for a frontend flow. I knew that I wanted to start with a Terms of Service popup and a connecting screen, because my game was going to be an Online FPS. From there, I knew I wanted the player to jump into customization (I want a story-based customization like Outriders and Mass Effect, hence the heavy dark boxes to the left.) From there, you go into the character select (if you have multiple characters) and then into the game. Note: Character customization only happens once on first-time initilization.

ezgif.com-gif-maker (1).gif
Screenshot 2022-07-16 115815.png

Creating a theme

I started designing elements that the UI icons would be housed in. Most of my overlays are simple black boxes. I decided that a sleek, modern look was best for this project.

uidesigns.jpg

player character ui

Expanding upon the theme of minimal UI and using the third-person camera to my advantage, I removed the health bar by putting it in the player's suit/character. All character designs will have cracks where light can stream through. The light will dim and dance as the character takes damage.

Instead of numbers and letters, I have created a "chip" system. Removing numbers and letters makes the game more accessible (i.e. dyslexia), while also contributing to the world building of an alien society that foregoes our earthly language.

misc assets3.png
misc assets3.png
misc assets3.png

adding variation & Cleaning up designs

As I worked on my designs, I noticed that I had a lot of blue. I started thinking of ways to implement more color and variety. My solution was giving the player freedom to use different accent colors. That way, players with colorblindness or other visual disabilities would have options.

On top of that, I made the icons and graphics a little more interesting. There is more depth in the colors, and a lot of the shapes are more organic. The more boxier icons are strictly for use in pop-up menus.

fdf copy.jpg

Revised Ideation/concept of Character Select