User Interface concepts

[Nolanjoker]

wow, congratulations you give us a next level of GUI.

[s1lence]

Those gradients aren't really nessicary are they? They make the pane visually overwhelming IMO, The only distinction needed is between the rows, and you have nailed that. Collumn lines aren't nessicary as the pane has decent typography.

[alpha123]

Alpha123, I certainly wouldn't mind helping, but I'd be glad to have you take it over if you want.

You wrote the original GUI code, right? I think you should definitely do this in that case. (Although I sort of want to strangle you; parts of source/gui/ are a little insane. And there's a ton of duplication in the XML and JS. But it works stellarly, so I guess I can't complain too much.)

However, I see no reason that we both (and hopefully some other people - leper?) can't work on this - especially with Git it will be easy to collaborate.

Pureon: I agree that it looks too busy with the colors in the background. However, I like how the gradients appear more subtle in that version. Perhaps just dim them a bit in the version without the colorful background?

[WhiteTreePaladin]

Fortunately, I can't take credit for that. Lol.

I did build a lot on it and did add a lot of duplication though. My goal was clean it up eventually, but I never got around to it.

I can help remove some of the unused stuff; we'll need to come up with some design standards first. We need to either make all styles local to one page only, or have a common library that they all share.

[Edit] I haven't touched the C++ side of the gui. I have no idea what's going on there.

[wraitii]

I'd recommend looking at how others GUIs do it and pick the best system, for that.

Though I probably won't be able to help, I certainly support any work on the GUI

[Palantius]

Pureon, you are really talented! I've been working on some 2d art for 0 ad for quite some time now, and it isn't even close to this!

I don't want to be annoying, but as the GUI is present both pre-game and in-game, shouldn't the "0ad-factor" be more present?

It is a moment in time that never was. It is the spring of the world, and the dawn of history. It is a glimpse into an era when the empires of the world are at their zenith. It is but a breath of an age when mighty rulers wield rods of iron and brazen swords; to demonstrate that they are indeed the greatest ancient civilisation!

The problem I imagine with the mockups is that it's to defined in a historical context - it just looks very roman to me. What if you play Gauls vs Persians, then the roman style would be strange.

I found this stone texture which I think has very much of the right feel in it:

http://enframed.devi...exture-19249532

It's raw and has these "layers" that makes it look even more raw, like a material that the stuff in the "0ad-place" is made up of.

The dota 2 logo also have something about it that makes it prehistorical:

http://imagesci.com/...-wallpapers.jpg

Combining this raw stone with those really nice gold flourishes (with maybe a bit more gold-ish colors? gold is quite neutral when it comes to early civilizations) could maybe look good and add the "0ad-factor".

One idea would be to use the stone texture instead of the red (on which the title of the window is displayed), make the flourishes more gold and have a dark version of the stone texture as background on which the text is to be displayed. How to achieve simplicity and clearness with these elements can however be hard.

As with the A N E, my idea would be to have a breadcrumbs-button with icons. Ally could be represented as two shields (witch a blue background/theme), neutral as a laurel crown (green) and enemy as two crossed swords (red). Also, is the "Theirs" really necessary? Shouldn't marking a player as enemy mean declaring war, marking ally to propose ally (it's a treaty that both parties must accept) and marking neutral would be to propose a peace treaty or cancelling an alliance. Before the other player has accepted a proposed change the proposed button could have a colored outline. If the list would be rotated so that each player has a "column" instead of a row, then you could fit the players civilizations emblem, which would be cool.

Edit: a little picture attached:

Edit 2: fixed the picture a little

Edited August 7, 2013 by Palantius

[historic_bruno]

How long until Git? Can we really afford to wait?

I don't think it's critical that a GUI redesign wait for git. Sure it would help, but there will be a transition period while everyone gets used to the new system and bugs are worked out, so we should limit how many things we delay for that unknown period of time.

[Josh]

Well, I think I'm going to try to integrate some of this new UI into the multiplayer lobby for Alpha 15. Pureon: Could I get some layered versions of your mockups in something GIMP can open?

[Mythos_Ruler]

A design for tooltips using Paul's direction:

[Mythos_Ruler]

I missed this when it was posted:

[Enrique]

I love the shortened tooltips, the second and third examples. If the right-click could be implemented for advanced tooltips it will look really elegant IMO

[gameboy]

Very nice, what time it will publish, publish it right now?

[Lion.Kanzen]

Very nice, beautiful, but what is that message, or for what? What is that Z or what means? Or is a random proposition XD.

Still fine work.

[Enrique]

Very nice, what time it will publish, publish it right now?

It will take a while, this new interface is still being designed/developed

Very nice, beautiful, but what is that message, or for what? What is that Z or what means? Or is a random proposition XD.

Still fine work.

That message is the tooltip of the "train hoplite" button. Z is the shortcut to the button.

[Lion.Kanzen]

Perfect. I like the idea put the shorcut, visible in all. like Starcraft. I publish this this in my page, all days new users. Even if they clock like. XD but ask.

Congratulation team, the ideas are attracting more fans.

[FLHerne]

All these graphics look far better than the current ones. Very nice!

I think the third tooltip looks best, the second looks 'unbalanced' with the letter obscuring one of the decorative thingies.

In that Match Setup picture, why does the Map Description box have normal text with spirally things in the header when all the others have italic text between the other style of decoration? It doesn't really fit in (although the regular text as also seen in the first few images looks better than italic IMO).

Edited September 15, 2013 by FLHerne

[fakeskins]

The only issue I see with the Interface is it`s size ,making it a bit smaller might just do the job ,or give us the posibility to set it`s size once the options menu will be implemented

[alpha123]

Looks AMAZING. I want to this so badly... unfortunately I have a lot of other things to implement first....

Hm, I like the position of the hotkey on the third tooltip, but I also like the decorative edges from the first two....

Comments on the game setup mockup:

For single player I suggest putting the map description where the chatbox would be in multiplayer. Makes that space look less empty and allows displaying the full map description without scrolling.

I would put the number of players dropdown near the other dropdowns. It looks a little out of place where it is, plus it would mean we could tie it to map size (i.e. you select 3 players, the map size goes to medium -- but not vice-versa) without confusing people too much (I think it would be strange if we did that with the number of players dropdown in its current location).

The buttons look too much like the current UI and look too different from the rest of the new UI, IMO.

[Lion.Kanzen]

but all we can be gratifull with you and Pureon and all team for that workm Alpha123. Good luck team. Every doy more people love the work of the team and his fans (like me)

[Pureon]

Some of the devs have already started implementing pieces of the new interface design. I'll let Josh and the other guys reveal that on the forums when they're ready.

A design for tooltips using Paul's direction:

I'm not sure the Z button works harmoniously with the interface design, it's kind of been dropped on top, but it looks cool so lets go with it

Two week old update to the diplomacy window design:

Removed the offending gradients, and added nicer looking shadows

[Mythos_Ruler]

I'm not sure the Z button works harmoniously with the interface design, it's kind of been dropped on top, but it looks cool so lets go with it

I think it looks best down in the corner like this one:

It's out of the way and doesn't unbalance the header.

Two week old update to the diplomacy window design:

Removed the offending gradients, and added nicer looking shadows

I like the gentle shadowing and balance of gray tones. Though, I think the player names could have harder shadows like my tooltip mockup (1px offset, 0px feather). Would help make the names stand out from the oversaturated player colors.

Some other ideas:

• The tribute icons could be bigger so that you click the button "100, 200, 300, etc." shows up over them as you accrue the tribute amount you want to send, then...
  
• The tribute would not be sent until a "Send" button is clicked next to the tribute icons.
  
• At the bottom we need a series of buttons instead of just "close." They could be:
  
  • Accept - This accepts all changes to diplomacy, plus sends all unsent accrued tribute, and closes the window.
    
  • Reset - Resets all changes, including diplomacy and accrued tribute. Does not close the window.
    
  • Cancel - Replaces "Close" button. Just cancels everything and closes the window.
    

  [*]Our button styles will need an update, even if they don't look like the main menu buttons. The brown buttons don't fit at all. We could make black or gray or red or gold buttons or something that look similar to the main menu buttons but fit the new UI direction better. Hell, we could also just update the main menu graphics while we're at it (the layout would be the same, but the graphics would be updated).

[serveurix]

I think it looks best down in the corner like this one:

[...]

It's out of the way and doesn't unbalance the header.

Yes but it is less highlighted. How about a simple red border around it ?

[Lion.Kanzen]

You are right Michael this button dont fit with the new concept.

Civ V have similar concept.

[wraitii]

The might might look better centered in that. Perhaps.

[Pureon]

Our button styles will need an update, even if they don't look like the main menu buttons.

Yeah don't worry, I'm on this. I have a few button design concepts, I just need to simplify/alter some bits to make sure it's workable (programmable).