LANCER Mock UI Exercise
A UI mockup I made of a virtual character sheet for a tabletop rpg about piloting mechs I love called Lancer!
This was an exercise in creating UI assets, implementing them into Unity, and animating them.
I used my own character's sheet as a basis for the information in the UI, and tried to get creative with how I would present the information in it.
A mockup of the active pilot screen, featuring pilot skill triggers, profile picture, health, stats, and equipped loadout.
Active mech screen mockup, featuring the active mech's stats, health/heat, remaining structure/reactor, and requipped systems/weapons.
A mock animation of what the UI would look like going from bootup to the active pilot screen.
A preview of the functionality on the Active Mech screen. The heat bar goes from left to right because it rises to a cap, while HP goes right to left since it subtracts from an amount!
One thing I attempted with this UI was to make it seem like a hologram in 3d space. I offset the layered UI assets along the Z axis so that when rotated, they give this cool 3D effect as if they were really being projected onto the screen.
launch screen. I wanted the UI to feel diegetic to the Scifi setting, so I wanted to prominently feature faux console messages, and use fonts to represent that accordingly.
The background is tiled like that to simulate the common mech cockpit trope of an interior window made of several tiled screens. I tried to reflect that visual language by using the tiles themselves to create different UI elements throughout the mockups!
I also created a set of small icons to represent different stats present within the game, that could be used as shorthand for those stats later. Also another example of using the background tiles as UI assets, representing the mech's reactor and structure
The background is tiled like that to simulate the common mech cockpit trope of an interior window made of several tiled screens. I tried to reflect that visual language by using the tiles themselves to create different UI elements throughout the mockups.