Quantcast Looking for layout/design feedback! - WoWInterface
Thread Tools Display Modes
03-30-16, 07:40 AM   #1
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Looking for layout/design feedback!

Hey folks!

So this is a project I have been just about obsessing over the past 2-3 weeks. I mean, hell, it's hard to put it away sometimes. But it's awesome, I've so far managed to create player/target frames (working on the target of target and pet frames), and a bottom bar arrangement that uses the default interface options to show/hide frames. It's pretty great!


Layout with no target and one extra action bar showing.


Both bottom action bars visible.


Full layout with class resources and all, on a death knight.


Smallest compact layout of the bottom frame, showing both XP and reputation bars.


So here's what I'd like some feedback on.

Aside from the design as a whole (for which I'd love to hear what people think!), I just can't make up my mind about the main action bar. I wound up making it larger than the other action bars, and the texture came out looking a bit different when I made it. Now, I want it to be as high up as it is; when I play I like to keep my eyes on the action, and having to look all the way down to the bottom of the screen to double-check cooldowns, stacks, situational spells and so forth, it just feels distracting. So I wanted to keep the things that I look at the most within glancing distance, or in clear peripheral vision when looking at the character, so that my eyes can be on the action and not on healthbars or cooldown counts.

Of course, the plan is to build it so that everything is hidden, and then show the unit frames when targetting and all of it while in combat. ( And by "everything" I mean the things around the character. The bottom action bars would stay visible. )

But that daaaamn main action bar. I just can't decide. Is it big enough? Is it too big? Is it too long and would 2x6 be a better option? Does it look good as it is or should I change the edges to match the bottom bar? Maybe it's the shift from jagged curves and points to twined metal that just looks odd.

Last edited by Folji : 03-30-16 at 01:10 PM.
  Reply With Quote
03-30-16, 01:13 PM   #2
d87
A Flamescale Wyrmkin
 
d87's Avatar
AddOn Author - Click to view addons
Join Date: Jan 2006
Posts: 133
I like the layout and unit frames, except the portrait background. I don't even know why, just seems like it's from another game, maybe change ring color from golden.
Action bars textures are also alright, tho a bit flat.

Regarding main action bar, it's obviously up to you, but i'd say you do what you gotta do to make it functional in combat and then worry if it's pretty. People use WeakAuras and all that stuff to make important things more accessible.

but for example I use this separate 2x4 vertical combat-only bar next to target frame for situational short-medium cooldowns (6-60s), and buttons fade when the spell is on cooldown.
[Screenshot]
Maybe that's relevant...
  Reply With Quote
03-30-16, 02:25 PM   #3
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Hey that is actually true! Heh. I've honestly gone somewhat blind to the notion that players usually sort out some kind of heads-up system themselves, focused as I have been on trying to narrow the focus area of the UI. Still, I have a positively awful habit for flaky-eyeing the action bars myself, when it comes to regular spells with brief cooldowns. And having to look all the way down at the bottom for it it just feels annoying.

Really though, does the portraits feel out of place? Huh! Maybe it's the orb gloss that does it? Or the colour contrast. The colour palette is just about entirely sampled from the default UI frames; dark-brown from the main frame body, similar dark slate-blue as inset backgrounds (like the reputation frame has), and the same metallic grey edges. Maybe it's the contrast, putting dark, earthy tones against high-contrast gold, the gold rings on the default portrait frames are all less contrasted and accompanied by grey, after all.
  Reply With Quote
03-30-16, 05:01 PM   #4
JDoubleU00
A Scalebane Royal Guard
 
JDoubleU00's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 406
I like what I see. Are planning on releasing this or is it for your use only?
__________________
Author of JWExpBar and JWRepBar.
  Reply With Quote
03-30-16, 05:48 PM   #5
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Thanks! Whenever it gets close to something I could play with regularly, I'm planning to release it!

Right now it's missing ToT, pet, and focus frames, party frames aren't there, the minimap is untextured, chi points and runes are the only class resources I've done, there's no combat or threat indicators, no PvP icons, the castbar is still default, haven't done the pet actionbar yet, there's a slew of stuff! But once I've got those things down and the UI isn't lacking anything the default UI provides, I'm planning to release it as a standalone UI redesign so to speak.

In the bigger picture I'd like to offer some kind of in-game configuration to toggle various features, change the height and gap of the player/target frames, and offer different ease of life tidbits such as filtered aura watch on the unit frames, and so forth.
  Reply With Quote
03-30-16, 07:39 PM   #6
syncrow
A Flamescale Wyrmkin
 
syncrow's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2014
Posts: 149
  • I guess the unit frames would look much better with a bit smaller portraits.
  • Personally, i would prefer the first design choice, it looks more compact rather than super long actionbars (12 vs. 24)
  • The size of the main action bar is okay, but the left/right edges do not feel like fitting with the bottom bar (mostly the problem with flying bars)

The thing is, you will use the main action bar for cooldown display, but the other side you want to look at the whole bottom bar (like me, damn its super hard to not look at it, after 10 years..) So the effect is, that the action bars do not feel connected to each other, cause you use 2 different places.

like d87 said, most people use other stuff for cooldown tracking, so that it would be the best way to focus on "connected" action bars. 1x 24's layout + a 12's ontop or something like that...or make the whole bottom bar a flying element.
__________________
  Reply With Quote
03-30-16, 08:34 PM   #7
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Originally Posted by syncrow View Post
[list][*]Personally, i would prefer the first design choice, it looks more compact rather than super long actionbars (12 vs. 24)
Heheh, well, that's not so much as a design choice as it is how the bottom frame sizes itself dynamically! Actually rather happy with how that turned out, it honestly made the designer part of me incredibly giddy to see it in action the first time.



I thought at one point about a 2x12 for the bottom bars, but that'd quickly translate to a 3x12 with the main bar and that was an immediate no. It's not compact enough for that. Though speaking of compact, rescaling the action bars as a whole would probably be an idea. Smaller buttons, larger hotkeys, save some screen space that way. It does actually work though, at least personally I feel like it does; looking down to check the action bars and finding them right below the character really feels more... I don't know, direct? I can look at the character and still make out the cooldown spin, button glows, and so forth, and when I glance down at that bar I still have the character clearly in view. Which is pretty much what I wanted.

Though the individual elements could definitely be a little bit more compact. Definitely.

And shrinking the portraits a bit? You've... proooooobably got a point there actually, heh! Can't remember if they used to be bigger or smaller in all the iterations of that texture, but they probably do look a bit end-heavy. They could be smaller, so they don't claim tons of space.
  Reply With Quote
03-31-16, 10:02 AM   #8
JDoubleU00
A Scalebane Royal Guard
 
JDoubleU00's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 406
I forgot to mention in my previous post that I like what you have done with the XP/Rep bars. I've looked for something like that and even tried to code it, but no luck. What happens when you don't display the XP bar?
__________________
Author of JWExpBar and JWRepBar.
  Reply With Quote
03-31-16, 10:33 AM   #9
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Originally Posted by rocnroll View Post
I forgot to mention in my previous post that I like what you have done with the XP/Rep bars. I've looked for something like that and even tried to code it, but no luck. What happens when you don't display the XP bar?
Well, right now it checks for the current max level to figure whether to show the XP bar. Not sure how that goes for XP locked character, but I got a hunch they'd just... keep the XP bar showing? But essentially, I have a holder bar in which the XP and Rep bars take up 50/50 of space. If only one shows, it takes up the entire length of the bar. And if neither of them are visible, the bar is collapsed.
  Reply With Quote
03-31-16, 11:55 AM   #10
MunkDev
A Scalebane Royal Guard
 
MunkDev's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2015
Posts: 424
You might want to have a look at replacing the experience bar with the artifact and/or honor tracker at max level, since it'll likely take you a while to get the UI ready. Might as well prepare it for Legion by looking at some of the source code from alpha/beta.

Visually speaking, I think what you've got so far looks very good, apart from the art at the edges of the frame(s). While your buttons, status bars and backdrops are of high quality, the end caps look a bit blurry at the edges and lack the sharp outline that seems to permeate the rest of your art. I understand if you're going for a more rugged look, but my opinion is that you'd be better off with either knife-sharp outlines or increasing the amount of ruggedness.
__________________

Last edited by MunkDev : 03-31-16 at 12:07 PM.
  Reply With Quote
03-31-16, 12:24 PM   #11
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Actually didn't know there was going to be an artifact tracker thing, thanks! That's definitely a good idea yeah, turning the action bar into a status tracker.

I'm still working on the textures, adjusting things, the only annoying part about it is that trying to do high resolution textures when the textures have to be a power of two in size, it takes some trial and error to export the texture at a dimension where it looks crisp and detailed without getting downsizing artifacts. Thanks, I was thinking for a while that the edge caps looked a bit blurry, then I just got used to seeing them like that!
  Reply With Quote
03-31-16, 02:10 PM   #12
MunkDev
A Scalebane Royal Guard
 
MunkDev's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2015
Posts: 424
You don't have to do that. You can just use the native texture resolution that you have and then choose the power of 2 above that if it doesn't fit. Use Texture:SetTexCoord(...) to crop the texture in-game instead. If you haven't noticed, a lot of Blizzard textures are comprised of multiple small textures mashed together in one big file. They then use texture coordinates to crop out individual parts.

Calculating the fractions on texture coordinates is a fairly simple formula:

Texture:SetTexCoord(left, right, top, bottom)
  • left - Left (or minX) edge of the scaled/cropped image, as a fraction of the image's width from the left (number)
  • right - Right (or maxX) edge of the scaled/cropped image, as a fraction of the image's width from the left (number)
  • top - Top (or minY) edge of the scaled/cropped image, as a fraction of the image's height from the top (number)
  • bottom - Bottom (or maxY) edge of the scaled/cropped image, as a fraction of the image's height from the top (number)
Lua Code:
  1. Texture:SetTexCoord(pxLeftFromLeftEdge / texWidth, pxRightFromLeftEdge / texWidth, pxTopFromTopEdge / texHeight, pxBottomFromTopEdge / texheight)

As an example, you can do this:
Lua Code:
  1. -- Default
  2. Texture:SetTexCoord(0, 1, 0, 1)
  3.  
  4. -- Horizontal flip
  5. Texture:SetTexCoord(1, 0, 0, 1)
  6.  
  7. -- Vertical flip
  8. Texture:SetTexCoord(0, 1, 1, 0)
  9.  
  10. -- Crop 25% from the left side
  11. Texture:SetTexCoord(0.25, 1, 0, 1)
  12.  
  13. -- Crop 25% from the right side
  14. Texture:SetTexCoord(0, 0.75, 0, 1)

Here's how you can use photoshop's reference point (the 9-piece grid) to find the coordinates with relative ease:


There's also a longer version of Texture:SetTexCoord(...) that allows you to specify all four corners of the texture. You can think of that approach as holding up a towel and grabbing at different points on it to let the unwanted part fold away, but that's not necessary if you're not cropping + rotating at the same time.
__________________

Last edited by MunkDev : 03-31-16 at 02:22 PM.
  Reply With Quote
03-31-16, 02:27 PM   #13
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Oh, yeah, I know how to work with the texture coords! Thanks though!
  Reply With Quote
04-01-16, 01:12 AM   #14
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,731
Well done! It is always nice to see a fresh face trying to bring his own ideas to life in WoW. I really like how the unitframes turned out.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW) | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)
  Reply With Quote
04-01-16, 07:37 AM   #15
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Thanks a lot!

Also, thanks for the feedback so far, people! Redesigned the main action bar backdrop today, and I think it turned out pretty okay.



Also wound up making the buttons smaller in general. Think I'll scale up the hotkeys a bit now, though.
  Reply With Quote
04-01-16, 09:12 AM   #16
Yukyuk
A Flamescale Wyrmkin
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 142
So far I like what I see.

Wish I had only a tenth of your skill as a designer
(then I could finally make seethrough "glass" lens).
__________________
Better to fail then never have tried at all.
  Reply With Quote
04-04-16, 08:30 AM   #17
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Been experimenting with party frames lately. They used to be the Pet / Target of Target frames, but they felt a bit clunky for that end. So I scaled them up, tried to see how they'd work as party frames, and it kinda seems alright?



Gonna try and go for a more compact "just a healthbar" setup for the Pet and ToT. Something that anchors underneath the player and target portraits.

Also been working on the minimap. It's not entirely there, but it's getting there. Needs more decor, and rugged notch-marks and all that typical Warcraft stuff! Seriously. Warcraft design is like, cold metal, muted gold, and gritty off-brown dark tones, and lots of notchmarks like someone hacked the UI up.
  Reply With Quote
04-04-16, 09:51 AM   #18
Folji
A Flamescale Wyrmkin
 
Folji's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2009
Posts: 136
Also, stupid activation glow on the action buttons is blocking the hotkeys, but I can't really figure what I need to grab hold of to scale it up. Or if there's any sensible solution to get the hotkey on top, considering how it's a child frame of the button, and the glow is a level above the button itself.
  Reply With Quote
04-04-16, 10:08 AM   #19
myrroddin
A Molten Giant
 
myrroddin's Avatar
AddOn Author - Click to view addons
Join Date: Oct 2008
Posts: 995
Originally Posted by Folji View Post
Also, stupid activation glow on the action buttons is blocking the hotkeys, but I can't really figure what I need to grab hold of to scale it up. Or if there's any sensible solution to get the hotkey on top, considering how it's a child frame of the button, and the glow is a level above the button itself.
I haven't checked if you are using libraries or not; however, you could either straight up use LibButtonGlow-1.0 or scope out its code and see if any of it helps you.
  Reply With Quote
04-04-16, 04:34 PM   #20
MiRai
A Warpwood Thunder Caller
Join Date: Jul 2011
Posts: 96
Originally Posted by Folji View Post
Also, stupid activation glow on the action buttons is blocking the hotkeys, but I can't really figure what I need to grab hold of to scale it up. Or if there's any sensible solution to get the hotkey on top, considering how it's a child frame of the button, and the glow is a level above the button itself.
I believe that this might be what you're looking for.

http://www.wowinterface.com/downloads/info22842-HigherHotKey.html

Also, I'm liking the design of the UI.
  Reply With Quote

WoWInterface » AddOns, Compilations, Macros » UI Screenshots, Feedback and Design Discussion » Looking for layout/design feedback!

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off