Taking your suggestions for a new UI

[Frostion]

I know this has been discussed a lot before, and people have given their input for the graphics for these buttons, but are is my suggestions:

0_1524691875709_HiResGraphicsForButtons.zip

The buttons symbolize Previous unmoved unit / Next onmoved unit / Alert, sleep, dig in, skip or whatever / Center screen on the unit selected (if one has moved away on screen and want to find it again)

I think I have managed to make a universal look that would fit many kinds of maps. The buttons are kind of balanced in the way of being “filled” with equally same amount of black, so they feel like having the same “wheight”. I also think the symbols should be easily and intuitively understood. Anyone have thoughts on this?

[redrum]

@frostion I think we are probably discussing too many different things in this thread and much of it is going to get lost. I think we really have 3 separate topics:

1. Current UI redesign primarily focused on main menu and setup screens
2. UI improvements/layout of in-game window: https://forums.triplea-game.org/topic/689/in-game-ui-revamp
3. Unmoved units functionality/buttons

I think the first one is good to keep here but the other 2 topics should have separate threads.

[beelee]

@I can't find the new redrum topic. I think Roiex started this a year or so ago ? sorry I can't remember.

Ok yep it's Roi I wanna change my #3 vote on redrum's thing to having some color added to the lobby graphics.

My apologies for the wrong place. : ) Idk why I cant find it : )

[beelee]

@beelee hmmm... i can't edit my post. well i found the right spot. usually happens right after i give up : )

[beelee]

Seems as if the new stable is supposed to come out soon. I would highly suggest adding some color to the lobby. Maybe some other features as in rankings and well...it's all been brought up before.

Lobby currently looks like 1970s punch card mode. just saying

[LaFayette]

@beelee yeah, it could be modernized and the UX is not ideal. We're waiting for the JavaFX project to be completed which will update the launching screens.

[RoiEX]

I'm currently working on a new launch screen for local games, slow but steady, so if someone wants to give a lobby design a shot...
There's a WYSIWYG editor I'm using for this, so if someone wants to create a mockup using that tool and create a concept how different screens do what and what each button press does, that would help a lot already.

[RoiEX]

WIP

[wc_sumpton]

@RoiEX
The black print is very hard to read, and is impossible where it bleeds over into the brown border. You said you were using a WYSIWYG? Which one and is it a free download?

Design is not my forte, but I could give it a try.

Cheers...

[RoiEX]

@wc_sumpton The Text colour etc. are obviously not final, just wanted to let you know that I started working on it again.
Also alignments are not correct yet, that needs to be fixed as well.

However I'd appreciate if someone would try their skills to create a template: https://gluonhq.com/products/scene-builder/#download
It's not 100% WYSIWYG because styling is done via CSS, but almost everything else is.
If you want to give it a try, I can PM you the details on how to set yourself up.

[Cernel]

@RoiEX Yeah, of course, in the moment you give an artistic look, it is hard to keep it generic. I question the point of having swords on the left, in the moment the look is totally XX century, otherwise (contemporary style map and typewriting).

[Cernel]

@RoiEX Maybe having the TripleA version on bottom right as "TripleA v2.0 (0)" instead of "TripleA v2.0.0", since the last digit is actually not really part of the version, but jus the development number (like, now it would be 17343, right?), that is not zeroed when the previous ones are increased (as it should happen with proper versioning)?
So, practically, I think it would make more sense as "2.0 (17343)" instead of "2.0.17343".

[RoiEX]

@Cernel The version string is just pasted there, it's the same like everywhere else.
I mean we could change that, but it really would make stuff more confusing

[beelee]

This is Awesome ! I remember when Roi said he was gonna start on it. Must be 2 years ago by now. I can only imagine all the work you've put in on this. Thanks for going Big

Having triplea look all bad ass with colors and stuff is probably 90% important at this point. Imo. That and advertising, which go hand in hand. Always gotta keep cranking on the code and stuff obviously, but it's a visual world for most. The new 1942 game on steam is still in development and I wish them well, their stuff looks way cool. Triplea got the rules better but they got the looks : )

Oh yea, bigger font in w/e is decided would be way cool. It all seems a bit small to me The Homepage could use a boost too

Thanks again Roi

[beelee]

@beelee
just to clarify, I'm not talking about how maps look but this could use some help imo

[RoiEX]

@beelee

I can only imagine all the work you've put in on this.

Unfortunately not that much, because this kind of work is really time consuming. It's mainly the christmas holidays that allowed me to work on this. A lot of "trying if this works" is involved.
However I think I found a way to keep me motivated to work on this for an hour a day, so I should be able to continue on this slowly but steadily after the holidays.
Maybe we'll be able to launch a local game using the "new" UI in a month already. Of course then we'd still need Lobby, Network Games, PbF, PbEM etc. but it's a start.
If you want you can check out the "new" map selection screen, just go into your engine preferences, enable the JavaFX UI in the testing section and navigate to "local game". Note that you'll have to restart your game for those changes to take effect.
In order to get back do the same thing, but inside the JavaFX client.
This is obviously still a prototype, but I think it looks better than the current one already.

[RoiEX]

@beelee Also stuff like font and colours is probably the easiest thing to change there.
Thanks to the CSS support, we can just create a single rule that would apply to all text everywhere if we think something is too small or too big.

[RoiEX]

@Cernel Note that the "general background" had been there for quite some time now.
Most stuff is based off @Hepps' design and concept art, so if you think some icon or image should be something different discuss it with the community.
Once the basics work for once, it's easy to change individual layouts.
I hope that it'll get to a point where the wiring in the background is done in such a way that for most changes we don't even need to touch the real code.
This way I could create a guide for everyone interested in enhancing the layout without coding knowledge, so they can play around with the design and propose changes themselves

[LaFayette]

In terms of creative, we may wish to work on a few things:

• what color palettes will the game use?
• which fonts will be used and where?
• what should the general them of the UI be?

My 2 cents:

• the current fonts seem overly difficult to read. The title font on webpage is used in one place, IMO we can get away with that, but using the same (and arguably not easy to read) font on all landing screens seems sub-optimal.
• the general UI them IMO should be more "board game" and less "WWII". I'd rather see for example 3d looking unit pieces (tank/bomber/inf) in places of the swords and guns. For one, TripleA is not just a WWII game, second, and whenever I mention TripleA to others, I say one of the best things it has done is to recreate a true-to-board-game feel. IMO the board-game feel, multiplayer and variety of maps are the strengths of TripleA.

Second consideration, as we do not yet plan to convert the game-play UI itself to use the same styling, we should probably also think how to make the launch screens styling blend somewhat well to the game itself. A highly stylized UI and then landing to a swing UI could possibly be too much contrast and make both look out of place (and maybe would be just too jarring of a transition)

[RoiEX]

A highly stylized UI and then landing to a swing UI could possibly be too much contrast and make both look out of place (and maybe would be just too jarring of a transition)

It's funny you say that at work we had to re-do the login mechanism for an important web app used by "customers" because of security and other considerations.
So we got a new HTML template from marketing, but the "real" website behind the login mask still looks like it was made more than a decade ago (which it probably is).
So users get this shiny new login page, and then time travel back 10 years after clicking login ^^
It's funny, but it really isn't a big deal, you get used to it really fast.

I'm concerned that if we don't try to get to a point of "dual UI", we'll continue to develop new UIs using swing potentially faster than we can migrate everything which will inevitably slow down this process even further.

what color palettes will the game use?

Good question. I think we had a discussion like this before. For now I've settled on a tan/olivegreen look as suggested by @Hepps
So far I've managed to keep colour definitions in the CSS IIRC, so changing colour palettes is a simple find and replace if we want to change style (I mean we could potentially even allow custom themes, but as of now I wouldn't recommend it given the weirdness of current LookAndFeels)

which fonts will be used and where?

I took a "course" in visual design a while back and I now feel a little bit more confident judging font styles. We can use any font in the .ttf format and change the default size, it's a little bit more complicated than changing colours but it's still a matter of less than 1 hour to change this.

what should the general them of the UI be?

I think this question is hard to impossible to answer. I think a lot of people have different opinions regarding this topic and I don't think theres one theme to make everyone happy.
So I thnk the primary goal should be to get a "good looking" modern UI going and discuss the details once we have a working prototype. As mentioned by me many times now, once the general template is there I can probably teach everyone in this forum on how to play around with the values so they can try out their own designs and suggest them to the general community. This way I can spend my time writing code and the jury aka the community can discuss details over the UI.