Each week WoW.com brings you a fresh look at reader submitted UIs. Have a screenshot of your UI you want to submit? Send your screenshots, along with info on what mods you're using, to readerui@wow.com.

Hello, Reader UI of the Week fans! Is everyone having a wonderful week so far? Great. Let's see if we can make this week even better with a gorgeous user interface design from WoW.com reader Lollypops. This week, we take a look at a user interface that strives to create a very uniform color scheme, and it ends up looking great. After getting into the user interface itself, we will discuss some tips and tricks on making your UI color match. Won't you join me?

Lollypops, please, tell us about your UI!

Hello there. Enclosed is my User Interface Submission for Reader UI of the Week.

I'm including several screenshots that show my interface in various states of disarray. :)

My UI was born out of a growing dissatisfaction with the default Blizzard unit frames, and Blizzards methods of delivering information to me--the player. I suppose it comes from my first-person-shooter days, but I've always preferred my health/power/primary information at the bottom of the screen, with large, easy to read bars. I also hate, hate, hate (getting the picture?) the default raid frames. I prefer simplicity, keeping unneeded clutter off the screen. Even in BG's or Raids, my screen remains uncluttered, save for my combat text, which scrolls fairly quickly. Every ability I use is bound to a key (except what Opie displays)-- the only reason for displaying the one action bar (Pet bar is gone now as well) is because they're my most used/spammed abilities, and sometimes, if I'm taking a drink or getting lazy, I might click one or two with the mouse. :)

The first screenshot is of my UI as seen when I'm being lazy, useless, etc.. i.e. no target, no party, no combat, etc...

The center frame is my target, the frame to the right is my ToT. I was inspired by a UI screenshot of an arena gladiator back in BC (the full body portrait). Although mine is mostly for aesthetics, the original inspiration came from the utility of being able to view how well geared ones arena enemy was, even if they were out of line of site.

The third screenshot is of Wintergrasp combat -- raid frames are grouped by class, displayed on the left side of the screen, with party frames displayed below. Self spell and item cooldowns are displayed on each side of the Target frame respectively. Directly above those are self buffs on the left, and target debuffs on the right.

Addons:

Pitbull - Player on left, Target center, Target of Target on right. Focus and focus target are directly below and left of player frame. Mouse-over and target are directly below and right of ToT frame.
Dominos - Yes, only one action bar. :)
Buffalo - Buffs and debuffs are in the upper right (default) location
Classtimer - player buffs (Gargoyle, Bone Shield, HoW, Dancing Rune Weapon) are displayed to the left of the Target Frame. DK-specific debuffs are displayed to the right of the Target frame (specifically my diseases)
KGPanels - Red panels around the target frames and action bars, as well as each chat box (left and right).
Chatter - General, Trade, Local Defense, and BG's displayed on left. Guild, Party, Officer, Raid, and Whisper on Right.
DKi - Just above target frame. Faded out when not in combat.
CooldownButtons - Spell cooldowns directly above Player frame. Item cooldowns directly above Target of Target Frame.
AutoBar - On the far right of the screen, faded out when not in use.
SexyMap - I dislike the gaudiness of the presets, but love the customization.
Capping - BG timers and such. Also used for Wintergrasp timer (right below minimap).
Buttonfacade - Rownd buttonz R teh shizzle. No really, my taste varies... My durids buttons are simple squares.
MSBT - Default combat text is so meh...
DBM
FuBar - Love it.
Opie - This is one often over looked addon I've fallen in love with. I use it for raid marking, DK presences, and buffs.
Talented - Awesome for storing and importing talent builds. I often experiment with different specs. Talented takes a lot of the work out of respeccing.
XLoot - Cleans up the loot interface nicely.
Quartz - No big need for casting bars on the DK, besides mounting. This was originally installed for my druid.
Omen - Yes, I hate it. No, It wasn't configured to display correctly in these screen shots. Yes, it's gone. :)

That's it. Hopefully I've not left anything out. Enjoy!

Lollypops
<VII>
Shattered Halls - Horde (US)

Thank you for the e-mail Lollypops! There are a few things to quickly note about Lollypops' UI that stand out to me as great decisions. First, the color scheme is uniform throughout the addons, giving the entire package a more streamlined and simple feel. Too many colors all over the place can distract the eye and leave you struggling to adjust to different color texts over various background colors. Second, target and player frames are contained within the red kgPanels boxes, keeping them contained rather than free-floating, causing clutter. Third, and probably most importantly, is the way raid content is dealt with. Pushing a vertical bar off to the side shows enough status for Lollypops to get a good understanding of the situation, including health and player name. Obviously not too healer friendly, but if you're like me, you've never had a good experience with a death knight healer.

Color Matching

Lollypops knows the value of having colors uniform -- less distraction, better overall feel and a sense of cleanliness that comes with a color-matched user interface. Doesn't having your colors match on a custom user interface just look neater? Color matching takes a bit of guess work to get perfect, but the results can be beautiful, especially if you put the time into making some decent color matches. Many addons use a default color picker to choose colors -- these tips are for the color picker in general, not one specific addon.

Here are a few color picker tips for color matching your user interface like Lollypops'. First, note the location of the two white markers on the lightness/darkness slider. Keeping this uniform can help when you have the right color, but are unable to find the right shade. Second, make the biggest panel or background the color you want work first, and then move on to the smaller addons. This gives you a bigger sample to work with, as well as get an overall feel for how the color will look across all addons. Third, try to pick a color on the outside of the color picker. Noting this location will be a lot easier than inside the wheel where things can get harder to pinpoint, and you can always change the gradient and opacity. Finally, note the opacity bar's location. Keeping this uniform will give you a much nicer color across all addons.
Limit Yourself

Lollypops' user interface features awesome placement of the target and player frames. This is pretty subjective, as most of what I write about in this column usually is, but the placement of bars and frames inside of a kgPanels window is usually a good decision. kgPanels is an amazing tool which has a much more in-depth write-up coming soon, but for now, know how powerful it is to create virtual spaces to store your user interface. Use kgPanels as a guide and a limiter -- do not allow yourself to get carried away with space usage by creating the kgPanel for your bars and frames, and design into that.

Raid Schmaid

Raid information display is a pain in the butt, especially in WoW, with the amount of information needed to be digested. Fortunately, as a DPS or tank, that information can be much easier to deal with than as a healer. DPS, and possibly a tank, can get away with a setup like Lollypops'. If your goal is saving space on the screen, having the columns of raid group information helps greatly. I do something similar on my user interface with beneficial buffs scaled down to a smaller size using Elkanos. I like the target frame in the center in theory, and the explanation for its use is inspired, but it is a little big for my personal tastes. It does, however, provide a good focal point for other addons to orbit around that center area for a bit of symmetry.

All in all, I think Lollypops' setup is really nice. Color coordination can go a long way to a healthy and happy user interface. Picking a color is hard, but getting that perfect shade can really make everything look that much smoother. Hopefully Lollypops' user interface has given you some great ideas, so get modifying!

Here's a BONUS TOPIC for you guys who love to comment -- square buttons or round buttons? Personally, I'm a fan of square buttons. I don't hate the round buttons, but I have always been a fan of straight edges that line up neatly. Circles scare me. Voice your opinions in the comments -- what do you think?

---

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.

---

Tags: add-on, add-on-configuration, add-on-examples, add-on-guide, addon-configuration, addon-examples, addon-guide, addons, color, color-match, color-matching, death-knight, dps, featured, guide, kgpanels, lollypop, lollypops, match, raid, tank, ui, ui-configuration, ui-guide, user-interface, user-interface-guide, wow-add-on, wow-add-on-guide, wow-add-ons, wow-addon-guide, wow-addons, wow-guide, wow-ui-configuration

Filed under: Add-Ons, Reader UI of the Week