Hey everyone!
In this breakdown, I’ll walk you through the process of designing the inventory system for my game Lobo. I’ll highlight the challenges I faced and how I tackled them to reach my goals.
In this breakdown, I’ll walk you through the process of designing the inventory system for my game Lobo. I’ll highlight the challenges I faced and how I tackled them to reach my goals.
Goals
For Lobo, I wanted to combine the Inventory and Equipment screens into one cohesive system. This makes things more efficient and creates a smoother user experience. On one side, players can see all the items they’ve collected, and on the other, they can manage what’s equipped. The main challenge? Presenting as much info as possible without overwhelming the player or cluttering the design.
The solution: a clean, minimalistic layout that matches the game’s overall dark, fantasy vibe.
Key Functionalities
- Standard Features: Equip, unequip, and drop items.
- Extra Touches: Rotate and zoom in on the character, and toggle item details with a show/hide option for quick inspection.
Inventory Area
As you can see, the inventory is split into two main areas: Inventory and Equipment. When the player selects the Inventory tab, several things happen to make navigation intuitive:
- The item in the main menu is highlighted.
- The tab in the secondary navigation also gets highlighted.
- The background shifts to a subtle yellow tint, giving the player a clear visual cue of their current focus area.
- To make things even easier, the first item in the inventory is automatically highlighted, ready for action.
These small touches ensure the player always knows where they are and what’s selected, minimizing confusion while maximizing ease of use.
When a player selects an item from the inventory, they have the option to toggle the information display. By default, this info is always visible, providing a wealth of details. Not only does it showcase the item’s attributes, but it also includes a rich lore description that deepens immersion in Lobo's world.
To enhance user experience, the info panel is designed with clear icons and names for each attribute. This initial introduction helps players quickly identify and memorize what each icon represents, allowing for quicker reference in the future.
In the Equipment area, if an item from the inventory matches an equipped item, the corresponding slot will highlight, displaying a side-by-side comparison of attributes. The entire design philosophy revolves around presenting as much information as possible in a straightforward manner. By minimizing unnecessary actions, I aim to keep the user experience direct, smooth, and friendly.
Equipment Area
When the player selects the Equipment area, the sub-navigation tab highlights, and the background transitions to a more vibrant yellow, mirroring the highlighting effect of the Inventory. Each equipped item displays its main attributes, ensuring that no extra action is required for players to see the value of each attribute.
Additionally, when a player selects a slot in the Equipment, that slot becomes highlighted, and the item zooms in for a closer look. This feature allows players to appreciate the details of the equipped item while maintaining a seamless and intuitive interface.