Page 1 of 1

GUI design

Posted: Wed Sep 19, 2012 4:02 pm
by Trilarion

I started (not very artistic) GUI mockups using the FireFox Addon pencil (Link).

The file holding the mockups is in the source repository (download). You open it with pencil and you'll see. The specifications of the screens are in the Programming Specifications document (download).

The style will be standard Java/Swing style, but I hope gradually we can change and improve it.

Re: GUI design

Posted: Thu Sep 27, 2012 10:34 pm
by Trilarion
I have finished a first draft of most of the screens and dialogs. It's pretty simple. The main screen is a big map with some floatable windows, then there is a fixed size dialog that contains all specific information and a special battle screen. We have 4 type of map displays. The big map for the main screen, the battle map of a province, a smaller overview map used in loading/saving/diplomacy/... and a minimap used for navigation fo the big maps. The rest is sliders, lists, buttons and overlays in the map.

I would very much like to have your feedback about it. :)

Posted: Thu Nov 08, 2012 10:29 am
by Trapets
Why you prefer floatable windows for the main screen?

Why floatable windows for the main screen?

Posted: Thu Nov 08, 2012 10:58 am
by Trilarion
Trapets wrote:Why you prefer floatable windows for the main screen?
Let me first assure that the programming effort is approximately the same. The programming framework supports both, floatable windows and fixed windows. So we have a choice here.

Then given the choice I thought it would be better to give the user the opportunity to move the controls/info window to the place they like most. Some may prefer left side, others the right side of the screen. Actually now that I think about it there aren't so many natural choices, probably only left or right. Also I wanted to have the main map as a background spreading over the whole screen, even if the special windows (transport, industry, ...) are shown, so that you have a constant feeling of "being in the world", of seeing the map. And finally I wasn't sure that the control window (minimap, units, buttons) will stretch well over the whole height of the screen with all the different screen resolutions we want to support.

Minimal screen resolution I set to 1024x768. So everything of the control box must fit into 768 pixels height. On the other hand, largest screens nowadays go up to 2560x1600, more than two times more in each direction. What to do with the extra space? With floating windows this is less of a problem. Anyway this will be a challenge.

What are your ideas?