Diablo Inventory UI Fan Redesign (Figma + UE4) — Part I

In anticipation of the next quarterly update from Blizzard Entertainment, I did a slight rework of the inventory UI of Diablo IV. Last I’ve heard, the update should land at the end of June, which is only a couple weeks away from the time of this writing. I realize that this concept will likely be short-lived once Blizzard release the update and we see another iteration of the game’s design.

Update: As of October 2022, I am an employee of Blizzard Entertainment on Diablo IV. I won’t be able to finish this series for obvious reasons, but you can see my work on the game when it releases next year. Thank you for reading!

The developers at Blizzard have always been masters at putting a player’s experience first. Their attention to detail extends to every aspect of their games, and I love them for it. I’ve played every game they’ve ever made and loved every one of them. I have a whole lot of nostalgia for the Diablo franchise in particular (the original Diablo is, after all, my favorite game of all time).

So yes, this is very much going to be a fan post, and I apologize if you’re sick of fan recreations or redesigns of popular properties — I personally had loads of fun geeking out over this little project.

However, I wanted to try something different with this project. Instead of doing something brash and trying to completely override the intent of the developers through a complete redesign, I took this opportunity to examine one core user interface within the upcoming (soon, please?) Diablo IV and seek to improve it. I chose the character & equipment inventory screen, as shown in Blizzard’s February 2020 quarterly update on the game, as my subject.

On top of this examination and potential critique, I wanted to challenge myself to match the fidelity of my mockups to that of Blizzard’s, or at least come close. My main limitation was that, for all graphical authoring, I was only allowed to use one design tool: Figma.

I rarely use Photoshop or Sketch anymore because of the versatility and ease of use of Figma. I love its component system, live designer collaboration, and other tools. One aspect I don’t see many designers trying, however, is creating high fidelity, skeuomorphic designs purely within Figma. I learned a lot going through this exercise, and I hope you‘re inspired by what I made here.

First, let’s begin with basics and one big caveat. In my opinion, it is always easier to improve something that already exists than to author it from the beginning.

In this case, Blizzard was the author, so I automatically have the upper hand going into this. Most of the groundwork was already laid out, and I am standing on the shoulders of giants here. The Blizzard team likely have tons of playtesting and research to back up their decisions, as well as core gameplay and experience pillars the team is committed to following. Since I don’t work for Blizzard, I can take some liberties and this is very much a personal fantasy to work on a property like Diablo.

Please excuse my ignorance.

Also, this is not intended to be a Figma tutorial, this is merely highlighting the fact that you can achieve high fidelity, graphical UI for video games and other products using Figma.

A side-by-side comparison of Blizzard’s design to my wireframe.

When I start a design, I like to break things down into workable chunks. Sometimes that means sketching on paper, other times it means making wireframes, and some projects see me jumping straight into high fidelity mockups to send off to user testing. In this case, I started with wireframing in Figma.

I don’t typically use components when wireframing because I like to be nimble. Once elements are pretty well defined in the wireframe and some patterns begin to emerge, I move on to organizing elements and setting up a library of components to use across the UI. This helps in the long run once you get into polish, since you can update your master component and propagate the changes to all the child elements.

An explanation of the rationale behind my layout changes.

Here’s a breakdown of the layout changes I made and a bit of the reasoning behind my decisions:

• Move the gear slots into a more symmetrical layout, with primary protective gear on the left and secondary protective gear on the right. Amulets are usually pretty versatile and feature larger art, so I included that slot here as well. I also went top to bottom with the gear on either side: head/neck, chest/arms, waist/feet.
• When equipped, I shorten Rings into a square slot to save on space, since their designs are typically round and can fit into a square container. A full vertical rectangle seemed a bit much, and I had more plans for the equipped gear section.
• Weapons are very important to the Diablo franchise, and while Blizzard’s UI does have them slightly bigger than the other equipment slots, I felt they could be exaggerated and enlarged a bit more.
• With the introduction of Angelic, Demonic, and Ancestral power provided by gear, I felt that these stats were a) secondary statistics and could thus be a bit smaller than they currently are; and b) are closely tied to your gear and apparently not influenced by your character’s level. I moved them to the gear section to more closely relate them.
• By moving the alignment power stats to the gear section, I saved enough vertical space that if the tabs were moved elsewhere, I could fit an additional row of inventory slots. I moved the tabs to the left and opted for text labels like the ones in the original UI, so the number of equipment inventory slots in my final design came to 40. I also preserved the original size of the individual inventory slots.
• The sort button was originally very small and awkwardly placed, so I moved it to the bottom left and made it a bit easier to see and select within the grid system’s logic. Now if you were to use a gamepad to navigate to it, its placement makes a bit more sense.
• When using a gamepad, I added labels for navigating between inventory tabs quickly using the Right and Left Triggers. Since the bumpers were used for primary tab navigation, I surmised that secondary navigation would be appropriate using a similar method. I also am accounting for enough space to accommodate up to 5 tabs with reasonably long names.
• In the character details section, I noticed there was no mention of the current character’s name or class, so with the extra space, I added these details while more prominently celebrating the character’s current level.
• Finally, the main thing that prompted this redesign in the first place was to propose a simple solution for showing more context as to what your primary power attributes are doing for your character build. Stats like critical hit bonuses, attack speed bonuses, elemental resistances, and other factors are clearly labeled on items. In the spirit of Blizzard’s desire to make the game experience for newcomers more streamlined, I agree that showing the high level attribute value is a good solution, but I would also like to see a way for power users to expand those details and have a little more visibility as to their character’s progression and current strengths and weaknesses. In my design, clicking an attribute icon would toggle the expansion of its accompanying data set.

Overall, Blizzard’s updates to the iconic ARPG interface are, to my mind, huge improvements to the UX of games like this and solve some very real problems with creating a unified control scheme for multiplatform support. With Diablo 3, the entire interface was reworked to support gamepads in a 10ft experience, but Diablo IV makes it so PC players who so choose would also be able to enjoy the comfort of a controller without sacrificing usability, and vice versa for console players.

Well done, team Blizzard.

The basic elements of the UI laid out according to the wireframe. Mouse/keyboard and Gamepad control modes are on the left and right, respectively.

With the wireframing done, I set about recreating the style and color language of the original UI. I created components from scratch in Figma and tried to match the materials and grunge of Diablo IV. Leather, pelts, fabrics, metal, and wood appear to be thematic elements of the design language.

This process was fairly straightforward, with a lot of experimenting with Figma’s fill and stroke layers. Did you know you can put multiple fill layers and image layers on the same element? You can even set blend modes for colors and raster graphics within that same layer element. This is one of my favorite aspects of Figma. Check out what the layer stack looks like for the active state of an inventory tab:

What would Diablo be without gear? Honestly… I’m not quite sure. But I’m guessing it might not be as fun! Here I took a stab at recreating the item rarity backgrounds (the border patterns are vector graphics, by the way) using the rarity chart shown at BlizzCon 2019.

For the Ancient and Mythic tiers I wanted to stay consistent with that chart, so I kept the same color for the Ancient tiers and applied some additional glow effects to make Ancient Set and Legendary items stand out in your inventory. Mythic, I would imagine, could have a subtle particle effect to give it just a little more punch (perhaps tiny blood droplets floating upwards, or flower-petal-like amniotic flesh as seen in the reveal trailer?).

As for the gear icons, since those are currently being worked on and there were only a few small previews available in the update post, I opted to commandeer some high quality item renders from the Path of Exile inventory. Please forgive the crossover. I just needed placeholders to get a sense for whether my inventory slot coloring was working, while saving me a lot of time cutting out each icon that was shown by Blizzard.

Fun fact, the only elements that were not authored completely in Figma were the top tab background pattern and the spiky metal frame, the latter of which I did cut out in Figma using the pen tool and using it as a mask.

An overview of gamepad navigation zones.

Thinking about navigating with a gamepad vs a mouse was a really fun challenge. I prefer a gamepad most of the time, but I also can’t resist switching to the ol’ clicky clicky when I want to get a bit wild.

For the gamepad navigation, I defined four distinct zones with obvious ways to navigate between them. If your gamepad cursor is in the gear section, for example, if you navigate to the right column, then press right again, you will enter the character stats zone, where you can toggle the expandable stats.

There’s also a nice interaction element in the Diablo IV demos when dragging or selecting a piece of gear where a placeholder selection icon will appear in the slots where the item can be equipped. I kept that interaction, but added a small border around the equip slot preview to make it stand out just a little bit more.

Final mockups showing both mouse/keyboard and gamepad layouts.

And here we arrive at the meat and potatoes of this whole affair. Thanks for sticking with me on my journey into fanboy-town. In the image above, you can see the two interaction modes of the interface with all the elements in place. I even ruffled up the items a bit so you’ll be tempted to hit that Sort button.

I hope you’ve enjoyed sharing in my enthusiasm for what I believe will be a return to form for the Diablo series. I can’t wait for that next quarterly update.

In the meantime, I’ll be posting Part II of this soon-ish. I’m currently digging into Unreal Engine’s UMG system, so I’m in the process of implementing a functional version of this UI. I’ll update this story with a link to that once it’s finished.

Thanks for reading!

A final look at Blizzard’s inventory UI next to my finished mockup.

Continue reading Part II in this series: Diablo Inventory Fan UI Redesign (Figma + Principle + UE4) — Part II