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

[Infinitron]

What's with these "floaty" art-deco steampunk style UIs and why do so many people like them?

Edited June 5, 2013 by Infinitron

[StrangeCat]

[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.

I really like the lay out of this one the best.  There is much that the Devs could do to enhance and work with here but over all this is pretty damn good!

Edited June 5, 2013 by StrangeCat

[Rahelron]

A less intrusive interface with a different way to manage dialogues. When you enter a conversation an animated 3D portrait of the person you are talking with pops in and this is what happens.

 

[Malekith]

Please... please, take it away... I can't... I can't take it...
 

[Rahelron]

An improvement over the first version. Please don't look at the graphic, it is crappy, just look at the design.

 

I moved the toolbar on the right side and now it seems less intrusive. The picture on the left is closable, and shows a portrait of the selected character. If you have more than one character selected it shows the first one one the right-side tab.

 

[Rahelron]

This is what happens when a dialogue starts.

Edited June 5, 2013 by Rahelron

[khango]

This is what happens when a dialogue starts.

I think your dialog concept is neat and is worth exploring further and maybe polishing a little - for example, what happens if more than two people are involved in the conversation?.

 

 

Not sure about the rest. I don't *hate* it, but I'm not in love, either.

[Karkarov]

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)

Definitely a step in the right direction.  You have a reason for why it is there but I am going to go ahead and say it anyway...   You still need to get rid of those large black obsidian art panels.  I would still advise finding a way to make the quickbar buttons bigger, they are still the smallest thing in your ui and yet are the most likely thing to be clicked throughout the game.  They just need to be bigger.  Assuming the extra obsidian was gone I would kick the dialog box over to the left corner and trim down the obsidian "flow" over the quickbar so that it was smaller and slid off right past the buttons.  Beyond that.... definitely the best side panel UI mock up in this thread.

 

However we are now to that time.  With their most recent update and UI related commentary I am reasonably happy they are going for a more compact UI.  We will have to see what they have in mind later.  I had already been working on a final "version" of what I made earlier just to satisfy some people so I will post it now.

 

 

It still needs more work primarily in the little menu wheel which could be better done.  Either way you get the idea... it is a more "artistic" take on my earlier UI.  Again it is mostly just to show that you can in fact do something artistic, while staying minimal, and functional.  You do not have to be one or the other.

 

So I decided to leave out the red text this time... whats all this represent?  The gravestone portrait is pretty self explanatory...  the greyed out portrait represents someone who is alive but knocked out due to loss of stamina, and the statue portrait represents a sixth party slot where you have not yet recruited anyone.  This is why the final slot has no "selection" gem in the corner, health bars, or the helmet/demonic skull things. 

 

That said what's up with the helmet/demonic skull things anyway?  They represent buffs and debuffs.  Ideally (can't really do it here) the eyes would light up red or blue depending on which it is, and a little glowy aura or flame would come in behind them.  The helmet lighting up indicates you have buffs, the skull... well it is pretty obvious.  While you could go with a different colors connotate different status approach I think it would be just as easy to simply relegate it all to a mouse over.  When mouse overed a simple tool tip pops up showing what buffs or debuffs are active.  Fairly straight forward but a more... artsy way of tracking them.

 

The gold highlight on the one button would indicate a ability that is "channeled" and on.  Such as a 3rd edition warrior using Combat Expertise to increase his AC or a rogues hide in shadows.  The light blue indicates a selected ability that you have clicked on or activated and are targeting, such as a heal spell, or a special bow shot.  The two larger buttons would still be for weapon swapping and opening the skill/spell menu like on my earlier mock up I just didn't go through changing the icons.

 

So lastly all other stuff would be same.... select all would turn the weapon swap and skill/spell menu buttons into "set 1" "set 2" buttons forcing a weapon swap on all characters to the specified set.  The other ten buttons would become the formation selection buttons.  If you picked less than your whole party it is still the same, only the formation buttons grey out since the whole party isn't selected.  I did redo the pet status a little but it is basically the same concept.  Also the dialog window would still fade out when not in combat or dialogue, and it would still be possible to disable it entirely in combat if you wanted to.  I know I would, I mean... it is nice knowing I hit the goblin with 21 damage and what all the modifiers were.  The thing is... this isn't an mmo, I don't need to min/max, and ultimately all that actually matters is the goblin died, not that I had +4 to hit, +3 damage from strength, and the goblin had -1 to ac due to a debuff.  I just don't need the math, it isn't like there is a DM I can call out and get a reroll because he miss added my bonuses.  Basically the combat log actually breaks immersion in the worst way and doesn't even tell you anything on screen visual and audio cues don't.  It is something only the die hard min maxer gamer needs.

 

Lastly, yes, I did make this mock up at 1920x1080.  The reason being is because the statistical majority of players will probably be on this resolution, and I wanted to show just how fast the game screen opens up when you don't use the brick UI and aren't confined to 1280x720.  It also gave me the ability to work with higher res art to make a cleaner image.  I still choose to reuse some of the original UI elements that needed some scaling  (the statue...) but it came out with a more attractive UI, with more curves which people seem to like, while still being mostly minimal, sticking with the games general vibe, using the colors obsidian wanted, larger portraits, being totally functional, AND way more minimal and compact that most other mock ups including the original.

 

Sorry for the wall of text :[

[curryinahurry]

@ Karkarov; I like it, especially if it can be re-oriented to a side panel.  Both because of portrait location and that I don't want function keys above the portraits; to the side seems less unwieldy.  

 

The problem is that Obsidian is going for a full border effect, whether its bottom, right, or L-shaped to follow their aesthetic goals of an interface reminiscent of the IE games.  Just my 2 cents.  It does match the overall game aesthetic nicely.

[Wombat]

As for orlan or any other possible animal-like intellectual race, one of the fond memories from IWD2 was Pondmuk (IIRC, Chris Parker's creation), who had difficulty in adapting himself to harsh goblin culture surrounding him.  I understand opinions like "just go and serve yourself with Animal Crossing, idiot" but, just for a change of pace, why not put characters like that, or some kind of comic reliefs where a bunch of orlan plotting what can be taken as a harmless mischief while seriously taking themselves as freedom fighters.  Alternatively, an orlan may fall in love with a human who has been kind to him/her and rejects to obey or sabotage what they plan to do (can be comical in a way).  In the PE setting, human could traffic them as "pets" but it's not rare even among us who take care of their pets (maybe way too seriously in some cases) even if they aren't conscious of treating them as equal in ideological sense.

[Sedrefilos]

 

This is what happens when a dialogue starts.

I think your dialog concept is neat and is worth exploring further and maybe polishing a little - for example, what happens if more than two people are involved in the conversation?.

 

 

Not sure about the rest. I don't *hate* it, but I'm not in love, either.

 

 

 

OMG! THOSE TINY LETTERS AGAIN!!!

[IndiraLightfoot]

Karkarov: Wow, it's brilliant. Thank you for making it! Love the art. And you've made it roomy, so there's space for summons and potential mini-maps, pop-ups or whatever. Personally, though, I wouldn't use a mini-map in this type of isometric game.

 

And like curryinahurry, I'd prefer the portraits stacked to a side panel with action/function buttons to the left of them (but that could be a UI option). Also, it seems curryinahurry is right about Obsidian going for a panel along the bottom or one of the sides, perhaps even an L-shaped one.  

[Eiphel]

 

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)

Definitely a step in the right direction.  You have a reason for why it is there but I am going to go ahead and say it anyway...   You still need to get rid of those large black obsidian art panels.  I would still advise finding a way to make the quickbar buttons bigger, they are still the smallest thing in your ui and yet are the most likely thing to be clicked throughout the game.  They just need to be bigger.  Assuming the extra obsidian was gone I would kick the dialog box over to the left corner and trim down the obsidian "flow" over the quickbar so that it was smaller and slid off right past the buttons.  Beyond that.... definitely the best side panel UI mock up in this thread.

 

However we are now to that time.  With their most recent update and UI related commentary I am reasonably happy they are going for a more compact UI.  We will have to see what they have in mind later.  I had already been working on a final "version" of what I made earlier just to satisfy some people so I will post it now.

 

 

Superlative! This is by far my most favoured design of the ones I've seen. Give me the ability to expand the text box into the middle of the screen for dialogues and I am sold.

[Morgulon the Wise]

@ Karkarov

This UI is really good!

Yep I like this much more curvy solution than the earlier mockups. Your aesthetic decisions are well thought through, it all has lost a lot of the rectangular-block-feeling. (this is what argued me most in the early 3D games like NWN, Dungeon Siege, Morrowind - it was too much Windows)

 

If the portraits should be moveable  (I still prefer portraits in the vertical )  the main menu button should locate itself in  a more central position- This button might be the biggest problem your UI still has (there are not many problems left). I like your reduction of buttons.

 

I hope that the designers will choose a compromise between our UIs.

[Sensuki]

If you put the Dialogue box together with the UI in the middle and had a circle thing on each end then it would look good.

[Rahelron]

New version, with all the improvements you have asked for. As always don't look at the skins and the graphic. Look at the layout.

 

1- Bigger letters in the dialogue boxes.

2- Multi-character dialogue system.

3- Resizable dialogue boxes (as you can see they have different horizontal sizes, the player just has to click on the border and drag)

4- Buttons.

5- Floating toolbars (to prevent the area switching problem)

 

 

How the multi-character dialogue system works: when a second PC/NPC joins the conversation another portrait appears on top of the last one. If more than two characters per side join the conversation (PCs - NPCs) the bottom portrait disappears, the top one goes to the bottom and a new one spawns on top.

 

Button functions:

X - To close character portraits (not working during conversations)

M - To view a map of the area in the box instead of the portraits.

[ENTER BUTTON]: To rotate the characters' bar by 90 degrees (so you can put it at the top or at the bottom of the screen).

[Karkarov]

New version, with all the improvements you have asked for. As always don't look at the skins and the graphic. Look at the layout.

Much better than the earlier layouts.  My only advice would be to toss the tiny dialogue box on the bottom.  At that size it serves no point and going through it would be literally a hassle.  Move the portraits to that space instead so there is less "searching" with the mouse from clicking on portrait, to skill, to targeting it.  As for the large dialogue blocks... move them a little higher on the screen, make the portraits smaller, and expand them further right so there is more horizontal room for text.  Once out of dialogue you can have your dialogue window with a record of the conversation and combat log pop up in the bottom left and be much taller so it can be read through.

[Rahelron]

 

New version, with all the improvements you have asked for. As always don't look at the skins and the graphic. Look at the layout.

Much better than the earlier layouts.  My only advice would be to toss the tiny dialogue box on the bottom.  At that size it serves no point and going through it would be literally a hassle.  Move the portraits to that space instead so there is less "searching" with the mouse from clicking on portrait, to skill, to targeting it.  As for the large dialogue blocks... move them a little higher on the screen, make the portraits smaller, and expand them further right so there is more horizontal room for text.  Once out of dialogue you can have your dialogue window with a record of the conversation and combat log pop up in the bottom left and be much taller so it can be read through.

 

 

Thank you for your comment. I agree with everything you wrote except the part about portraits' sizes. I like them big.

 

I think you have designed a much better toolbar than me, if I was in Obsidian's shoes I would use your bar with my dialogue management system.

 

As the combat log / dialogue bar is concerned I think we could scrap it entirely. It could become a tab on the game's menu like the spellbook or the quest journal. When I played Baldur's Gate 1/2 I never searched for old dialogues on the main bar. I just looked at the journal when I didn't remember what I had to do in a quest.

Edited June 6, 2013 by Rahelron

[Rahelron]

Here it is: a merge between our two mockups.

 

Normal gameplay (the big avatar can be closed or turned into a map):

 

During Dialogues:

 

During dialogues (alternative version, prettier but more invasive):

[Karkarov]

As the combat log / dialogue bar is concerned I think we could scrap it entirely. It could become a tab on the game's menu like the spellbook or the quest journal. When I played Baldur's Gate 1/2 I never searched for old dialogues on the main bar. I just looked at the journal when I didn't remember what I had to do in a quest.

I agree pretty much 100%.  If there is a way to turn the dialog box off in game outside of dialog itself... I am going to do it.  The reason I don't go even further down the rabbit hole on my UI mock ups is because many people on the forums don't want a progressive or new design.  That doesn't go for just the UI either.  They literally want a 1990's Baldur's Gate 3.  So I try to do something different that still retains a lot of the old games elements.

 

So if it were up to me there would be no out of dialogue dialogue window at all, much less a combat log.  There is just no need.  It was there originally to appeal to the min/maxer D&D players, but Eternity is not D&D though and a combat log strikes me as being about as immersion breaking as it gets, nor is there a DM to fight with when you think the math is wrong.  The funny thing is many die hard old school IE game fans will tell you immersion is super important to them, but be mad if you do something like remove the combat log.

[IndiraLightfoot]

Rahelron: Looking better for each iteration, but I think those scrolls are too much. I'd prefer the lighter transparent text windows and perhaps a tad smaller portraits when a dialogue's up.

 

Karkarov: I couldn't agree more, but I'd say - let those who want to have a combat log keep it as an option, as long as we can opt out of dialog logs and mini-maps, etc, too.

[rjshae]

 

 

 

Superlative! This is by far my most favoured design of the ones I've seen. Give me the ability to expand the text box into the middle of the screen for dialogues and I am sold.

 

I have to say this is the first one I've seen where I wouldn't actually mind playing the game with. Yes some of the others are esthetically pleasing, but this one is balanced, functional, and doesn't distract from the scene. I guess the round circles with the gears are meant to be the control button icons?

[IndiraLightfoot]

Same here, and yes they are.

[Karkarov]

I have to say this is the first one I've seen where I wouldn't actually mind playing the game with. Yes some of the others are esthetically pleasing, but this one is balanced, functional, and doesn't distract from the scene. I guess the round circles with the gears are meant to be the control button icons?

It is hard to see but if you pull up the picture full screen you can see that i sort of scratched in some words for them to show what they are supposed to be.

[J.E. Sawyer]

 

 

 

 

This mockup is not far from where we are going with our revisions.

 

To correct one statement you made: it's not true that the majority of players will play at 1920x1080, but more polled Steam players play at that res than any other.  If you combine 1920x1080 with 1336x768, those two blocks form a majority.  That's why we're constantly checking both 1920x1080 as well as 1280x720, the latter of which will be our lowest supported resolution.