UI I'm working on since coming back to MoP

[Byakko]

Latest image of UI:



Updated list of (visual) addons used:

- WoW Icons - Crisp
- Bartender 4
- Masque - Diablo III
- dMinimap
- Stuf Unit Frames
- ShinyBuffs
- WeakAuras
- BasicChatMod
- Kong UIHider
- TipTac
- ChatLoot
- TinyDPS
- BagNon
- TidyPlates Threat Plates
- Cursor Castbar

The UI's aim: Something functional for WoW players with small resolution screens (mine is 1366x768). Reduce clutter, yet make things easily readable. Only tested with Monk class currently, and most definitely not ready/made for raid usage. Or healers as there's no proper buff/debuff filtration and indicators yet.

It's best used as a pure levelling UI.

It's currently a 'levelling' UI, so I haven't thought about placing raid UFs for example (prolly going with Grid for that anyway). So since I'm levelling my Monk primarily for a bit, and my resolution is pretty small and squished (1366x768), I need something to give me enough empty screen space and I keep a lot of my bindings on macros hidden on BindPad so the actionbars are probably going to be limited to the two rolls you see there. Since Monks have mostly short CD abilities, keeping most of the abilities on the bars feel cluttered so I'm limiting myself to the essentials on those two bars. Not shown: the WeakAura sets I'm still setting up for notifying about CDs and abilities. Stuf for my simple health and power bar in the middle. Energy bar is reverse fill. Stuf's Chi bar bugged out on me, but I think I'll set-up a WeakAura set to notify me about Chi anyway so that's probably how it's going to look for me. No values, I don't really need to worry about absolute numbers. Party windows shown. Not exactly as clean as I wanted. I'm new to using Stuf and I don't really have the time to properly design the skins I would like to have. So they're just messily cobbled together of what I want. They're functional though. I want them to hopefully match the clean look of ShinyBuffs on the right, because I really like the status bar for duration look on buffs instead of numbers on icons or buff bars. I don't actually have a target bar set-up. I'm using ThreatPlates and as I'm levelling/soloing on all my characters so far, I still do not need a proper target window. Once I'm doing heroics or raids or PvP again though, I have to figure out what style I want. dMinimap in the top right. If I had the screen space, I actually prefer the minimap in the center or even near eye level off to the side. But not going to happen with my laptop resolution so in the traditional top right it stays. ShinyBuffs for the buffs rows. I started really liking status bars on buffs since seeing a plugin for ElvUI (VisualAuraTimers), but couldn't find a standalone style like that till ShinyBuffs! TinyDPS bottom right because deeps. Also because of Monk's lack of long-casting abilities except Fist of Fury and later Crane Kick, I opted to use Cursor castbar, it feels it fits the class better too, and I don't need to portion out a full rectangular piece of screenspace for a castbar. I wish I knew how to skin it better, or how to have it use alternate icon art, like circle icons. Probably going to shrink it from this size, it's a little big. I still need help with the chatbox. I don't know what to do with it. It's essential, yet always feels either too small for me to see the text properly, and then too big to fit with the rest of the UI. I probably just need the perfect font for it. So yeah, any feedback would be appreciated. Hopefully discussing on other screen saving addons/methods I could use. Eventually I hope I can learn to use and have the time to set up a kgPanel set-up with clickable panels, which would solve my screenspace issue. For now I'm quite happy with how this is going so far. Addons used - Stuf - rChat - dMinimap - WeakAuras - ShinyBuffs - TinyDPS - BindPad - Bagnon - rQuestWatchFrameMover - TidyPlates Threat Plates

[Dawn]

An even smaller castbar is one that goes about 2pixel around (behind) the icon of the casted spell.

Like this


It would probably be easy to do that with a cursor castbar, too.

Just an idea.

I'd also remove the chat background, but that's personal preference, I guess. Looks nice so far, like the status bars. What about target, boss and raid frames?

[Phanx]

Originally Posted by Dawn What about target, boss and raid frames?

He explained why those aren’t there (and he doesn’t want them right now) in his post.

Originally Posted by Byakko Party windows ... Not exactly as clean as I wanted.

I’d suggest using the static 2D portraits instead of cropped 3D model portraits. 2D portraits look nicer (IMO) and are less distracting because they don't move (not sure if you can disable animation on 3D “portraits”). They also look more like icons, so they'd match better.

Originally Posted by Byakko If I had the screen space, I actually prefer the minimap in the center or even near eye level off to the side. But not going to happen with my laptop resolution so in the traditional top right it stays.

I play on a 27″ monitor at 1920×1080 resolution, and I’ve tried all kinds of locations for the minimap, and I just find that the top right works best. Maybe it’s just because I played with it there for so many years before trying other locations.

Originally Posted by Byakko I wish I knew how to skin it better, or how to have it use alternate icon art, like circle icons.

Masque has several skins that are circles, hexagons, or other non-rectangular shapes. Here are a few:

• Serenity
• Renaitre
• Gears
• Diablo III
• Trinity
• Demigod
• Abstract

Originally Posted by Byakko I still need help with the chatbox. .... too small for me to see the text properly, and then too big to fit with the rest of the UI.

Addons like Chicchai and MiniChat (both very outdated) could help with that, by minimizing the chat window until new messages arrive or your mouse over it. I'm not sure if either one still works, though.

[Dawn]

I know Phanx, but they are just used so much for PvP and PVE. So I figured some "pressure" might help.

Not going with a target frame at all might work, though. As long as the nameplates hold that information.

[Rammoth]

That UI looks fanstic! And not just a bits and pieces of it either, the whole thing looks good so far!

I know your resolution is small, but if and when you release it - I will be willing to help you get it set up for 1920x1080 and possible other screen sizes below that (since that's as large as my monitor size is).

I will be watching this thread.

[Byakko]

Thanks for all the suggestions and comments :d

@ Dawn: That style of castbar is cool, ultra minimalist! I'm going to go with the integrated cast bars for Threatplates I think, since it shrinks for some threat levels and it gets pretty small even as a full length bar.

@ Phanx: Those chat addons look like exactly what I wanted, but both look too outdated to work anymore :S None of the popular chat addons have a 'minimize' on idle feature?

This seems close to what I want: http://www.wowinterface.com/download...hatButton.html

But it looks like it doesn't give much options to modify the chat box itself (remove scroll buttons, move the editbox etc.) Wonder if it can work with something like rChat hms. Will see when I try it out later.

Also about the portraits, Stuf's 2D portraits don't seem well-cropped, or since it's based on the Blizzard default portraits, they're all circle-cropped with some black residue around the edges. 3D can't be set to static, but I think they just look overall at a better angle and fills a square box better. Too bad can't pan or scale the portraits though.

And Cursor Castbars use the default original icons with no skinning applied, unfortunately. Tried setting to a circle skin while keeping a Caith on the actionbars, doesn't change the square base icon used on the castbar. Real shame, that square in the circle is going to get to me :S

One way is I could try seeing if it's possible to substitute spell icons with WeakAuras but I doubt it...

@Rammoth: Aw, thanks for the comment! This UI isn't quite ready for use yet, maybe for a while heh.

Minor update:

I got my party frames to look prettier and kinda match ShinyBuffs!



And darker colored border:



Another quirk of Stuf. Guessing because the Party frames are linked, how the bottom power bars are skinned by the border texture choice changes depending on which Party frame it is. So the top two frames look like how I want them, but the bottom two don't, with the power bar overlaying instead of being under. I don't know how to fix this, I got lucky fiddling with frame levels and opacity to get the top two looking just right, but can't get the bottom to follow :S

Also added borders around my health and power bar, and used a flatter texture so the colors don't get too darkened.

I have an idea about how to put in a pet and a target/boss frame, but prolly get to that later.

PS: Does anyone know why my screenshots don't get saved at full resolution when I printscreen with WoW?

PS2: Oh, it's imgur being weird and downsizing my images o.0

[Baddieqt]

@Byakko

damn! that's a lovely UI.

Any chance that you will upload it for the world?

[Phanx]

At this point my only suggestion would be to work on making your alignment and spacing more consistent.

For example, the top edge of the minimap is closer to the edge of the screen than the right edge. The bottom edges of your party frames, action bars, and chat frames are all different distances from the nearest edge of the screen.

No horzontal edge in your action bars lines up with any horizontal edge in your party frames. I'd suggest lining up the bottom edges of both, and scaling up the action bars a little bit so that their top edge also lines up with the top edge of the lower party frames.

The top of your buffs doesn't line up with the top of your player/target frames or the top of TinyDPS.

Your tooltip seems randomly placed. Try anchoring it by the bottom-right corner to the top-right corner of TinyDPS.

[Byakko]

Okay attached is the latest set-up with *drumroll* Target Frame and Pet Frame (because my main's a Hunter so I have to prep to move back )

Not sure how readable they are too other people though. Pet Frame is on top of player health bar (left side), shows pet health + focus.

Target is mirrored on the right, above player power bar, and is class color coded. I might overlay enemy castbar over the power bar. Two examples targetting different classes. No debuff/buff icons for target frame, I rely on WeakAuras to detect my own debuffs and other things I look on-screen.

(I don't know where the number 30 stuck on the pet frame is from, I tried disabling everything but couldn't find why it came from...also the little loot icon below my power bar is just something I forgot to disable on the target frame)

Also trying out the Diablo III Spiked Masque skin because the square icons look boring. It looks amazing for the stance bar icon, but the default is a little dark and not fully matching for the normal bars...

Tried pure circle icons but it doesn't fit well, and I don't like pure simple circles for action buttons.

Using BasicExperienceBar for the EXPbar at screen top. And replaced rChat with BasicChatMod

Also my tooltips are attached to my cursor so that I don't have to look away from something for info. But maybe anchoring it just to the left of the quest tracker would work well too (at least for unit tooltips).

Figured out a way to get the party frames' borders to work after doing the target/pet frames (turns out just scaling down instead of setting a small height for the bars would make the borders scale down properly too), so still going to fix that.

Aaand hopefully got everything aligned nicely. I'm eyeballing with Align mostly, and nudging when I can.

Any suggestions for a good Masque skin for the actionbars? I can fallback to Caith for square style, but I'm hoping to find something a little snazzier.

New Addons used:
- BasicExperienceBar -> might change to using XPBarNone instead
- BasicChatMod
- Masque Diablo III skin

PS: Full resolution pics this time. No more silly Imgur limits <.<

[Rammoth]

Well, for starters, if you like the Caithe borders so much on the Masque skin, but rather have a rounded effect, this particular masque skin has a rounded design, while still has that color of Caithe. I would recommend it instead, since it's probably going to be what you want - since you keep wanting to go back to Caithe but want a rounded style: http://www.wowinterface.com/download...ueTrinity.html

[Byakko]

I actually kinda want the 'circle in a square' look like the Diablo III Spiked buttons, but they're too dark somehow and blend too much into each other. I might just lighten them myself to match what I want better.

[Rammoth]

Oh okay. Well, if you have Photoshop you could edit the image in there. Change it to match what you would like out of it. From what I gather, you're talking about a circle on top of a square, but the center of where the square is be transparent (gone), so that the icons in game can be stretched a bit and fit into that spot? That should be relatively easy to do. Open it in photoshop, create a square behind it, then select the area in the center of the circle, but do it with the selection tool and do it while you're on the square layer, and then "edit" and "clear", then you should be good to go.

You can make it the color you want easily too. Might also be a good idea to make the design aspect of it flat, since most of the UI is flat, it would match better. What I mean by that is take the art from it. To do that, paste an entire color over top of it, the 3D aspect of it will be gone, then it'll be flat. If you don't want it flat, then it would make more sense to update the rest of the UI to not be flat as well, by creating a 3D design to it, using the 3D section on Photoshop, but Illustrator is going to get you nicer edges on design, so I'd recommend that but not a lot of folks have it or know how to use it.


I used illustrator to help me create my icon I use here on my account. The skull viking thing. I did that. When I started it took a long time. So if you put a lot of effort into it, and you know what you're doing and have the skill set to make it what you want, then you're gonna get there. When you think you're done, sit there and stare at every aspect of the UI for about an hour or 2, while listening to music that you like - that will help you find anything you may have missed, or something that isn't just quite right. That's how I do it, I'm a designer and I went to school to learn my skill set, then I taught myself everything else. You don't have to go to school to learn that -- there are tutorials online that will help you learn how to use every feature of every software you want to learn. Good luck.

Originally Posted by Byakko I actually kinda want the 'circle in a square' look like the Diablo III Spiked buttons, but they're too dark somehow and blend too much into each other. I might just lighten them myself to match what I want better.

[Phanx]

Originally Posted by Rammoth From what I gather, you're talking about a circle on top of a square, but the center of where the square is be transparent (gone), so that the icons in game can be stretched a bit and fit into that spot?

He's talking about the rightmost panel in this image:


Also, from that screenshot, it looks like the skin includes lighter textures for the highlight layer. Before you spend time modifying the texture files, try just changing the path in the skin's Lua file to use the highlight texture for the normal layer.

[Byakko]

Yes I was an idiot and completely ignored, oh, all the color options for Masque <.<||||

Took the UI out for an actual testrun now...aaand got couple of errors that overflowed the bugsack, to the point it didn't open for me to check exactly what was causing the problem >_<

Yet I didn't experience any actual crash and all my status windows were working fine...odd.

Anyway Phanx, any opinion on the target windows being like that? I think they're kinda superficial (except maybe for the pet frame), I'm considering replacing that target frame area with a proper chi bar (that hopefully Stuf would support soon).

[Phanx]

Originally Posted by Byakko Yany opinion on the target windows being like that?

It actually took me a minute to figure out which block was the target frame... the more I look at it, the less I like the bright primary colors. They're starting to remind me of Legos:



(Though I don't think we had purple Legos when I was a kid!)

Anyway, I might go with a single bar for target health, centered:

          [ TARGET HEALTH ]
[ PLAYER HEALTH ]    [ PLAYER POWER  ]

I can't really remember the last time I cared about any power bar other than my own.

I'd also suggest adding at least a name to the target frame. In combat, having to mouse over the frame to see what you've tabbed to doesn't sound very efficient.

Do you have any kind of buff/debuff display for your target?

Your experience (?) bar at the top needs a border, or -- even better -- needs to just go away. It would probably be better to show XP as text on the info bar under your minimap, instead of latency and FPS which do not really have any actual value. If you like having quick access to them out of curiosity, put them in the clock tooltip.

Finally, your tooltip just seems really messy... I'm not sure if it's the power bar, the text on the bars, the brackets around the guild name, the faction name, the buff icons, all of the above, or what, but it doesn't feel like it fits with the rest of the ultra-simplified UI.

[Byakko]

ThreatPlates is actually pretty much sufficing to show everything about my target currently, including debuffs on the nameplate itself (it's a bit squished though, I haven't tried to edit ThreatPlate's main look yet) and a target highlight. I'm still not sure if I truly need a target frame proper anymore (except a boss target frame for instances because they're so huge the nameplate goes through the roof).

I dunno, I guess because I'm so used on my Hunter and using mouse-over macros, I value mobility and target-switching over needing to keep an eye over a single target's info.

So I might rip out both the pet/target frames and use that location for my Chi Bar in the same shape instead. Seems to fit much better (but I really wish Stuf had it now, I'm relying on 'mimicking' it with WeakAuras currently)

Debuffs/buffs for targets and myself are currently on relying on WeakAuras. I might use NeedToKnow if I want old-fashion buffbars again but I'm trying to keep the addon count to as minimum as possible. Plus I'm only monitoring my own debuffs on targets so I'm not using any major buffbar addons except ShinyBuffs to move and reskin the default buffs icons.

Tooltip, yeah I just kept the default configuration after finding the style I wanted. Not sure what to do with that, might just take out the power bar and keep the health bar, take out the buff icons on top, and probably the guild titles since I have that enabled on friendly names anyway. Not sure of the faction text, doesn't serve any purpose, but mostly I keep it because of opposing Pandas that I try to talk to at the Monk HQ only to find out they're ally Pandas >_>;;;

Also, because of super clutter from having a cursor castbar and a tooltip stuck to the cursor, I've anchored the tooltip to the top of TinyDPS.


The exp bar is just a personal thing. I can't understand exp in terms of data text so I need the bar to visualize. I wish I could hide it and have it show only on mouseover though (I switched to using XpBarNone now, and it has a border, because there was no option to skin it with a border for BEB).

[Phanx]

What about making the XP bar smaller and putting it between the minimap and infobox?

[Byakko]

I just discovered Kong UI hider works on addon frames. I always thought it only could affect the default Blizzard frames.

First screenshot, I didn't move the chatbox, TinyDPS, the QuestTracker window, so they still align like in the previous screenshots. But they are now set to hide until I mouseover them (and combat TinyDPS appears). Expbar minimized and aligned with the bottom of the minimap too. Actionbars faded out when out of combat or not moused over too.

I'm not sure whether to hide the buff icons or not, or how far to fade them out. They're also set to reappear at full alpha on mouseover.

Second screenshot, fixed the scaling on the borders of party windows. Haven't adjusted the scaling on the icons yet. Placed tooltip anchor right next to the minimap, and simplified it down.

[Phanx]

Looking better. Your party frames seem too big now, though.

[Byakko]

Party windows were enlarged to help move the scaling around, back to normal now.

Here's some shots of a target frame I'm testing out. Name, level, not sure yet how to place the health values but they are probably going to be in there. Might put int a Targets Target frame too, depending.