ABOUT WORK NEWS CONTACT
Studio News
Newest Login
UI Design: Pretty meets Practical
By on

I have had the pleasure of re-working the UI design for Windforge this week, and I’m excited to share a bit about the thought process, progression, and iterations that have been explored. The UI has been a work in progress for a while now, and I think we have finally landed on something that both looks and acts in a manner that coincides with the kind of game we are making.

 

The Task of Usability

 

Equip Screen UI Windforge Redesign Wire frame

UI Design for a game can be a daunting one. It’s much more than trying to make menus look good, it’s about understanding what you want the player to get out of the game, how to navigate through it, and what that experience will be like. Looks are, of course, important in terms of matching the visual tone of the game, but functionality always comes first.

So where do you start when designing UI? How do you make accurate decisions when the development of the game is still evolving? How can you be sure that the design will work, regardless of different screen resolutions and aspect ratios?

We began this process by looking at examples of directions we felt had worked well for other games. Extensive UI Designs for games like Terraria, Minecraft, and Diablo seemed to be making different decisions about how to group information and present it to the user. We initially felt that the use of icons to represent inventory lists would make sense. We divided inventory slots up into a backpack, quick slots, and equip slots for apparel. Much like Minecraft, there would be a finite amount of space in your backpack for carrying items, and each slot would have a max capacity as well. It made sense to us from a “what you see is what you’ve got” stand point, where the player could easily see at a glance what items they have access to. Players would be able to drag and drop icons from slot to slot and organize their items in a very tactile manner.

From here, we designed the other menu screens, like the crafting menu, stores, quest screens, etc., to follow suit with the basic layout of the Equip Page. We thought this would work out really well, providing familiarity across all screens, while giving a bit of personality to each.

We then implemented this UI into the game and started to actually use it. It was fine at first, but we quickly began to understand the limitations of the design. First of all, the concept of using the icons in place of an actual item name was problematic. As we continued to add new inventory items daily (it seemed), we were quickly realizing how impossible it was to successfully establish each item with its own unique icon. The system worked for basic items like doors and boots, but what about decorative things like chairs, couches, paintings, vases, and bookshelves? Would we need to create unique icons for every single new item added to the inventory list (a list that now consists of around 500 items)?

Without the roll-over tool tips, even WE were getting lost on which items were which, and this was becoming frustrating.

Equip Screen UI Windforge Redesign Wire frame

Early version wire frame of the original Equip screen, with pop-ups that acted as tool tips describing the item on roll-over.

 

Equip Screen UI Windforge Redesign Wire frame

Here is an early version of the Crafting menu.

 

Equip Screen UI Windforge Redesign Wire frame

A final Art version of the textured UI screen that we implemented. The icon slots would lay on top of the empty areas.

We seemed to have reached the point where the ‘simplicity’ of the icon idea was no longer simplifying things, and we seriously began to think about that dreaded word: REDESIGN.

 

Less is More

 

We decided to get back to the drawing board. We needed to look at what we could do to make our somewhat fragmented UI experience more inclusive to the game and seamless for the user. Games like Skyrim and other RPG’s like Final Fantasy seemed to have done a decent job of using item names in their inventories, so we thought about heading more in that direction. We had to re-think things like Backpack Capacity and game play for Buying, Selling, and Crafting items, but what we ended up with was a much more sleek, inclusive design that could be more easily navigated.

Equip Screen UI Windforge Redesign Wire frame

A Wire Frame version of the Item menu redesign. Players drag and drop items into the equip slots on the right hand side.

Another thing that we wanted to try was, upon accessing the inventory, freezing the game play and overlaying the UI Menus over the paused game. We felt that navigating the Menus would not pull the player out of the game experience as much if they could still see their character and environment. Also, whenever the player changed equipment, they would have a real-time view of their items being swapped out or equipped.

We would still use icons, in tandem with the item name and other info, however, the big difference now is that the player has constant access to the important information instead of solely relying on tool tips. This is a big plus for easy information access! The tactile quality is still there, too. The player can drag and drop icons just as before, with the additional functionality of using the menu in a more ‘traditional’ way, like clicking ‘buy’ in the store and getting a pop-up that verifies quality before confirming your purchase.

Equip Screen UI Windforge Redesign Wire frame

The Store wire frame menu, complete with purchase pop-up.

Menus like the Crafting screen have greatly benefited from this redesign as well; it’s much more clear how to go about crafting items from a categorized menu than from a 500 item scrolling list. Something as simple as finding a pair of Iron Boots or a Titanium Propeller in your inventory is now infinitely easier, and the player will still be able to drag and drop into the quick slots.

Equip Screen UI Windforge Redesign Wire frame

Wire Frame of Crafting menu, where the player chooses what type of item they want to create using a simple menu>Pop-up system.

The Final Result

Now that the wire frame has been completed, I have been experimenting with bringing in the ‘pretty’. This is the part that I like the best! The wire frame is important in terms of making sure the sizing and spacing is accurate, but applying final art is what makes a UI really sing. In a game like Windforge, a player will arguably be looking at the menus almost as much as the environments they are exploring, so I want to make sure that functionality isn’t the¬†only thing that we focus on. I have also been experimenting with the success of the design at different resolutions, as you can see below.

Equip Screen UI Windforge Redesign Wire frame

Final Art redesign of the Store Menu at the smallest screen resolution.

Equip Screen UI Windforge Redesign Wire frame

Largest Resolution screen size (1920×1080). I recommend a full-size view of this one to get a real feel for the display space.

I’ve had a great time giving the UI a makeover, both functionally as well as visually, and would really love to get some feedback on your thoughts about the process and the results.

As always, if you like what you see here, be sure to up-vote Windforge on Steam Greenlight!