Latest in Gaming

Image credit:

Reader UI of the Week: Another beautiful submission from Vhei


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, and follow Mathew on Twitter.

When I first made Vhei's UI a selected reader submission for the column way back in December 2010, I had no idea how much clamor there would be for the design and artwork. Vhei's stuff is amazing, as you can see from the previous entry. When Vhei's name graced my inbox yet again, I was filled with all sorts of amazement and wonderment. What could possibly be in store for me this time? Vhei's trademark is streamlined, simple custom art, and the potential that seeped out of every one of the email's pores was like a fog.

Lo and behold, it's another beautiful UI from Vhei. Things are a little bit bigger this time around, especially in the target and player frames, but the entirety of the setup is just flat-out pretty. Everything fits nicely on top of the custom art panels; the player/target frames have some awesome-looking bars; and seeing this beauty on a beautiful monitor would even make the die-hard anti-UI player wish for something a little special, like what we've got here.

Vhei's UI -- Custom art, kgPanels, DPS, warrior

Take it away, Vhei:

Greetings, Mat!

Vhei of Dentarg-US here again! So I just resubbed to WoW again and I figured what better way to accent the the cessation of the hiatus than a new UI? So I started working on this 2 days ago in photoshop and I spent the next day in WoW getting it set up and copacetic with Pitbull Unit Frames 4. I wanted a UI that really made me immerse with the established WoW Theme and to me that was the recurring theme you see on the armory - grungy orange brown. So I took that color palate and used it to design my theme you see before you. I wanted to keep everything to the bottom and top so my eyes down get distracted or the screen is not too busy. Screen real estate is not an issue for me because I play on 1920x1080. The mods I used to make this UI possible are:

Titan Panel - Of course, the databroker you see at the top. As you might notice, I went lite on the SLData Text this time because I wanted to keep all my information in one place.

SLData Text - I used this to add the Attack Power, Critical and Hit on my HUD without having to check my character pane. I also added in the MailCheck compononent so I can easily see when I do and do not have mail. I could have shoved this on the TitanPanel bar but I was running out of room and I wanted to make it easier to find as I lurk the AH a lot and post and bid a lot, ergo, I check my mailbox quite frequently. Subsequently, I designed the background art so I can easily remove it should I ever wish to or replace the text with out components.

Docs Name Plates - This NamePlate addon makes it a lot easier to read names on the screen because it does something the default nameplate does not: Add shadows for contrast.

PRAT - My standard chat addon modified to fit my theme.

KGpanels - The piece de resistance of my UI. I used this to all the custom artwork.

PitBull UnitFrame 4 - My UnitFrames addon. I had to shove this on the background strata so to get it to look the way I want, I thought the 3D models were a nice touch.

BarTender 4 - This was used to to replace the default hotkey bar

ButtonFacade - This addon allowed me to add the orange/silver borders to the buttons

SexyMap - This addon allowed me to configure my map and make it square. The border was added via KGPanels.

QuestGuru Tracker - I use this in lieu of the default simply because of the flexibility and I can easily switch between tracked Quests and tracked achievements.

Skada - My damage meter addon. I have it configured so Skada appears during parties or raids and QuestGuru Tracker while I am solo.

TipTac - This addon allowed me to configure my tooltip to more aesthetically fit the theme.

What I really like about this design was overall color and the way I pulled off the Player/Target/TT unit frames. This required intricate use of z-indexing and strata levels becuase SexyMap had its own level, as did my 4 KGpanel textures and Target Unitframe and TT unit frame. As you might imagine, it can be confusing. Add in scripting and you got yourself an even bigger mess. I have my TT texture only appear when my target is targeting someone. This required the use of the OnEvent script. Also, I left my party frame rather plain because I didn't want it to attract my attention too much. I designed this UI only for myself since I barely play alts and everything you see here is meant for a DPS fury warrior and as a dps warrior, I don't really worry about the numbers of my fellow dungeon crawlers that much so I kept the set up bare. The red rectangle around a unitframe denotes who has aggro. I am not really sure what else to say about this piece but I do know I will be using it for a long time.

Please note, I will NOT be releasing this UI. The only person I would give this to is kagaro, the creator of KGpanels. The reason for this is because I released my last two UIs to the public but I would like to keep this private for myself. Hope you enjoyed it!

Vhei (Dentarg-US)
Thanks for sharing the newest creation with us, Vhei. The whole ordeal looks like it was worth it, though, as the scripting and custom artwork (especially on the player and target frames) look gorgeous. Maybe it's just the angled bars, but the whole UI seeps cool little features like that that hit the right parts of my brain.

Vhei's UI -- Dungeon

Rather than extrapolate basic UI lessons out of Vhei's newest creation, I wanted to talk about the complexity of UI building and design. UIs do not have to be complex monstrosities like Vhei's here -- not a monstrosity in terms of how it looks, mind you, but the back end for something as customized and tinkered with as Vhei's current setup is, in a word, complex. It's like looking behind your entertainment center and seeing all of the jumbled wires, with no real, discernible way to figure out what goes where unless you took the early initiative to label everything and start with categorization in mind. Do we still do that, or is this whole simile a long-past '90s reference?

Complexity isn't a bad word in UI design, because the real focus is on player experience. In order for Vhei's UI to do otherwise simple tasks, there is the potential for a lot of back end work because of the way the WoW UI works. It's not impossible but potentially impractical. Or not. It all depends on how happy you are with tinkering under the hood.

So how can you learn and understand how complexity can help or hurt a UI during its creation process? Well, look at Vhei's UI and take away from it what we can in terms of layout and design. It all looks fairly standard for a functional, useful user interface. Stance bars and minimaps all appear alongside the familiar addon faces that we've grown to know and love. There really isn't anything here on the surface that is different from the UI that you and I use on a daily basis. What about it, then, is so compelling? Is it the art? Is it the placement? I still think it's those damned angled bars.

Just sort of staring

I know, I know. It's just ... I like this, so I'm staring. Kind of like a guy at an art gallery, just shifting weight, squinting eyes, figuring out just what makes this nice. The custom art is great, sure, but there's something more. Is it the precision placement of the addons, understanding how much of a pain in the butt precision placement can be? That's part of it. How about the color scheme? I already know Vhei likes these colors because of his older work. The last Vhei UI was more "hip dashboard," whereas this new offering is more of a rusted slab -- more WoW-inspired, I would say.

The takeaway in terms of aesthetics on this one is the use of blank space. There is a lot of art here and relatively very little addon clogging up the texture. While I don't think I am enamored with the full body portraits in the target and player windows, it still looks about as good as you're going to get from that type of setup. Vhei's setup almost looks like SpartanUI done correctly, as opposed to a massive amount of UI art elements piled on top of each other.

Vhei's UI -- Annotated
Nothing says love like ...

Dedication is the art of saying "I love you" to your hobby. Maybe that's why I like Vhei's setup so much -- it screams dedication. There is so much information packed into the top bar that you barely need any addons for most of what you would otherwise clog up your UI with. The bottom bar is impeccable, at least in my own understanding of the way I like my bottom bar to be arranged. Even the party setup, in its simplicity, is perfectly fine for a DPS warrior. Look at how the Skada area of the UI shares space with the questing modules. It's all planned, thought out, and executed. This, my friends, is awesome.

Vhei, I'd love to talk to you about your design aesthetics and all that fun stuff that goes with building cool interfaces like this one. I'm sure the readership would like to hear more about what you have to say. Hopefully we can do that soon. Until then, readers --marvel, gawk, ask where you can get it (sorry, you can't), and use this setup as aspirations and ideas for your own setup.

See you guys next week.

Gallery: Reader UI of the Week gallery | 267 Photos

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.

From around the web

ear iconeye icontext filevr