Skip to content

How I make my UIs

April 26, 2010

It’s mostly down to theft, and crunching other people’s ideas to fit my needs. Now that that’s out of the way, I thought it’d be interesting to blog about. First thing’s first, I browse the amazing thread on MMO champion, kept very clean and tidy, which showcases several hundred UIs and is constantly being updated. I pick several UIs, normally 4-5 that have a lot of things that I like. I don’t always find ones I like fast, this process can take a long time. Then, I use photoshop to cut out the components of the UI that I like, and assemble them like a collage. If there’s anything I think works in none of them, or I’m totally happy with in my own, I’ll copy that from my old UI. So I chop it all up, slap it together, and try and make it look realistic. Then I put it fullscreen, and imagine raiding with it. I hotkey a lot of my abilities and rotations, but I keep all the main spells on my bars anyway to see if I get locked out of any of them, etc.

Right, so, instead of just talking about it, I went and did one! I designed this with the intention of a decent UI for raiding as a ranged, petless dps. (Something I’d like to do in cata.) I could tweak it fairly easily to include pets. This is the first draft, the Frankenstein monster of a UI, cobbled together from everywhere else.

Draft number one

Now, this doesn’t make sense, obviously. There are parts from Hunter UI’s there, and paladins, and all sorts. But it’s a start. I don’t mind having a block down the bottom, as long as its not massively dominating. I also have a feck-off massive screen, so I can fit more in. I’m limited in several ways when I’m designing a UI. I can’t have anything too small, because although I wear classes to correct my eyesight, I’ve found I tend to subconciously lean in to read in anything smaller than about 10pt, which plays merry havoc with my back. I also keep everything close together, because I get disorientated flicking between different places, so I try to keep everything intuitively placed so I can slide from one to the other. With that in mind, unitframes are all in a block, chats are nearby each other without being crunched, Deus Vox is nice and close, and everything else slots in nicely. Please ignore the hideously bad job of patching over what was already in the background.

Now, I have a decent knowledge of how to actually put this together. It would take me about 2 hours max, but it’s doable. For those that don’t, here’s a lovely list of UI-related tutorials guides. If you do, a mock up is good first. If you don’t mind big patches of white in the background, you could put this together in MS paint. I just like to have it as realistic as possible. As a warning however, if you already run a lot of addons, no matter how thoroughly you seperate everything out into new profiles or whatever, there will be some overspill into your old things, and you could swap back after a time of editing to find the UI that worked… doesn’t anymore. So be cautious.

Generally when putting a UI together, you want to go for some standard, reliable addons to build it with. I’m gonna list what I use, because I have no clue what the competition is like, only that I know mine work! These are what I would consider useful when putting together your own shiny UI.

  • Bartender: Highly customizable bar addon, up to 10 bars to move and resize and reorder how you like.
  • Buttonfacade: Makes those buttons look how you like in terms of skinning and shiny.
  • Deus Vox Encounters/ Deadly boss mods: Vital for raiding, tells you what’s going on and if you’re in shit. Both work very well, I’m split on this. I slightly prefer Deus Vox because it comes with awesome bosses and smooth skins, but DBM is reliable and comes with a fight timer save and an auto responding function.
  • Forte Xorcist: Lovely lovely addon for telling you what short buffs/debuffs you have on your target, such as resto HoTs/ affliction DoTs, displayed in bar format. It’s what I have above the unit frames in the pic. Also has a cooldown timer which I love, has icons of spells with 0-120 second cooldowns going by and flashing when they are free to use again.
  • Pitbull 4: Unitframes. Most reliable and customizable unitframes I’ve come across. Love em.
  • Prat: Chat mod, allows utter customization of the chatbox.
  • WIM: Not vital, but transfers whispers to a seperate box for easy management. Although I’m not fond of it in a design sense, it’s vital for managing the many whisper convo’s I seem to have.
  • Satrina Buff Frames: I’d argue that this is vital. You can arrange your buffs and debuffs how you like with this, filter them, black and whitelist them, have them stack or grow in any direction, etc etc etc. Also comes with the nifty function of telling you who cast what buff (so get this and no more bitching that I’m the paladin who forgot to buff because TRUST ME IT NEVER WILL BE)
  • Recount: You know this. Everyone has this.
  • Chinchilla: Not vital, but good for positioning the minimap and getting it to do what you want.
  • Kgpanels: Allows you to put art and boxes around whatever you like. Good for making a UI look slick with very little power taken.
  • SLDT: God knows what it stands for, but this is great for displaying helpful texts about wealth, durability, coords, etc.
  • Mik scrolling battle text: Some hate it, I love it. Helps me a lot to see what my damage/healing out is and see when I crit with holy shock, for example. If you know your class well, you can watch for the icons you know mean this spell can now be used, etc.
  • Arkinventory: Not shown all the time, but my goodness it does a good job with bags. You can set it up to sort out anything into different compartments.

I will implement the shown UI draft properly at some point, when I have a spare afternoon, but that’s not likely any time soon (a lot of work at the moment.) You’ll see it eventually however. Certainly for Cataclysm. I’ll link back to this post when I do, or if I come up with a better draft. Hope this little guide has helped you rough some UI ideas out. Even if you’re not in the habit of designing ones yourself, I recommend browsing the UIs thread just for ideas and downloadable UI packages that you might prefer over your current setup.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: