GUI design

Discussion and contribution to game graphics and user interface.
Forum rules
Posted relevant content can be used under GPL or GFDL (http://www.gnu.org/) for the project. Thanks!
Post Reply
User avatar
Trilarion
Founder
Posts: 833
Joined: Thu Jan 12, 2012 9:27 pm
Location: Central germany

GUI design

Post by Trilarion » Wed Sep 19, 2012 4:02 pm

Mockups

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.

User avatar
Trilarion
Founder
Posts: 833
Joined: Thu Jan 12, 2012 9:27 pm
Location: Central germany

Re: GUI design

Post by Trilarion » Thu Sep 27, 2012 10:34 pm

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. :)
Attachments
gui mockups.zip
GUI pages mockups made with pencil
(339.27 KiB) Downloaded 395 times

Trapets
Posts: 17
Joined: Wed Oct 03, 2012 9:41 am

Post by Trapets » Thu Nov 08, 2012 10:29 am

Why you prefer floatable windows for the main screen?

User avatar
Trilarion
Founder
Posts: 833
Joined: Thu Jan 12, 2012 9:27 pm
Location: Central germany

Why floatable windows for the main screen?

Post by Trilarion » Thu Nov 08, 2012 10:58 am

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?

Post Reply