Reader UI of the Week: Foofy's UI
by Mathew McCurley 
Jul 20th 2010 at 5:00PM
My condolences to those of you on 24-hour downtime. I've been there, and I feel your pain. Hopefully, some Reader UI of the Week can cheer you up a little bit. We are taking a look at Foofy's UI, which is anything but, emphasizing good color contrast and an interface that is heavy on information, but not so busy that it's distracting. Everyone sit around the campfire, join hands and let me break out the ol' guitar for a little camp song I like to sing called Reader UI.
First off, let me get this one little bit of business out of the way. I've been typing Foofy, like, a million times, and it doesn't get old. So please, let me have this one little joy. Foofy, take it away:
Thanks for the submission, Foofy. Foofy's user interface follows some of the core principles I really like to stress about WoW UI design, which is why I chose to spotlight this particular setup. The three specific pieces of Foofy's UI that stood out to me were the contrast of colors, unit frame placement and something I am calling "not afraid to be thin." More on that in a moment.Hey People,
Here are some screens of the tanking UI I've been working on this week. I basically redid the entire thing from scratch a few, using my former UI and many of your suggestions from "UI of the week" as inspiration.
My goals were to have the most important information directly in front of me at all times, without cluttering up the view window too much; to keep colors, fonts, and bars matching, and keeping things as symmetrical as possible; and finally, I wanted to use kgPanels to add borders and keep things separated.
I have Omen expand upwards in battle, directly over my target-of-target frame. Since being on top of threat doesn't always mean I'm the target's target, I like keeping these 2 frames close.
To the left of Omen I keep my focus and focus target frames, which is always the other tank while raiding. I have the debuffs enlarged on this frame to quickly track encounter related debuffs, so I know when to time taunts, etc. My own debuffs are also enlarged on the current target frame. I've got the primary buff frames in the default spot, but also use a small area to the right of my action bars to keep track of my own buffs, and a few important debuffs.
I'm pretty new to Grid, and am currently just using the base install with only a few changes to the defaults. I have Vigilance showing up in the frame centers so I can easily keep track of it (and to make sure I don't clear it from another War tank). I also use a Vig tracker ("Warrior Vigilance Tracker" -- on top of the debuff bars).
Finally, I prefer seeing cooldown text on the action bars to line mods, and I use OmniCC with Dominoes for that purpose. I also use a Dominoes plug in called "BuffTimes" to highlight the border of a button if that buff or debuff is applied to the current target.
Main Add-ons used:
Dominoes - Action Bars
X-Perl - Unit Frames
Grid - Raid Frames
Prat - Chat Frame
Titan Panel - Info Bar
Satrina Buff Frames - Buff Icons and Bars
Skada - Damage Meter
Omen - Threat Meter
SexyMap - MiniMap
To help everything look pretty, I used:
kgPanels - Borders/Panels
ColorTools - Adds copy/paste for easier coloring
Fountain - Fonts
eAlign - Adds a grid toggle to line things up
ButtonFacade - Button Skinner
Sunn Viewport Art - Bottom Panel Art
I'd appreciate any input, critism, etc. I will most likely be tweaking this a lot in the coming weeks anyway.
Thanks,
Foofy - Mug'thol US
Let's hit the obvious points first. One simple broker data bar? Check. Large field of view? Check. Inappropriate trade chat text I had to edit out? Double check. All right, on to the UI.
Contrast is key
One of the hardest aspects to grasp when choosing colors for a user interface is how colors interact. Color theory is an incredibly interesting aspect of art and design, and anyone interested in that type of thing should definitely do a little research on it. Hell, start with wikipedia. Suffice to say, you don't need a course in color theory to talk about the basic tenets of the science. At the end of the day, color theory is about choosing colors that are harmonious with each other, pleasing the brain and the eye and relieving visual strain for the viewer. This is something you want to strive for when choosing colors that sit on top of each other.
The right contrast is key. Foofy has chosen to contrast his user interface elements with a dark red and black Sunn Viewport panel. Black works, and the dark red complements by setting the things on top of the panel out from the background. By choosing a dark background, light colors can come through more easily and are more easily caught by the eye, especially the white trade text. In addition, most of the icons in WoW utilize a multitude of bright colors, so having those icons fitted over a dark background contrasts the icon better, or appears to, at least. Even the default colors on health and mana, a light green and a basic blue respectively, look good sitting on top of the dark red Sunn Art.
Colors are my biggest problem when designing a user interface. I get a certain color in my head, pick all the colors that go with it, and in the end, the whole thing just doesn't work. Are you ready for my incredible secret, though? I go to paint websites, like Benjamin Moore or Behr, and use their online color tools to design rooms with my proposed user interface colors. Not only do I get a sense for what goes well with other colors, but the websites can even recommend colors that go well with each other. Did I mention that I may have a problem?
Frame this one
Unit frames are always a tricky subject for people. Some people don't even use them, opting for a HUD approach. Frankly, unit frames can be clunky, but are totally manageable. The first thing you want to do when thinking about what to do with your unit frames is ask yourself what you want the unit frames to do for you or add to the interface. Foofy does what most people do -- he uses unit frames to show a target, a target of target and some debuffs above the unit frame. The smartest decision he made, though, was lining up the unit frames such that they don't take up too much space and align nicely with the rest of the UI. Everything matches, even the color borders around the unit frames. I like it.
Not afraid to be thin
Here is a concept that I've been toying with for awhile -- ever since I started to write this column, in fact. People are afraid to make certain addons, like DPS meters or threat bars, smaller than they are. A lot of the pertinent information of these bars comes from the positional nature of the bars, not the actual numbers for the most part. Much of the data's interpretation lies deeper in the addon. So, for purposes of in combat use, the addon's display does not really have to be that large.
Foofy isn't afraid to make his DPS meter smaller than most I've seen. In addition, the buffs cooldown bar on the right side of the screen is thinner than most I've seen, which gives him a lot more room to work with. Do not be afraid to slim down your addons to make some more room. I promise you that you will not need all of the information at every moment of every fight. There is plenty of time afterward to go deeper into Recount and see the logistics of your DPS. Before then, a thin slice of DPS might be the treat you need to free up some valuable space.
Bottom line: Great job, Foofy. I love the colors, don't mind the dark undertones and especially like the amount of information crammed into the bottom without being overwhelming. Good show.
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, your source for everything addon-related.Filed under: Add-Ons, Reader UI of the Week
Reader Comments (Page 1 of 3)
Hih Jul 20th 2010 5:18PM
I've been meaning to set up a "real" UI, as opposed to the basically, just Grid+Default Blizzard UI I have now, but like... I don't even know where to begin. It seems so daunting to try and set up a UI that looks like that. Are there any guides out there? Because I've just been getting jealouser and jealouser looking at these reader UIs and at how clean they look compared to mine.
Mellisande Jul 20th 2010 5:35PM
I couldn't agree more with Hih! Some sort of "making your UI look nicer 101" would be amazing! Maybe even a "top five ways to improve your UI". Something like that...
curzen Jul 20th 2010 5:36PM
start with dominos, makes the biggest impact to redo your action bars. go from there, take another UI element you'd like to look different/be somewhere else and look for an addon that does it.
Finnicks Jul 20th 2010 5:44PM
Dominos is definately the place to start (in addition to a unitframes addon). That will let you customize (move, resize, rotate, whatever) all 10 action bars individually. It's really flexible, letting you set up padding between bars, spacing between buttons (at least a few pixels between buttons gives your UI a much cleaner look. Having them crammed in next to each other looks cluttered to me).
You might also pick up kgPanels. It's got a learning curve to set up, but once you figure out the basics it's amazingly useful. All it does is make graphical panels, which let you map out your UI. This UI uses a different addon to accomplish the panel at the buttom that sets his buttons apart from the gameworld, but you could accomplish something similar using kgPanels, which supports image-based backgrounds like that one.
My own "UI panel" takes up the bottom 1/4 or so of my screen, and I keep mine slightly transparent with the lower 1/4 of the visible game world behind it. Other people use a Viewport addon to literally scale the rendering of the game world so that it only takes up part of the screen.
calvport Jul 20th 2010 5:58PM
In my opinion, the best place to start is to position a good UnitFrames addon (Pitbull, x-perl, ShadowedUF) and an action bar addon (Bartender, Dominoes) and maybe a minimap addon as well (sexymap, simpleminimap, squeenix). Another basic addon to start with is a buff/debuff frames addon (Satrina's Buff Frames, Elkano's).
After you have all this placed, you start to add in all your other addons and tweak every one to suit your liking. Once you are satisfied you can add in kgPanels.
Try drawing a picture of the UI you plan to make beforehand so you will havea bit of a guide to go by when you log into the game and start.
It will take time, but in the end you should be satisfied with your hard work.
MrJackSauce Jul 20th 2010 6:07PM
Also: Set aside a good amount of time for mistakes and to play around/experiment. Mucking around for 5 minutes and then leaving it won't work when you are starting out. It's good to get to know how each addon works as you install it. So yes do start with dominoes or equivalent action bar mod and go from there!
But more importantly make sure you like it and you will have fun using it. A massive interface with stuff everywhere is no use and makes your game play worse.
Rocky Jul 20th 2010 6:40PM
What everyone else has said is good info. Or, you can be lazy and go to
http://www.tukui.org or http://www.wow-lui.com
and enjoy the fruits of someone else's labor. I liked Tuk so much I've donated a couple times. LUI is also popular, but takes up a little too much of the screen for my liking.
Starraven Jul 20th 2010 7:43PM
I think something that is also really important when setting up a UI is the amount of differant characters you play. I am an altoholic, so when I chose addons I like to find ones with profile settings. It saves a lot of time setting up you UI on 10 differant characters if you can click a profile and have your base setup already there. Then all you have to do is make a couple tweeks to it for the new character. It has saved me countless hours doing it this way!
Pyromelter Jul 21st 2010 3:42AM
3 Addons to quickly change your UI dramatically, that are all relatively simple right when you first load them up:
Shadowed Unit Frames
Dominoes
Sexymap
Dominoes is by far the simplest action bar addon out there, and works relatively nicely. Shadowed Unit Frames is great in that the default settings are excellent and don't need much tinkering. And Sexymap will allow you to move your minimap around.
I don't recommend things like TukUI as you can't modify things in-game. To make a UI look just right, it can take many hours. I estimate I've put about 20 hours into my UI to get it just where I want (but this also includes updating addons with patches).
Foofy Jul 22nd 2010 5:09PM
Like others have said, start with those addons. Spend some time digging through the options for all of them, and get a good feel for each.
Then, when everything is perfect, start over from scratch.
Manorton Jul 20th 2010 5:19PM
Looks great. One thing you could do is dump Omen since you have Skada already running. Just create another Skada window for threat or using it in its combat mode to switch to threat automatically.
Grimm Jul 20th 2010 5:22PM
... or go with ThreatPlates and dump both.
Zero456 Jul 20th 2010 5:52PM
@Grimm
Threat plates helps, but you cannot rely on it completely. For example: In my current 10-man ICC raid, one of the DPS, a paladin, has Shadowmourne equipped. Because of this, I have to take a look at the threat meter every once-in-a-while to make sure he isn't gaining too much threat beyond what me and the other tank are getting. If I notice it too high, I cast Hand of Salvation which drops his threat to more appropriate levels. Since Threat Plates only notifies you of your own current threat, it doesn't provide the information I would need to make a judgement on whether or not to reign in my fellow pally's threat. The key is utilizing the information from both of these addons.
Foofy Jul 22nd 2010 9:58AM
I tried using Skada for both, but could not get the threat meter working the way I wanted. I basically have Omen pop up from the center, and only show me and the top 3 threat generators. When I tried this with Skada, it was only showing the bottom 3, and I had to hover over the window and scroll up with the mouse wheel each time.
I like using threat meters AND tidy plates. Threat meters only show you the targeted mob, but are easier for figuring out which DPS needs to slow down, and when I'm about to pull aggro from the other tank at a bad time (Saurafang, Fester). The plates make trash pulls and AoE easier, as it easy to spot a loose mob.
Manorton Jul 20th 2010 5:27PM
I actually use both. I like to keep an eye on the total threat stack of th group to see who might need to back off. I LOVE threat plates, but they only display when you are about to lose or have lost agro. If i see a mage or rogue start to climb the meter I can usualy respond before I have to watch the bar turn read and run away blowing a taunt :) But yes, get Threat plates!
firstlordmoth Jul 20th 2010 5:36PM
I really like this column and some of the UI's that you feature are very stylish and elegant, and therein lies the problem. Some of us start getting the mods listed for a particular setup, fire up the game and all we have is a big ol pile of mess in the middle of the screen. Then we open up the configuration pages in the interface panel and say "Wha? Where'd those come from?" So for those of us who aren't as savvy when it comes to making things pretty, is there any way in the future to include a link to a config file or what not that we can use to make the puzzle look like the picture on the box?
robert Jul 20th 2010 5:35PM
lol...Foofy...Just has that roll of the tongue feelin.
Almoderate Jul 20th 2010 6:39PM
Maybe it was just me and my former-guildie bias, but I saw the title and immediately thought of Foofy of Staghelm!
Entaro Jul 20th 2010 9:21PM
My first reaction: "Foofy?! The Boomkin from Staghelm that I secretly adore?"
I'm so sad about that class change... Even though it doesn't really affect me in any way. I hope Foofy has fun.
Foofy Jul 22nd 2010 9:54AM
I think that's a different Foofy. There's a couple on the Armory. I actually had the name "Foof" but it was already taken when I switched servers...