Reader UI of the Week: Zhee's UI
Finally, I return from BlizzCon 2010 with an ache in my head and a stomach hardened with Anabella hotel chicken fingers and Domino's pizza. Please, put me out of my misery. Actually, the chicken fingers were awesome -- it's hard to do good chicken fingers, and the Anabella came through in spades.
Thank all of you who came out for the reader meetup, by the way. You guys were awesome, very supportive of my MCing the night and asked some great questions while I was off the mic. It was so nice to meet so many of you, talk about all this crazy stuff and lead you guys in what I thought to be a really fun night. Anyway, we've got reader UIs to discuss, and I fully intend to do that now.
This week, Zhee emailed me all the way from the Netherlands to show off her healer user interface. What follows is a clean, crisp user interface that is functional, elegant and barely using up any screen space at all. Also, this article is being drafted on a keyboard that barely has a space bar, so if you hear screaming (or the article itself features splatters of blood), it's probably me prying my fingers off one at a time because this damn keyboard has driven me insane. Reader UI, go!
Take me to the special place, Zhee:
Opacity is a beautiful thing
Opacity is not a new topic in my columns. I find that the approach chosen by Zhee here is the cleanest, easiest look you can get in most UI setups. Essentially, position an addon on top of a kgPanel and set the addon's own settings to remove the border, then bring the opacity of the addon and the transparency of the background to zero. What you effectively have is letters and numbers floating in the ether. Moving this floating information over a kgPanel that does have some opacity/transparency/color to it allows you to give this "clear" addon a background to rest on top of.
This approach is particularly powerful with Recount, Omen, Skada and chat addons, as you can see in Zhee's examples. Look at how clean and solid her chat and healing meters look against the similarly styled kgPanels. What this also means is that you can block out your user interface in kgPanels, and then add in clear addons into those blocks, making resizing an easier task as you now have guides to help you with the occasionally tricky shapes.
A Grid worth healing for
This Grid is adorable. The setup reminds me of 10 iPod shuffles from a few generations back. The elongated Grid windows allow for more Grid notifications and alerts, a smaller spacing footprint, and potentially larger healing numbers and amounts available to Zhee. So many people are afraid to move away from square Grid formations that it makes me sad. Trying out new shapes and sizes can seriously up your game, and you might even stumble across a really awesome setup that you couldn't have ever come up with had it not been for a little experimentation.
Mouseovers are little gifts from heaven
Seriously. Mouseover bars and commands are the secret sauce in some many user interfaces. Setting certain bars to only show up on mouseover means you can add these hidden UI elements and save a ton of space. Action bars that are rarely used, pet bars, utility bars -- the sky is the limit with interface elements that can happily disappear from sight until they are ready to be used.
A good number of addons have the ability to be mouseover unveiled, so tinker around a bit in the options for a mouseover option. Bartender and Dominos are two of the best examples, since the action bars you can setup can easily be set to mouseover status. In fact, I'm working on a really cool Dalaran minimalist UI right now, making heavy use of mouseover bars for professions instead of Opie, because I want to test myself and see if there is a UI in the world without Opie that I would be happy with.
Anyway, great job, Zhee. It was refreshing to come home from BlizzCon, sit down at my desk, and be treated to such a simple piece of interface beauty. It almost makes up for all the Spartan UIs in my inbox.
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.
Thank all of you who came out for the reader meetup, by the way. You guys were awesome, very supportive of my MCing the night and asked some great questions while I was off the mic. It was so nice to meet so many of you, talk about all this crazy stuff and lead you guys in what I thought to be a really fun night. Anyway, we've got reader UIs to discuss, and I fully intend to do that now.
This week, Zhee emailed me all the way from the Netherlands to show off her healer user interface. What follows is a clean, crisp user interface that is functional, elegant and barely using up any screen space at all. Also, this article is being drafted on a keyboard that barely has a space bar, so if you hear screaming (or the article itself features splatters of blood), it's probably me prying my fingers off one at a time because this damn keyboard has driven me insane. Reader UI, go!
Take me to the special place, Zhee:
Thank you for the email, Zhee. Since it's just a few days since BlizzCon and I'm trying to keep everything as simple as possible, Zhee's UI is perfect for my mindset. This user interface uses a good amount of transparency to achieve a really cool effect that ties the whole thing together. In addition, the uniform spacing and sizing of the unit frames makes for a slick raid interface.Hello Mathew,
First off, I'm a big fan of your blog. It's a true inspiration for me!
I would like to submit my own UI. My main character (the one I raid with) is a discipline/holy priest on Kul Tiras (EU). The UI is suitable for all my alts as well, though.
As you can see, I like a clean UI, but it must be functional for raiding as well. Most healer UIs I have seen have very big unit frames, but I like them a bit smaller. All I need to know is shown in Grid, with small indicators and icons. No big flashy bars for me.
I have hidden the micro menu (on top of Recount) and a Bartender bar (under the Quartz bar), by fading them out with Bartender. They appear when I mouse over.
On the top of my screen is a Titan panel and a reputation bar, also visible on mouseover. I like to hide everything I don't need to see all the time.
I have tried to make my UI as symmetrical as possible. What bothers me a bit is the extra block of auras on top of the Pitbull target unit frame. Unfortunately I don't know a way to smooth this out without losing the option to check my targets buffs.
I absolutely love what you can do with Pitbull, though. I have set it up to show the unit frames of the player, player target, focus and focus target, each with its own configuration.
Here's a list of the addons I use:
- SatrinaBuffFrame
- Button Facade
- Titanpanel
- Chinchilla
- BasicChatMods
- Pitbull Unit Frames 4.0
- Bartender 4
- Grid (supported with Clique)
- Quartz
- Recount
- TipTac
- eAlign
- TellMeWhen
- RaidBuffStatus (hidden)
- KGpanels
- Decursive (hardly visible next to Grid)
I'd love to know what you think of my UI. Any tips are always welcome!
Thanks in advance. :)
Zhee
Opacity is a beautiful thing
Opacity is not a new topic in my columns. I find that the approach chosen by Zhee here is the cleanest, easiest look you can get in most UI setups. Essentially, position an addon on top of a kgPanel and set the addon's own settings to remove the border, then bring the opacity of the addon and the transparency of the background to zero. What you effectively have is letters and numbers floating in the ether. Moving this floating information over a kgPanel that does have some opacity/transparency/color to it allows you to give this "clear" addon a background to rest on top of.
This approach is particularly powerful with Recount, Omen, Skada and chat addons, as you can see in Zhee's examples. Look at how clean and solid her chat and healing meters look against the similarly styled kgPanels. What this also means is that you can block out your user interface in kgPanels, and then add in clear addons into those blocks, making resizing an easier task as you now have guides to help you with the occasionally tricky shapes.
A Grid worth healing for
This Grid is adorable. The setup reminds me of 10 iPod shuffles from a few generations back. The elongated Grid windows allow for more Grid notifications and alerts, a smaller spacing footprint, and potentially larger healing numbers and amounts available to Zhee. So many people are afraid to move away from square Grid formations that it makes me sad. Trying out new shapes and sizes can seriously up your game, and you might even stumble across a really awesome setup that you couldn't have ever come up with had it not been for a little experimentation.
Mouseovers are little gifts from heaven
Seriously. Mouseover bars and commands are the secret sauce in some many user interfaces. Setting certain bars to only show up on mouseover means you can add these hidden UI elements and save a ton of space. Action bars that are rarely used, pet bars, utility bars -- the sky is the limit with interface elements that can happily disappear from sight until they are ready to be used.
A good number of addons have the ability to be mouseover unveiled, so tinker around a bit in the options for a mouseover option. Bartender and Dominos are two of the best examples, since the action bars you can setup can easily be set to mouseover status. In fact, I'm working on a really cool Dalaran minimalist UI right now, making heavy use of mouseover bars for professions instead of Opie, because I want to test myself and see if there is a UI in the world without Opie that I would be happy with.
Anyway, great job, Zhee. It was refreshing to come home from BlizzCon, sit down at my desk, and be treated to such a simple piece of interface beauty. It almost makes up for all the Spartan UIs in my inbox.
Filed under: Add-Ons, Reader UI of the Week
Patch 5.3 interview with Ghostcrawler
Mystery of the Unborn Val'kyr
The latest patch 5.3 news
All of the latest Mists of Pandaria news








Reader Comments (Page 4 of 4)
Suinimtao Oct 27th 2010 2:22PM
Does anyone have any tips on configuring bartender for druids? I find that when I'm placing spells on the action bars, they duplicate themselves on another action bar. Very frustrating!
Maritime Oct 27th 2010 2:29PM
To all the people asking Zhee to zip up the WTF folder and post it for download, it's really not that simple. When my UI was featured here a couple months ago I gave my WTF folder to a few guildmates. It didn't help. Dropping a WTF folder into an existing installation does not magically apply all the settings. There are too many variables to account for, and different addons use different methods to position themselves on the screen. The addon packages that you can download that do set up almost automatically are specially coded to configure themselves to your system.
Sanat Oct 27th 2010 7:28PM
There are methods you can use to actually import all the settings, but it is a pain, and basically to do it you have to scrap everything you have, import the UI, and relay out your extra addons. Saying this the addon, reflux is VERY VERY helpful for getting everything setup right. Basically what it does it takes a snapshot of where everything is, and when you run the command reflux switch it reloads the settings from the capture.
Link : http://www.wowinterface.com/downloads/info12811-Reflux.html
This is the addon I suggest for anyone who uses multiple UI configurations or wants to share / transfer their UI.
Zhee Oct 28th 2010 6:35AM
It's a lot of work indeed. Still trying to get it right.
TheExplorer Oct 27th 2010 8:28PM
Thanks for posting this. :) I got my UI to be very similar. I made a few changes, but overall its the same. Took me a while, though...a little over 2 hours to finally get it pretty much finished. I may need a few tweaks to it, but its very nice looking.
Lon Oct 27th 2010 11:09PM
@Suinimtao
The best suggestion I can make having had a similar problem would be to enable all 10 of the bars, choose which form you want to configure action bars for and move one ability into the first slot on the main bar (I use Bar 1). Shift to another form, do the same and see which bar it duplicates to. Then you disable the extra bars and use other available bar numbers. If that doesn't make sense, lemme know.
Lon Oct 28th 2010 12:19AM
@suinimtao cont'd
Also, from memory, the bar behavious changes based on the spec you are currently in (Primary vs Secondary) so you'll need to keep that in mind when experimenting
Bharat Oct 28th 2010 4:53AM
this UI reminds me quite a bit of my own, I play on a 13in screen so every bit counts, almost all of my UI is already reduced down 75-80% in size; though I'm one of those people who likes to know that all my spells are viable when I need them you never know when you'll need that one spell you hardly ever use except for that one occasion where it was genius. But otherwise most of my stuff is hidden when out of combat or only appear on mouse over. But this is a great UI, I'll probably take some elements and throw them into my own, the bottom of your layout looks exactly like my own sans the grid which I keep to the left, your quartz bar looks impressive though I think I'll have to consider doing something like that; if you ever read this could you go into a bit of detail as to how you went about setting it up, do you have your target's bar there as well? Do you find it easier to just hide the DoT timers and such? Thanks and once again great set up!
Zhee Oct 28th 2010 6:32AM
@Bharat
The basic idea was to try to create as much symmetry as possible. (Symmetry is the golden rule.) Starting with the KG panels at the bottom left and right. I made these panels just as big as I wanted my chat window to be. Then I made a long KG panel for the middle part, which I filled with Bartender action bars, adjusting them in size and padding that it would fit perfectly in the KG panel. After I did this, there was still a little bit of space left, which I then used for a single big TellMeWhen button. (That I don't desperately need, but it's such a nice fit.)
Next step was fitting in the Quartz bar. I don't use Quartz for the target cast bar, since Pitbull features this as well.
Keeping Quartz unlocked, so that it is visible, I could place my Grid frame in the middle and add the 4 Pitbull unit frames, 2 at each side. I used eAlign (a very simple alignment grid) to place them very precisely.
I don't use DoT timers. For my HoTs I use Grid to keep track of them and OmniCC is a very neat addon to add cooldown timers to your buttons, so there is no need for extra addon clutter.
I hope this was helpful.
Nick Rawr Nov 27th 2010 6:24PM
Thank you so much Zhee! Hopefully you'll update the addon frequently and etc... love it :)
jordanmcguigan Oct 29th 2010 12:40AM
Yeah, except you can't (yet) click off buffs in any buff mod, because none of the addon developers have figured out how to make a secure call to it (apparently blizzard made the API really difficult).
Goranaws Nov 1st 2010 9:59PM
OH! Only Buff mod that is still clickable is called BasicBuffs. All it does is allow the standard Buff bar to be movable. Can't resize it at all. But it's still useful.
Goranaws Nov 1st 2010 6:55PM
Hmmm... Not enough action buttons for me... Btw, how would I go about submitting my own UI?