Ideas for a UI facelift

Contribute art for mainline Wesnoth.

Moderators: Forum Moderators, Developers

Forum rules
Before posting critique in this forum, you must read the following thread:
Post Reply
User avatar
kitty
Retired Portrait Director
Posts: 1290
Joined: January 2nd, 2008, 3:29 pm

Re: Ideas for a UI facelift

Post by kitty » March 27th, 2009, 8:42 pm

doesn't make me think of waffles at all...

and i like the new distinction between normal and hover button status - will there be a pressed status, too? only thing about the buttons is the asymmetrical border (which i like), i think if you use such an asymmetrical element here it needs to be present elsewhere in the ui, too. just to keep things together.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 27th, 2009, 9:12 pm

kitty wrote:will there be a pressed status, too?
Yes, absolutely. It will be some variation or other on the hover state.
kitty wrote:only thing about the buttons is the asymmetrical border (which i like), i think if you use such an asymmetrical element here it needs to be present elsewhere in the ui, too. just to keep things together.
I was planning on that, actually. Not sure where, but I'm sure there will be a lot of oppurtunities to weave in little visual themes like that.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 29th, 2009, 2:00 pm

Did some more work on the window frames. I think this is a better approach, as the center parts of the frame can easily be tiled if needed.

I noted that there's a certain risk involved in doing stuff like this: adding too much detail. I'm trying to find a balance between clear and pretty but it's also too easy adding more and more and more little decorations. If you feel that it's starting to look too busy and cluttered, just tell me to stop :)
Attachments
ui-mockup7.png
ui-mockup7.png (156.68 KiB) Viewed 4640 times

User avatar
zookeeper
WML Wizard
Posts: 9740
Joined: September 11th, 2004, 10:40 pm
Location: Finland

Re: Ideas for a UI facelift

Post by zookeeper » March 29th, 2009, 2:26 pm

Looks really nice, but those kind of decorations set quite a large minimum size for the dialogs/windows (or alternatively you'd have to come up with a more complicated scheme of avoiding the corners getting cut off in smaller dialogs/windows). Dialogs such as the "game has been saved" and "you have been defeated" ones are really small, at least vertically.

I'm not sure how complicated a workaround would be. Basically a good method would be to provide two sets of corner images, normal and small, and have the engine semi-automatically use the small ones if the dialog/window is too small to accomodate the normal sized ones.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 29th, 2009, 2:46 pm

zookeeper wrote:Dialogs such as the "game has been saved" and "you have been defeated" ones are really small, at least vertically.
/me smacks forehead

You're right. I'm an idiot, I didn't think about that.
zookeeper wrote:Basically a good method would be to provide two sets of corner images, normal and small, and have the engine semi-automatically use the small ones if the dialog/window is too small to accomodate the normal sized ones.
Yeah, that is probably the best way. Making a smaller frame is no problem at all. In fact, why not have two separate sets; one for 'real' windows (like... preferences, campaign selection, combat etc) and a more basic one for dialog boxes? This assumes that the engine will differentiate between the two types of course.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 29th, 2009, 9:20 pm

Standard window frame + smaller version for dialogs/notices.
Attachments
ui-mockup8.png

User avatar
xtifr
Posts: 414
Joined: February 10th, 2005, 2:52 am
Location: Sol III

Re: Ideas for a UI facelift

Post by xtifr » March 29th, 2009, 9:33 pm

West wrote:Standard window frame + smaller version for dialogs/notices.
If that doesn't work for technical reasons or something, maybe you could try one combining the shorter height with the longer width.
"When a man is tired of Ankh-Morpork, he is tired of ankle-deep slurry" -- Catroaster

Legal, free live music: Surf Coasters at Double Down Saloon, Las Vegas on 2005-03-06. Tight, high-energy Japanese Surf-Rock.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 29th, 2009, 9:39 pm

xtifr wrote:If that doesn't work for technical reasons or something, maybe you could try one combining the shorter height with the longer width.
I did try that but it didn't look any good IMO; I would really like to keep the corners symmetrical. Having separate graphics should work though, or so I've been told.

Yay, post # 800! :)

User avatar
kitty
Retired Portrait Director
Posts: 1290
Joined: January 2nd, 2008, 3:29 pm

Re: Ideas for a UI facelift

Post by kitty » March 29th, 2009, 9:53 pm

nice! i really hope that this will be possible.

not a real crit, but personally i find the right version way too see-through, i find that kind of dialogue horribly distracting when trying to read something or get any info quickly.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 29th, 2009, 10:26 pm

kitty wrote:not a real crit, but personally i find the right version way too see-through, i find that kind of dialogue horribly distracting when trying to read something or get any info quickly.
Well, the transparency was just added as an afterthought to indicate that the smaller windows should be transparent; the opacity can easily be changed (and I'm not sure transparency is handled by the images at all).

I also dislike transparent windows, because to keep text intelligible and things not looking messy you need to keep the opacity so high there's really no point in having transparency at all. Also, transparent windows are so utterly done to death what with the Vista Aero look and all, but as the current skin has transparency I think we should stick with it for consistency's sake if nothing else. I also realize that I'm part of the minority who doesn't think transparency looks cool; most people do like it.

User avatar
Jetrel
Art Director
Posts: 7242
Joined: February 23rd, 2004, 3:36 am
Location: Midwest US

Re: Ideas for a UI facelift

Post by Jetrel » March 29th, 2009, 11:47 pm

West wrote:I also dislike transparent windows, because to keep text intelligible and things not looking messy you need to keep the opacity so high there's really no point in having transparency at all.
To keep the text intelligible, you need to have a certain "large difference in luminosity" between the text and the background (at least 50 on a scale from 0->100, preferably more like 75). But also, you need the background to not have "high frequency" changes in luminosity. That's where the blurring comes in. Our eyes are keyed on recognizing edges, and blurring the background means that there are no edges in the background.

So, it's not just opacity. You're definitely right that if you don't do the blurring, you need to be about 90-95% opaque, and at that point there's almost no point in bothering with transparency.
West wrote:Also, transparent windows are so utterly done to death what with the Vista Aero look and all, but as the current skin has transparency I think we should stick with it for consistency's sake if nothing else. I also realize that I'm part of the minority who doesn't think transparency looks cool; most people do like it.
I like transparency, partly because it has the functional benefit of still allowing you to get the general gist of what's behind something. It's not just "sparkle", it's actually a functional addition to a UI.

It's much like (very quick) animation effects when you minimize a window - it's not just a flashy animation, it shows you where it went (versus insta-minimizing where you find yourself wondering "[censored] - which taskbar button did that minimize to?", and then have to hunt around for it to find it. Not an issue when you have 3-4 taskbar buttons present, becomes a serious issue when you have more than 20 (which is normal for me when I'm working on windows)).
Play Frogatto & Friends - a finished, open-source adventure game!

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 30th, 2009, 12:11 am

Jetryl wrote:But also, you need the background to not have "high frequency" changes in luminosity. That's where the blurring comes in. Our eyes are keyed on recognizing edges, and blurring the background means that there are no edges in the background.
Aha, that's interesting! I've never thought about that aspect, I always thought blurred transparency was just some sort of gimmick. And in Vista I guess it is a gimmick; it's only the window borders that are transparent IIRC, i.e. such a small part of a window that there's no real benefit from it being transparent in the first place -- as always, you can trust MS never to get anything really right :D
Jetryl wrote:I like transparency, partly because it has the functional benefit of still allowing you to get the general gist of what's behind something. It's not just "sparkle", it's actually a functional addition to a UI.
I dunno, over the years I've tried several different apps that let you make windows transparent and TBH I just find it annoying. Especially if we're talking about windows with text in them. But I guess I'm old. Or a traditionalist. Or both...

IOW, it's a question of preference really. I've never been able to 'get' transparency unless used tastefully and just for decorative purposes, but like I said, I know lots of people like it and I'm not saying they're wrong.

User avatar
Sgt. Groovy
Art Contributor
Posts: 1471
Joined: May 22nd, 2006, 9:15 pm
Location: Helsinki

Re: Ideas for a UI facelift

Post by Sgt. Groovy » March 30th, 2009, 6:49 am

I would vote against window transparency in this instance. It's the "hi tech" feel of it that rubs me the wrong way, it clashes with the quasi-medieval ornamentation and materials of the theme (unless it is made to look like stained glass, with rippled distortions to account for the uneveness of antique glass, but that might be overkill).

There is the benefit Jetryl mentions, but then again, the game is freezed during dialogs and menus, so it's not like the player needs to see what's under the windows.
Tiedäthän kuinka pelataan.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.

User avatar
West
Retired Lord of Music
Posts: 1173
Joined: October 30th, 2006, 7:24 am
Location: In the philotic connections between ansibles.
Contact:

Re: Ideas for a UI facelift

Post by West » March 30th, 2009, 2:59 pm

Just for fun...

I haven't checked for browser compatibility, but it should work in FF3.

Edit: added the smaller version of the window frame as well. The transparency is borked in a spot places due to bad planning when cutting the images, but, meh.

User avatar
Turuk
Sithslayer
Posts: 5283
Joined: February 28th, 2007, 8:58 pm
Contact:

Re: Ideas for a UI facelift

Post by Turuk » March 30th, 2009, 3:04 pm

That is an... interesting effect that takes place when you resize where the extra length seems to come from a small square in the lower right corner.
Mainline Maintainer: AOI, DM, NR, TB and THoT.
UMC Maintainer: Forward They Cried, A Few Logs, A Few More Logs, Start of the War, and Battle Against Time

Post Reply