UI DESIGN

Unity ARPG: UI Design and Concept Development

 

This rough Photoshop mockup represents my first concept for the inventory and equipment screen. I aimed for a modular layout, positioning equipment slots around an image of the starship to help players intuitively visualize where gear is installed inside the ship. I also left dedicated space for ship stats, which I planned to add in later iterations. The overall frame style was inspired by the Starcraft UI, while the placeholder art was directly copied from the character sheets I created for my Solar Echoes tabletop game.

 

This second iteration focused on improving spatial balance and visual clarity. Customization is a key part of the game loop, so the starship’s stats were positioned strategically to encourage players to experiment with equipment loadouts and see stats update in real time. I also introduced additional UI tabs and three interfaces in the column between the equipment and inventory sections to streamline inventory management.

 

After several rounds of iteration with my artist, we arrived at this final design. I prioritized a clean, balanced, high-tech aesthetic that aligned with the game's sci-fi theme while maintaining an intuitive user experience to avoid player confusion. The metallic framing was simplified to reduce visual clutter and create more usable space, and the overall color scheme was brightened to enhance detail and readability.

 

In-game, the UI feels responsive and satisfying to interact with. I collaborated with the lead programmer to ensure the stat display accurately reflected the player's equipped items and updated dynamically with each change. Early demo beta-testers indicated the layout felt intuitive and efficient, allowing them to focus on optimizing their ship loadout--even during combat!

 

Unity ARPG: Menu UI Design

I created this in-game menu in Photoshop using custom UI assets commissioned from a visual artist. The menu is accessed by the Esc key and presents essential game options such as Save Game, Load Game, Return to Game, Exit Game, Options, etc. in a clean central column. To streamline the user experience, the menu also displays an intuitive visual reference: a labeled mouse diagram on the right and a layout of essential keyboard keys on the left, each clearly showing their in-game functions. This eliminates the need to dig through submenus to find control information. The entire interface is styled to match the game's established sci-fi aesthetic, maintaining visual consistency and immersion across all UI screens.

 

Unity ARPG: Officers UI Design

Using Photoshop and custom art assets commissioned from a visual artist, I designed this in-game UI to manage skill and ability unlocks when the player levels up. The layout presents a clean, concise view of skill investment across all six officers aboard the player's starship, with each officer represented by a vertical bar meter divided into 20 segments.

As points are invested, segments fill with neon green and a number appears at the top to show the total invested for that officer, visually reinforcing the idea of ascension toward mastery. Each officer’s primary skill is displayed beneath their name and portrait, along with a clear distinction of the current effects of their point investment. Every five levels, players choose between two special abilities; while this image displays all 5th-level ability icons for presentation purposes, only one per officer will appear in-game when earned, with hover-over descriptions available before selection.

Grouping all officers on a single screen was an intentional choice to emphasize crew synchronicity and interdependence, reinforcing the idea of a starship crew working as a unified whole. I also designed the UI to showcase the game's replayability, with varied skill and ability combinations visually apparent even before the first point is spent.