High Fidelity Menu's with Icons Changed

The icons were still considered Low Fidelity so I changed the gradient on them to a radical sphere white that glowed against the background of the shape to highlight them better. I changed the corner radius on each to 25 so they weren't just a normal square and used a white colour to highlight them against the darker background

Weapons Menu

Pre-Production

I created scamps and Wireframes for the Inventory Menu I was going to be creating for The Elder Scrolls V:Skryim. It helped me to see the idea I wanted to make and come up with a bunch of iterations to settle on a idea.

Scamp 2

Scamps 3

wireframe 2

Scamp 2

1/6

UI Design on Figma

On Figma I made every Menu that I would be adding to my User Inventory. It included colours, icons and proper typography in a full High Fidelity and Visual Wireframes

Inventory Start Menu

This is the first menu the user will see when they load up their inventory

Prototypes

These are a few prototypes I have made on Figma that showcases the control and how the user can navigate through the User Inventory on Skyrim

Full Menu Layout

Prototype

Video Playthrough

This is a prototype of my full menu navigation. You can move through each inventory category at the top and then see a selection of items appear when you have chosen a specific category.

Search Result

This is the Search Bar on my inventory menu. I have made a prototype to show what a use would see once they click on it. At the moment it shows a search result and once the user clicks it will take them to a custom menu with items that are related to the search result they either typed in or chosen from previous results.

Scrolling Menu - Click To Drag

This is the scrolling in action on one of the menu's in my game. I created a prototype to show that the user can click and drag to make the potions slide over to reveal some more. This means I can have more item icons in one menu and the user just has to scroll to view them