Advertisement

Reader UI of the Week: Cruelblade pushes everything to the bottom

Mathew McCurley
Updated ·9 min read

Each week, WoW Insider and Mathew McCurley bring you a fresh look at reader-submitted UIs as well as Addon Spotlight, which spotlights the latest user interface addons. Have a screenshot of your own UI that you'd like to submit? Send your screenshots along with info on what mods you're using to readerui@wowinsider.com, and follow Mathew on Twitter.

With BlizzCon only days away, you can imagine my excitement and the amount of chaos in planning and executing this week will bring me. Never fear, gentle readers. Reader UI will not get lost in the shuffle. Speaking of BlizzCon, if you're going to be around at the WoW Insider Reader Meetup party jointly thrown by Wowhead, Tankspot, and more, you should come say hello to me. If you can't find me, ask Twitter where I am.

Cruelblade is a man cut from my own cloth. When you take a look at his user interface, you'll understand why. Everything is so neat and tidy, packed in to the bottom of the screen, leaving as much view space on top as possible. Meticulously planned and simple, to boot, Cruelblade's setup is one of my favorites this year. I mean, really -- look at how awesome those embedded target and player frames are. Are you serious?



Cruelblade's UI: death knight UI, bottom-bar, pack it all in

Cruelblade, give us the story:

Hello Mat,

I've read both WoW Insider and the Reader UI of the Week for a while now, and have always meant to submit my UI. Keep up the great work! Well, here are my thoughts on my setup.

First, what I'm using this UI setup for. I'm a PVE player at heart (PvP only rarely) and a somewhat experienced raider. I also have a touch of altoholism, so I'm constantly switching between characters both to level and play at end-game. Finally, I am a professional graphic designer, so I hope that comes through in the way I've designed this interface. That being said, my UI is focused around the following principles:

1) Comprehensive utility - I use this UI for all classes and all roles (I tank mainly but also heal and DPS), so I wanted one that works across all of my characters, no matter what I'm doing.
2) Visual conformity - I wanted all of the elements of the UI to fit together visually - without all of the extra skinning junk. I stuck to a simple black theme with Arial Narrow as the main typeface.
3) Screen real-estate - I abhor having junk all over my screen, so I wanted all of the information in one convenient, visually cohesive, place. Display resolution is 1920x1080.

Here is a list of the major addons that make up my setup:

CBH Viewport/KGPanels the foundations.
Pitbull Unit Frames highly configurable and they can look quite nice when used properly
Macaroon! Wonderful bar/button creation tool with tons of features you won't find elsewhere
Grid2 the original raid frames. I use them in combination with Clique when healing
Raven buff/debuff management.
Castbars light-weight, easy-to-use castbars
Tell Me When A lifesaver in a raid; this addon lets me know when buffs/debuffs need refreshing, procs are up, etc.
Engraved My main is a death knight and I find this to be an attractive rune counter
Skada/Omen Appears in the bottom right of my screen (omen in combat, Skada out).
Tiptac I hate the blizzard tooltips. This lets me skin/rearrange it.
ArkInventory Complicated but very comprehensive bag addon
Prat bottom-left of my screen. I keep it very small; some people probably won't prefer that.
Masque necessary to keep everything pretty
Kong hides unecessary elements - I use this to only show my quest-tracker on mouseover, for instance.

As for the layout itself, I focused on a few things. You will notice that with the exception of Tiptac, Grid, and my combat-information addons (TMW and engraved) I keep everything OFF the play area. I want to see what I'm doing and where I'm going without having to peer through a waterfall of combat text and other junk to notice that I'm standing in the fire. I wanted symmetry, which forced me to pile up elements (*cough* minimap) in the center. I've been considering abandoning the concept. I also wanted a bottom bar, but I want a Mini Bar of Doom (MBD) instead of a Big Bar of Doom (BBD). I think I did a decent job there. One issue that I could use some input on would be the visual space - it is quite busy down in that bar, and I'd welcome some ideas on how to keep the elements distinct from one another without having to increase the size of the bar (too much).

In order to keep visual organization in combat, the most-used buttons (though I tend to keep everything I use frequently bound to the mouse, with a few CD exceptions) stay in the middle-bottom on the center 12 buttons. As you go up into higher button rows, the abilities become more obscure. You'll also find things up there that I don't want to click in combat, like my stances/presences, food, etc.

That's enough wall of text for a lifetime. I hope you like my interface! Please let me know if you have any input, and thanks again for a great column.

Regards,

Cruelblade (DK, Mug'thol US)

Thanks for the submission and email, Cruelblade. If there has ever been a time when I needed to reiterate what a boon it is to UI creation to have a plan from the outset, this is it. Look at what happens when you set your principles and work within those confines. Somethings thinking inside of a box can be a good thing.

Everything where it needs to be

Everything on this UI is where it needs to be. Nothing is really dynamic on a death knight's UI except for his power bars and tracking of sorts, but since there isn't a healing interface that would be constantly changing or being looked at, DPS and tanks benefit greatly from the design ethics Cruelblade chose. You can have everything on the bottom of the screen because everything can fit on the bottom of the screen. The most impressive thing to me, really, is that he took a simple and streamlined aesthetic -- black boxes and natural borders -- and made everything fit together.

When I say that everything is where it needs to be, I am not referring to the fact that everything is where it should be. Every UI element, in this case, appears to be in the right place. That's one of those innate feelings you get from good or competent user interfaces. When you move your mouse across the surface or your eyes dart to find something, if you naturally are pulled there, someone did something right. When I looked at Cruelblade's UI for the first time, I could conceptualize and get the setup fairly quickly.

The usual suspects

Another thing you might have noticed is that the usual suspects of addons appear in Cruelblade's setup. What this means is that this UI setup is but a few clicks away from your own setup. There is no custom art or secret addons that make this sleek setup anything special. What it all comes down to is a plan and a little tinkering.

Using kgPanels for the simple black boxes as well as CBH viewport to move the game screen up past the UI are easy things most of us know how to accomplish. After that, it's all about planning out what goes where and how it should all fit together.

I've been seeing people mention Tiptac a lot more in comments, emails, and everything in between to me in recent weeks. I thought everyone already had tooltip addons -- is the Tiptac era resurging? I love Tiptac ... I just had this weird moment when it felt like everyone suddenly forgot the addon existed and then remembered it all at once. Then, it hit me -- it's not people's forgetting it existed but rather that we have so many new players that people are looking for genuine new ways to fix their tooltips. That made me happy. Get Tiptac, because it's awesome.

The advice portion

Cruelblade asked for advice in regards to the view space of the game itself, easily creating a delineation between the busy bottom and the carefree top. I am assuming that Cruelblade is referencing the Engraved and TellMeWhen addon elements sitting above the minimap in his screenshots. Here are some things you can go about doing to keep those cohesive without making the bar bigger.

First, why does TellMeWhen need to be that big? Scale that sucker down so that it lives above the minimap. By now, you've death-knighted enough that those icons are only reminders, not a roadmap, so you have a good enough understanding of the buttons you need to press in order to do what TellMeWhen notifies you of. Engraved actually looks pretty cool living in the "world" above, considering the addon provides its own built-in barrier and borders, making it fit over the game world pretty easily.

Really, I think it's a scale issue. Just like how your chat box is tiny in the corner, I think your TellMeWhen bar can also be brought down to a more manageable size. You could even use that space to the left of your debuffs and buffs for the player frame for TellMeWhen if you wanted to. Again, by this time, it's probably just a reminder and not the most crucial or critical addon in your arsenal.

Great job, Cruelblade. I love it. Smooth and sleek, clean, and stylish. You even managed to make it look great without any custom art or proprietary effects that anyone at home couldn't do on their own.

See you guys next week -- or, hopefully, at BlizzCon this year!

Interested in getting the most out of your user interface? Come back once a week for more examples of reader UIs. For more details on individual addons, check out Addon Spotlight, or visit Addons 101 for help getting started.