Inventory System UI

This project was focused on creating an inventory system UI for an immersive open world game that draws hints of Ghibli art. I also wanted to utilise cel-shading as this is a technique that I've been particularly exploring and wanting to apply for my next portfolio piece.

Timeline

5 Days (June 20 - June 25, 2023)

Team

Solo!

My Role

UX, UI, and 3D Modelling

Tools Used

Blender and Figma

The enchanting world of Ghibli

Inspired by the enchanting world and stunning art of Ghibli, I wanted to translate my love of the artistry found in these films into a game UI concept. My intent for this project was to employ elements of Ghibli's magical essence into my UI design and to prioritise an intuitive and user-friendly interface to provide players a seamless experience while micro-navigating through interactive elements present on screen.

Starting with the basics

I've always been fascinated by anthromorphic animal characters found in many forms of entertainment that driven me to create my very own animal character. The entire 3D modelling process started from using basic shapes that gradually led to refining details, adding colour and expression to give the character some personality.

Shaded Wireframe

X-Ray Wireframe

Final Model

Playing around with the inventory system UI

My first version of the inventory UI was to incorporate a cel-shaded interface to align with the aesthetic of my character by using stroke outlines and minimalistic shadows, but that didn't particularly work very well as I thought it would because the interface style didn't achieve the cohesiveness of blending with the softer appearance of my character.

Version 1 of Inventory System UI

I analysed the UI elements of cel-shaded games and noticed a use of visual backgrounds and transparency in their UI that are naturally cohesive with the game environment, bringing in an immersive user experience. My initial process was to add the clothing item subtitles with arrows as navigation to each selection as it adds hierarchy. However, I had to reassess the effectiveness of these elements based on user feedback. So, it was back to more iteration.

Version 2 of Inventory System UI

After careful consideration, I replaced the previous elements with icons representing the clothing category. Comparing both interfaces, I find going with this approach enhances clarity and helps users to easily understand the clothing category at a glance. I was happy at this stage, but I became aware when I noticed the background brings visual noise that might affect readability due to its visual complexity and the whole interface was just too dark. So, it was back to more iteration, again!

Version 3 of Inventory System UI

The enchanting result

All in all, I was satisfied with the outcome of my inventory UI. I included a white background to ensure the icons remain visible and distinct for players to easily locate and interact with their items. Furthermore, I carefully adjusted the background opacity slightly to maintain clear separation between foreground and background.

Reflection on practice

3D modelling can be scary (at first)

The idea of 3D modelling can be daunting at first, but I took initiative by playing with the tools of Blender and thoroughly analysing the steps taken in the tutorials. I started to become familiar with modifiers and how they can be used to make your workflow more efficient. Regardless that I'm still a beginner of the software, I'm continuously learning new techniques of many things, whether it's sculpting faces or modelling low poly trees.

Don't roll with the first idea

Iteration has allowed me to seek alternative design directions and experiment with new concepts. It also provided me the opportunity to gain constructive feedback that instilled an unbiased perspective within that led to incorporating valuable insights and make necessary adjustments that has really improved the UI further. I also learned to embrace iteration as it's an integral part of the design creative process.

Next Project →