User Interface concepts

[Pureon]

I've been working on the interface designs sporadically over the past three months, so it's probably time to show an update.

Here are updated designs for the 3 windows I previewed before - the current designs are shown below each one:

Edit: Here's a redesign of the Match Setup screen:

Current design:

New design:

Let me know what you think! Like it?

[dvangennip]

I think those designs look great!

However, there are a few minor things that got my attention. First, the type for the window title: I feel that is a little out-of-era, more 19th century or gothic than classical. I do not have an alternative ready, although it would probably a non-italic roman font (Oh, I see now you tried that first, compared to the earlier designs this does look more stylish). Second, when looking at the Diplomacy window, I'm not sure the 'Player 4' text in white would be readable on the yellow background on all kinds of display since the darker outline has been omitted (or at the least is very faint). A third thing, on the same Diplomacy window, I do not really like the fade/shadow behind the small checkmarks. Personally, I think it would be clearer and look sharper with larger X's and a reduced glow.

It's definitely an improvement over the older design, so keep going

Edited August 4, 2013 by dvangennip

[sanderd17]

Looks really good

A third thing, on the same Diplomacy window, I do not really like the fade/shadow behind the small checkmarks. Personally, I think it would be clearer and look sharper with larger X's and a reduced glow.

I think those things should be a dropdown list instead of some x's with cryptic letters on top. Although I don't know if Pureo has the ability to do this, or if some programmer should get it done.

[wraitii]

Looking very good so far, a few comments:

I really like the "more options" screen the look of the "separators" is really cool, and it works well where it's used (which includes match setup). However, I feel lik the background gradient doesn't really work for the diplomacy window. Given what you're after, I think solid colors with vertical separators would be a better choice (sort of what you did on the match setup screen).

I'm not a huge fan of the colored blocks. Looks too colored, imo. There's probably a way to tone it down, but trial and error is key here I think.

The arrows for the dropdowns look too big and too textured to me, compared to the rest. I know "flat" design is really in right now, but I think a solid, smaller, perhaps slightly more orange arrow would work better (also, they're asymmetrical, which looks weird).

But generally I really like the direction, clean, dark, with drop shadows to separate elements. The "more options" screen in particular looks really excellent to me. Diplomacy is the one which I like the least, I much prefer the array in the match setup mockup.

A final remark: the "number of players" button is overkilled, design-wise. I think it's too small, vertically, to need the gold separators.

[Enrique]

Very nice so far. Things that look a little off to me is the gradients to separate columns in the diplomacy screen, and the need of stronger dropshadow in the players name to read it clearly over yellow color. I noticed the 'more options' button is missing in the match setup screen. , unlike others, I like the title font as well as the strong playercolors. The number of players dropdown looks like it has too much space right now.on the screen, but I'm also aware that some players don't see the option and miss it, so don't know what could be done.

Keep it up man, the menus are going to look gorgeous with this new design.

[Jeru]

While we're at it, the diplomacy screens (both the old and the new) need to be improved in terms of their usability.

It isn't clear what "Theirs" means, nor "A", "N", "E".

[plumo]

A clear improvement

I didn't like the old background with the tiles. I'm happy they are removed.

[Mythos_Ruler]

While we're at it, the diplomacy screens (both the old and the new) need to be improved in terms of their usability.

It isn't clear what "Theirs" means, nor "A", "N", "E".

Yep! This. I think the entire Diplo screen should just be a lot bigger, to give more room for usability. Use nice big easy-to-see check marks or Xs. The Tribute buttons should be bigger and accrue the amount for each click, then there should be buttons at the bottom of the screen that say "Accept" and "Cancel", replacing "Close." The changes to diplomacy and the tributes made should not enact until "Accept" has been clicked.

[Pureon]

Thanks for the feedback so far. The A N E selections will be replaced with dropdowns (as agreed before).

@sanderd17: I'm only working on the design, we need a programmer to work with me on this ASAP.

[WhiteTreePaladin]

Pureon, I may have some time this week (although not too much on Saturday). Let me know what you want to do.

By the way, the designs look awesome!

[Mythos_Ruler]

Also, Pureon, maybe create a couple different-looking button designs we can choose from?

[Pureon]

Also, Pureon, maybe create a couple different-looking button designs we can choose from?

They'll resemble the play0ad website's main nav buttons, which aren't too far away from what we have now. Also I want the interface designs to remain consistant with the main menu design, which isn't changing.

[Mythos_Ruler]

They'll resemble the play0ad website's main nav buttons, which aren't too far away from what we have now. Also I want the interface designs to remain consistant with the main menu design, which isn't changing.

That's fine, but I think they could still used updating or various sizes.

[Pureon]

Pureon, I may have some time this week (although not too much on Saturday). Let me know what you want to do.

Nice one. What was the outcome of the scripting discussions - is the entire interface going to be redone, or are we just going to update the graphics and leave the current scripting?

You don't happen to have Photoshop or Photoshop Elements do you? Gimp can open the layered PSD file, but it won't support some of the Photoshop features I'm using.

[WhiteTreePaladin]

I'm not sure about the result of any previous scripting discussions. I might be able to clean some small stuff up as I go. If we want a redesign, then that will take a little while. Alas, my copy of Photoshop 5.0 lies on an old lonely hard drive. I'd have to find a computer that could boot Windows 98 to use that. That said, wouldn't pngs be adequate on my side?

[Pureon]

That said, wouldn't pngs be adequate on my side?

Probably would be. I'm not sure Photoshop 5 would work

Is the interface implementation really messy at the moment?

[MishFTW]

They'll resemble the play0ad website's main nav buttons, which aren't too far away from what we have now. Also I want the interface designs to remain consistant with the main menu design, which isn't changing.

Keep in mind the theme update is aiming to move away from the status quo. The website is going to follow the the game GUI's evolution

[WhiteTreePaladin]

Is the interface implementation really messy at the moment?

I think it's mostly that there are a lot of unused pieces and duplicates that make things difficult. It's hard to remove them because it can take a fair bit of searching to know if it will break something, and if something does break, it might not be obvious right away. Also, we rely on more global JavaScript variables that we probably should (although some of that may just be the nature of JavaScript).

[alpha123]

Is the interface implementation really messy at the moment?

Yes. Definitely yes. Redesigning the GUI could, from the coding side, be a bit of a nightmare. That said, I'd love to help out with it. (I'm quite familiar with the GUI code and do happen to have Photoshop.)

I suggest we wait on this until the Git migration is finished though - it could take a while, and during it parts of the GUI/the whole GUI could easily be non-functional, so it should definitely be in its own branch. Also, Git will make it much easier for multiple people to work on it, which might be critical to get this done in a timely manner.

BTW, I really like your mockups Pureon. As with the other though, I think the gradient on the labels in the diplomacy box looks rather weird. Perhaps it should just have the gradient on labels ending with a colon (e.g. options dialog, etc).

[Pureon]

Thanks for offering to help alpha123.

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

[alpha123]

Thanks for offering to help alpha123.

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

Tentative guess: 2 months. Hop on IRC and bother Philip if you want it sooner.

I think we can afford to wait. For one thing, it will go much faster if we have Git since multiple people can work on it easily. For another, we may not actually have to wait: k776 keeps a reasonably up-to-date mirror of the source on GitHub. The multiplayer lobby and attack notification stuff have been developed using that, and I think the new GUI could as well.

[WhiteTreePaladin]

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

[Mythos_Ruler]

I don't think the gradients look "weird" at all. Hmph. We should stay away from flat blacks and grays when we can. A gradient is more visually interesting and breaks up the columns without using boring vertical lines.

[kosmo]

I would support the not use of vertical lines, for the same reason there should be no vertical lines in tables in, e.g. a book - it disturbs the reader and is, afaik, typographically nonsense.

[Pureon]

At one stage I had colours behind the gradients, but it got a bit too busy.

Anyway, have no fear, I'll take another look at the gradients