Reader UI of the Week: Dinte's UI
Each week, WoW Insider brings you a fresh look at reader-submitted UIs as well as Addon Spotlight, spotlighting 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@wow.com.
Today is an auspicious day. Those of you stuck at work or dealing with other responsibilities are clamoring for the chance to jump into the new Cataclysm content. Fear not -- Reader UI of the Week is here to distract your thoughts for a few moments, letting you breathe a sigh of momentary relief from imagining the vast depths of Vashj'ir, the embattled earth realm of Deepholm, and the multitude of new, fun dungeons you could be playing right now. Patience is a virtue, no?
This week, Reader UI looks at Dinte's UI, a quirky, constantly under construction piece of work that offers a minimalist approach to healing without sacrificing the screen space needed to do the job effectively. At first, I was skeptical, but after reading the philosophy behind the setup, I was more sold. I think you'll enjoy this one.
Take us away, Dinte:
Hello Mathew,
I want to start by saying thank you for doing the reader UI showcases. I love looking at and analyzing other peoples' UIs, especially the weird and quirky ones. Those ones make you think. You see, I'm the strange type of person who doesn't just build myself custom UIs on a regular basis -- I have theories about fundamentals of UI building. Many weeks, I'll spend more time thinking about that layer of graphic between us and the game than the game itself, and I like to think it shows in my creations. So I thought I'd send my current setup your way. Along those lines, I apologize in advance if I spend too much time talking about ideas and not enough getting to the point. I can be a bit long-winded.
There are a few main principles I kept in mind while building this. First, it's a healer's UI, from the ground up. I do use it when I need to switch to DPS in a raid, but the entire thing is built around facilitating the whack-a-mole minigame called healing that I love so much. That's why the raid frames where the first thing I positioned, with the cast bar centre stage along side it. This means that everything central to my game play is right by my character, where I should generally be keeping an eye out for fire and other stuff not to stand in.
The second principle I kept in mind when building this what that of only bringing information to the forefront when it's relevant. This shows up in my healing frames, my health bar and the power auras (which I've left out; that could be an article in and of itself). My raid frames are actually translucent until something relevant happens, which allows me to see what's by my feet without taking vital information away from the centre. When someone DOES take damage or gets a debuff it shows up in bright colours, ensuring that I pay attention to it. Like I said, bring the important information to the forefront when it's relevant. Going with this idea, it's also a minimalist UI. I try to keep thing as neat and compact as is reasonable.
The final principle is that it's a work in progress. Nothing is ever finalized, and I'm tweaking it here and there every week.
Now, the question everyone asks is, "Why is everything at the top?" It is atypical, but my reasoning is as such: The most dangerous stuff while raiding is generally closest to you. If you cover up the bottom of your screen, that floor may be behind you, but it's still reasonably close. Fire there is more important to pay attention to that fire at the very top of your screen, which is by nature of perspective much further away. I decided that it seemed smarter to cover up the part of the room that was least important to my performance and survival.
Without any further ado, onto the addons!
[See the labeled photo]
0) LitePanels for the graphics underneath everything. Essentially the same as KG Panels.
1) Bartender for the various bars, with ButtonFacade to skin them.
2) Shadowed Unit Frames for the frames. I like it because it's both simple and flexible.
3) Quartz for the various casting bars. I've doubled up on this with another addon called GCD (Shown in the second image.) that has a small cast and GCD bar around my cursor. I haven't decided which I like more, or even if I'll stick with both.
4) IceHUD is what I use for my health and mana bars that sit beside my raid frames.
5) Satrina Buff Frames for my buffs (under the minimap) and debuffs (beside my raid frames, in easy view.).
6) Vuhdo is my raid frame of choice. The bars start translucent and fill up bright red as health drops. The smaller frames on the bottom are pets.
7) Squeenix for a simple minimap.
8) SLDataText for compact text that also functions as buttons to open up bags, friends, guild, etc.
9) MinimapButtonFrame to organize all my minimap buttons in a neat fashion.
10) Prat for chat. Not shown in this picture.
Not shown because they're not really relevant to the general UI: Power Auras, Baggins, teksLoot, Recount (hidden 90% of the time) and TidyPlates. I run it on 1680 x 1050 resolution.
The other photo is cleaner and more representative of what it would be like in combat. It's a hard UI to capture in stills because it varies so much by context. I hope I've done a decent job of representing it.
Hope you enjoyed my ramblings,
Dinte of Burning Blade (US)
Thank you very much for the submission, Dinte. Like I said previously, Dinte's UI took some time for me to "get," not because I didn't particularly enjoy the setup but more from feeling disoriented. It helps to remember that user interface creations like these are personal works, conforming to the very specific needs of their creators. Everything is subjective here, with my one objective disdain of the menu bar.
Above the trees
From here on out, I'm calling the top of the screen "above the trees." Why? Who cares? We can have our own terminology for these things, and you'll look crazy speaking your secret language about UI design with me. "So, where do you put your action bars? Bottom bar or above the trees?"
Action bar design comes in many flavors, but there are two subsets of that design philosophy that stand out as the real dividing line -- people who need their action bars showing and people who don't. I sit squarely in the former camp, as having the action bars showing doubles as my ability cooldown timers using OmniCC. Other people, most usually expert keybinders, don't necessarily need their action bars showing because skills are bound to keys moreso than the traditional action bar.
Dinte has chosen to show his bars but put them above the trees. At first, again, disorientation set in. But what I soon realized was that Dinte fell into the "show my bars" camp but treasured the bottom of the screen. Putting the action bars above the trees was the perfect move. Backed by a simple gradient frame, I think the bars look great, don't clutter up the UI right under the healing interface where most people would put them, and still are available for sight-reading if needed.
Centered healing
Healers, take note! Dinte has done a pretty awesome job making his healing-centric UI a middle minimalist powerhouse. Notice the use of IceHUD target and player frames locked to the side of the Vuhdo interface. Much like how I recommend, when dealing with a bottom bar UI, fitting in the addons together with little space in between, I want to impart that advice onto center UI creations as well. Stacking in the center does not have to crowd the entire screen and can have some excellent effects.
Dinte has flanked the main Vuhdo bars with the information relevant to his job, while growing that information parallel to Vuhdo. Let one addon be the guide, and fit other elements around it. Much like how many people use their action bars at the bottom of the screen to serve as that symmetrical base, try a different addon like Dinte did for that role, and you might be pleasantly surprised.
Recommend, much?
I can't recommend SLDataText more than I already do. I haven't written about it in a while, so bear with me for a few moments while I gush. SLDataText is a UI dream addon -- simple text information that can be moved anywhere and is incredibly customizable. This text then can display more information on hover and can textualize everything from whether you have new mail, durability, friends online, guild members online, frames per second, every type of currencies and number earned during your play session and much, much more.
Check out SLDataText here. You won't be disappointed. Text might seem backwards in such a graphical UI, but the amount of space you save and how incredibly simple the information is to focus on just blows my mind every time I see someone using the addon to its full potential. I cannot recommend it highly enough.
Wrapping it up
I am impressed with the effort, Dinte. You seem like the kind of person who isn't going to stop fiddling with your UI, however, so I'm expecting more submissions in the future. I wasn't onboard with the action bars above the trees in the beginning, but I am now. The philosophy is solid, and the cleanliness of the UI shows it. Two thumbs up.
%Gallery-19902%
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.
