Update #54: Art Update - Work IS in Progress!

[Morgulon the Wise]

[code=

 

I said I wanted to post my "aesthetic" version. Here it is.

 

The buttons don't look good yet. Didn't want to draw my own. On the right side of the Portraits is a lot of lost space, but I like the background of the UI here. The lower left edge doesn't have to have a UI background there, it bares every function. But I also didn't know what to put there else. The log would seem too spacey if drawn in length. Maybe you guys know.

 

I kept with the Symbols of the menu. I think they are an important part of the charme. But a new high res look wouldn''t be bad (without changing the symbol of course)

 

I combined the "red flood" in the pictures with a blue bar on the outside. I like it more in this way although the portrait looks tainted with that red - a wonderful psychological way to represent pain. Still I don't know what that blue bar should have as function. Please don't let it be mana or such.

 

the knobs in front of the portraits are placeholder for signs which show the buffs and maluses on the character.

 

I hope someone of you like it. It's not supposed to be 100% functional.

[Rabain]

@Morgulon:  I like it.  Out of the mock ups most people have done yours feels the least intrusive on the gameplay screen.  I think the textures on the portrait borders and the menu icons could be darker but overall very nice.

 

The portraits would be a very nice size on a large monitor.

 

It would be nice if Dialogue and Combat could be dragged apart so you could display them side by side across to the screen edge.

 

Nice work.

 

edit: i say nice too many times...not nice..

Edited June 4, 2013 by Rabain

[Karkarov]

I hope someone of you like it. It's not supposed to be 100% functional.

I like the design and where you went with it artistically but in all honesty I would not want to use it as an actual game UI.  Too much dead space, I really just don't understand why so many posters think looking at a pretty but totally functionless piece of UI art is better than... I don't know... seeing the actual game screen?

 

The portraits, pause, menu, and "inventory etc" buttons are wayyyyy too big.  With a pause button that massive just throw the "options" button on the outer ring of it, or vice versa.  In fact .... at that size you could easily fit all the "main menu" buttons on the pause wheel.  Like most other mock ups you also completely ignored animal companions and didn't address how their status would be shown.  As far as the blue bar... it's a stamina meter.  Stamina is actually your primary hp in this game and the red bar being your wounds meter reflects how much more "life" you have before real death.  I think this is why they did not want to show progressive damage on the portrait since you sort of have two health bars in a way.  As an aside there is no "mana" in game from what has been released up to this point though some skills might use stamina.

 

The UI doesn't suck and appearance wise I think it is better than every other mock up in the thread, possibly better than the original too.  But it is too much design over function.  Function needs to be the key factor of a UI, and again I am really mystified why so many in the thread seem to think the opposite is true.

Edited June 4, 2013 by Karkarov

[Morgulon the Wise]

Thank you for the stamina info. I forgot about that. Still I think the "red flood" is the best way to represent the left space before death. If your stamina is at its end or your character is unconcious the portrait also could show that (thats where an animated/changed Portrait comes into play).

 

The buttons next to the log could really be arranged around the pause wheel. sounds good. lets see if I get that layers rearranged...

The size of the buttons should be conditional to the resulution. I didn't do that in full screen.

 

anything to the c-shape to the right?

Edited June 4, 2013 by Morgulon the Wise

[Karkarov]

anything to the c-shape to the right?

Personally I would resize/reposition it so that the portraits were just straight vertically arranged above the "menu" in the bottom right with no curve.  If you wanted you could still leave some curve to it for aesthetic reasons but I just don't feel like you "need" to since the portraits would already  be ovals.  The quickbar would need to be enlarged but it is fine leaving it stacked like that.  Move it maybe a bit more right so it is closer to the portraits and other wise it is okay.  Maybe do like I did in my second ui mock up and dedicate one button to weapon swap and one to skill ui for click and dragging to the quickbar.

 

Chat box just break it off everything else and move it to the center.  You could throw in a slider to make it taller or shorter for whatever the player preferred and I would still encourage the idea of fading when not in use.  As a result the bottom half the of the screen really opens up if you just take out the left art piece.

 

Add in a small sub portrait to the bottom left of the main portraits as a bit of an overlay to cover the animal companion HP/Status and you will be in good shape.

Edited June 4, 2013 by Karkarov

[Lephys]

If I could re-arrange the alphabet for the purposes of game design, I'd put U and I together.

 

In serious business, I think a minimap shouldn't be incorporated in the generic video game sense. It should probably be tailored to an RPG. Maybe what all is viewable on it and/or how far it shows is dependent upon your party's Perception/Wilderness skills, and the current lighting level, etc.. Maybe you can purchase/find maps of places, that are all ranges of accurate. Without any maps, you just see a black void until you actually discover it with your own sight range. But, some might just have landmarks and such (like in The Witcher 2, sort of), and some might be 100% accurate, but cost more or be more difficult to acquire.

 

*shrug*. Just minimap brainstorming here. Sorry. *deploys brain lightning rod*

 

Oh, and @ Morgulon... *Thumbs up*. Seriously... Even if that thing might need some functional tweaking (I'll have to mull it over in my head a bit more), I admire the aesthetic "ergonomics" of it, and the effort you put into its quality, just to post a mockup suggestion on a forum. GO YOU! ^_^

 

Sorry... rapid-edit, heh. One thing I wanted to note about Morgulon's mockup is how much it benefits from contrast, as compared to the original prototype posted in the update. I don't think the color scheme necessarily needs to be super varied or crazy (although I'm not at all against color schemes/style options/customization), but the original was a little... homogenous. It kind of looked like one big carving in a bronze slab, ya know? Not that the overall shapes/layout was terrible or anything. But, yeah, the contrast in Morgulon's DEFINITELY provides a huge benefit. Just for what it's worth.

Edited June 4, 2013 by Lephys

[LadyCrimson]

I said I wanted to post my "aesthetic" version. Here it is.

It is somewhat aesthetically pleasing because of the lesser amount of right angles. And if one is gazing at a still picture and wants such a framework around something, that's cool. But the big portraits with the huge arcing "line" of little and big gold circles etc. would distract me to no end in-game. My eyes would always be drawn to it, driving me crazy. Thus I'd have to say for gameplay, I wouldn't like it at all.

 

But then, I don't like photos/art framed in those gaudy, frilly, gold-painted or whatever art/photo frames either - I've never seen the point in those, since they seem to take attention away from the art image itself - and I apply that same perspective to game UI's. Which is not to say the original mockup Obsidian gave is as minimal as I'd personally like it, either, but it's a bit more so than some of the user mockups in the thread.

 

I definitely prefer function over form for UI's, since it's not, to me, so much a matter of having to look at it as much as having to use it dozens of times or more per hour ...

[Archmage Silver]

Hmmm. I want to play this on my 1920 x 1200 Asus ProArt monitor and on my 15" MX15 laptop.

I only buy 16:10 aspect ratio monitors, which are increasingly rare these days (currently using a 24" 1920x1200 Dell UltraSharp U2412M). It's definitely good to know that the resolution support for PE will be extensive.

[Archmage Silver]

I said I wanted to post my "aesthetic" version. Here it is.

 

It is somewhat aesthetically pleasing because of the lesser amount of right angles. And if one is gazing at a still picture and wants such a framework around something, that's cool. But the big portraits with the huge arcing "line" of little and big gold circles etc. would distract me to no end in-game. My eyes would always be drawn to it, driving me crazy. Thus I'd have to say for gameplay, I wouldn't like it at all.

 

But then, I don't like photos/art framed in those gaudy, frilly, gold-painted or whatever art/photo frames either - I've never seen the point in those, since they seem to take attention away from the art image itself - and I apply that same perspective to game UI's. Which is not to say the original mockup Obsidian gave is as minimal as I'd personally like it, either, but it's a bit more so than some of the user mockups in the thread.

 

I definitely prefer function over form for UI's, since it's not, to me, so much a matter of having to look at it as much as having to use it dozens of times or more per hour ...

 

I have to agree with LadyCrimson here, the usability should come before any other aspect (we are talking about PE's user interface here after all). I think the mockup done by Obsidian is a good starting point - just develop the most functional UI possible based on internal, alpha and beta feedback, and THEN focus on its final appearance.

[Stun]

[code=

Ooh, Shiny!

 

I like this one.

[Monte Carlo]

I liked it too, but the frames around the ports etc are too big / intrusive. I like the Dragon Age system where the rings around the ports denote mana / heatlh / whatever.

[Lephys]

I liked it too, but the frames around the ports etc are too big / intrusive. I like the Dragon Age system where the rings around the ports denote mana / heatlh / whatever.

What he's saying is, if you like it then you should'a put a ring (of health and mana) on it.

Edited June 4, 2013 by Lephys

[LadyCrimson]

What he's saying is, if you like it then you should'a put a ring (of health and mana) on it.

*groans*

[Lephys]

^ I think I'm... groa'n on ya. *ba domp, TSSssssss!*

 

 

(Seriously, that's the last one.)

[Monte Carlo]

'tis genius such as this that makes this board such a pleasure.

[Eiphel]

[code=

 

Excellent! Still not perfect - too much dead space and oversized decorative elements, redundant left-hand wing - but this is definitely moving in a direction I like.

 

 

I liked it too, but the frames around the ports etc are too big / intrusive. I like the Dragon Age system where the rings around the ports denote mana / heatlh / whatever.

What he's saying is, if you like it then you should'a put a ring (of health and mana) on it.

 

Superb. I salute you.

Edited June 5, 2013 by Eiphel

[khango]

[code=

 

I said I wanted to post my "aesthetic" version. Here it is.

 

The buttons don't look good yet. Didn't want to draw my own. On the right side of the Portraits is a lot of lost space, but I like the background of the UI here. The lower left edge doesn't have to have a UI background there, it bares every function. But I also didn't know what to put there else. The log would seem too spacey if drawn in length. Maybe you guys know.

 

I kept with the Symbols of the menu. I think they are an important part of the charme. But a new high res look wouldn''t be bad (without changing the symbol of course)

 

I combined the "red flood" in the pictures with a blue bar on the outside. I like it more in this way although the portrait looks tainted with that red - a wonderful psychological way to represent pain. Still I don't know what that blue bar should have as function. Please don't let it be mana or such.

 

the knobs in front of the portraits are placeholder for signs which show the buffs and maluses on the character.

 

I hope someone of you like it. It's not supposed to be 100% functional.

 

 

Best mock so far. I hope Obsidian looks at his one. I am pretty okay with the portraits as you've done them. Potentially each character could even have slightly different frames to match. The way you've curved them helps blend things and opens up space in the corners for buttons to open rarely used windows. The middle section could easily be flattened if need be and there's clearly additional space to work with if necessary.

 

Very much like it.

[Homer Morisson]

 

Hmmm. I want to play this on my 1920 x 1200 Asus ProArt monitor and on my 15" MX15 laptop.

I only buy 16:10 aspect ratio monitors, which are increasingly rare these days (currently using a 24" 1920x1200 Dell UltraSharp U2412M). It's definitely good to know that the resolution support for PE will be extensive.

 

 

Same here, using an older 16:10 Samsung Syncmaster T240 (1920x1200 as well)... I still don't get how this didn't make it as the new standard for pc monitors,

I find it vastly superior over 16:9 screens.

 

Thus having a properly scaling UI is pretty much a make-or-break factor for me... okay, who am I kidding, I'd play the heck outta P:E anyways. Still, would be nice though.

Edited June 5, 2013 by Homer Morisson

[Morgulon the Wise]

 

Thank you for your replies. I couldn't dissolve the left obsidian field because its in the same layer as the background. For that I would've had to start anew. Although I didn't want to erase it completely. I think flattened it would make a good frame.

 

If I make the portraits tinier, there would be new place to fill, which would be against my concept. There is a lot space still left over. (but I also want the obsidian to shine through.)

I hope most of your ideas for buttons/the frames/ where the buttons should be are solved. (see, they are even less shiny)

[Endrosz]

So the "battle of the UI" is still raging, eh?

 

My 2 cents: I play on a laptop with 760ish vertical resolution, and vertical space is premium for me. I prefer a left OR right sided UI above any other solution. My suggestion:

- create a rectangular shaped UI block with everything minus the dialogue

- allow that UI block to placed left, right, bottom left, bottom right (4 options)

-  the dialogue block is automatically placed on the other side, bottom.

 

Here's a basic mockup of my suggestion, no fancy graphics. http://www.flickr.com/photos/96984471@N05/8957730610/

 

(I was unable to embed an image...)

[Naesh]

How about an option that enables the game to change the style of the ui depending on the circumstances?

For example, when the party is in a forest, the ui could look "wooden", but when the party is deep in a dungeon it could look like it's made from stone.

Or, when the overall hp of the party is low, the ui could have blood splatters on it, around the profile pictures. (nothing over the top)

[Jajo]

I really just don't understand why so many posters think looking at a pretty but totally functionless piece of UI art is better than... I don't know... seeing the actual game screen?

 

You've answered yourself. Because it's pretty.

Styling made towards split second decisions and 5% greater space awareness is essential for DotA (your example), but the same principles should not be the basis for an exploration game, where action can be paused at any time for as long as one likes. Even tactical isometric games (like X-COM) do not fit into this category, since combat will supposedly not be the alpha and omega of P:E.

Yes, more of the background is visible with transparent UI, but I don't see how miniscule and detached (by HUD) pieces of background contribute to visual aesthetics more than not-minimalistic, yet well made HUD.

[yaniv]

How about an option that enables the game to change the style of the ui depending on the circumstances?

For example, when the party is in a forest, the ui could look "wooden", but when the party is deep in a dungeon it could look like it's made from stone.

Or, when the overall hp of the party is low, the ui could have blood splatters on it, around the profile pictures. (nothing over the top)

 

http://forums.obsidian.net/topic/63854-ui-style-preference/page-3?do=findComment&comment=1336520

[Lord of Lost Socks]

The important thing for me is that there are no numbers popping on the screen. Keep them in the combat log, thanks.

[StrangeCat]

 

Thank you for your replies. I couldn't dissolve the left obsidian field because its in the same layer as the background. For that I would've had to start anew. Although I didn't want to erase it completely. I think flattened it would make a good frame.

 

If I make the portraits tinier, there would be new place to fill, which would be against my concept. There is a lot space still left over. (but I also want the obsidian to shine through.)

I hope most of your ideas for buttons/the frames/ where the buttons should be are solved. (see, they are even less shiny)

WOW that is really Great!  Perhaps they will allow the UI to be moved around.