creating the setting
Before I got too far into things, I made sure that I knew what I wanted my game to be and feel like. I knew that I wanted an Alien-Themed FPS. I started to create mood boards and aesthetic goals. I would steer my designs towards these ideals.
starting ui design
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.
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.
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.
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.