Pureon

User Interface concepts

182 posts in this topic

See here for related discussion.

I've started working on a concept for our user interfaces and will showcase some of the new layouts below. The new theme will be rolled out throughout the game, but will not influence the in-game HUD, the main menu screen, or the new website design for now. I'm going to focus on the windows that need the most work.

Here are some windows using the existing UI theme:

g3bfL7X.jpg

gY1FDyA.jpg

oAyNpfR.jpg

**** Work in Progress warning ****

Here are the windows using the new UI theme:

mmpr5Cq.png

Xdsgknk.png

V0l1wNM.png

On flat white and black backgrounds:

HbWCmhC.png

Thoughts: I focused on making the design more modern, clean, and legible. The thick gold frames are gone, being replaced by a solid top frame with an optional title area, and a lower 'weight' frame to hold it in place. This somewhat resembles the structure of a Roman Standard flag. I'm using a temporary background pattern texture that comes with Adobe Photoshop for now just to quicken the design process, but this will be replaced with a compliant texture.

That's it for now.

Hope you guys like it! :)

13 people like this

Share this post


Link to post
Share on other sites

:jawdrop:

Wow!

(Just some comments as to not distract from that beauty too much, but the background could use some more work (I know it is just temporary) as it looks a bit too modern. The player names for the diplomacy screen need a bit more vertical space.)

Share this post


Link to post
Share on other sites

This. Is. Awesome!!! To quote leper: " :jawdrop: "

It's so elegant, it's so sauve, its just spectacular!

Share this post


Link to post
Share on other sites

Definitely good to see the overembellished frames go. There seem to be a symmetry issue though, with the decoration on the right side "sticking out" more than the ones on the left side. I prefer the ones sticking out less.

Edit: Actually, to be exact, I like the top-left one and the bottom-right one. If you mirror those, there should be a full set.

Edited by zoot

Share this post


Link to post
Share on other sites

I will not use that smiley but it fits very well - It looks awesome! :)

The new theme will be rolled out throughout the game, but will not influence the in-game HUD, the main menu screen, or the new website design for now.

I'm not sure what you mean exactly. think consistency is one of the most important things about GUI design.

I think beside making the design prettier the GUI also needs a very pedantic and persistent person to work on the usability.

Share this post


Link to post
Share on other sites

Thanks for the feedback so far.

I'm not sure what you mean exactly. think consistency is one of the most important things about GUI design.

I'll focus on redesigning the windows and their layouts for now, they need the most 'work' - other stuff will follow at a later date if needed.

@zoot: Oops - ignore the right hand side, my mistake :wacko: (At least I got the diplomacy window right)

Share this post


Link to post
Share on other sites

These look pretty nice :). For the dialog previews could you use a more realistic background with a game screenshot for a more realistic preview.

Share this post


Link to post
Share on other sites

Wow indeed :) You're about to take the 0 A.D. GUI into the 21st century ;) Overall really great, I would just make the general suggestion to not be limited to what the GUI looks like today in terms of where buttons are placed etc, if you think there are ways to improve it please feel free to suggest them :)

Share this post


Link to post
Share on other sites

The overall style is fantastic, m8. A few things about the layouts: I've always felt that the Diplomacy pop-up could be a LOT bigger. The "A N E" for Ally, Neutral, Enemy is very bad for usability. They should be spelled out. Also, for tributes, the player should queue up the tribute, then the money does not get sent until the player clicks a button or close the screen. Same with changing diplomacy. The diplomacy should not actually change until the dialog is closed ('Okay' or 'Commit'). I realize that this is the 'design' thread, but I think these things should be laid out there because they affect the design. :)

As far as fonts go, I think title headers and button fonts can be more stylized, while all the informational stuff remains in a more 'readable' font. Let's make this look pretty and functional all rolled into one. (y)

Share this post


Link to post
Share on other sites

I have long wished for a minimalistic UI. A step in the right direction. (The old golden bars never really did give a feeling of antiquity, rather just seemed too baroque-sque to me.) If only the GUI was revamped; it would be so much easier to mod it.

Pureon, if you could stretch it to be a bit more modern (muted tones, less "shiny"/web 2.0), it would be perfect with the new website theme I've been envisioning for a while :P

Share this post


Link to post
Share on other sites

I have long wished for a minimalistic UI. A step in the right direction. (The old golden bars never really did give a feeling of antiquity, rather just seemed too baroque-sque to me.) If only the GUI was revamped; it would be so much easier to mod it.

Pureon, if you could stretch it to be a bit more modern (muted tones, less "shiny"/web 2.0), it would be perfect with the new website theme I've been envisioning for a while :P

Keep in mind that this is a game set in a pre-modern world, where beauty was more than 'less is more' :) We wouldn't want a Starcraft/Crysis like GUI for this ;)

Share this post


Link to post
Share on other sites

Works pretty great, I must say. Obviously the buttons would need a rework too but I guess that's part of the WIP :)

I really like the marble aspect of the background, though I think making it slightly less white, combined with making windows slightly less black would be easier on the eyes.

I find the bottom bar to be a bit too prominent, particularly on small windows.

Still, solid work!

Share this post


Link to post
Share on other sites

I recommend that Pureon continue on this path for a while without too much nitpicking from us, to see where he leads. I'd rather not dilute his artistic direction with too much "design by committee" so I say, you go with yo bad self, Pureon. Let's see what you can do.

1 person likes this

Share this post


Link to post
Share on other sites

I recommend that Pureon continue on this path for a while without too much nitpicking from us, to see where he leads. I'd rather not dilute his artistic direction with too much "design by committee" so I say, you go with yo bad self, Pureon. Let's see what you can do.

:D This makes me happy. So far most, if not all, of the comments have been supportive of the overall concept, so we're in a fairly good place. As you guys know, I'm too busy most weekdays at the moment, so process will be slow for now. Gives me time to think.

Share this post


Link to post
Share on other sites

Wonderful!

(Unrelated note: "A N E" needs to be changed, it is not clear that it means "Ally, Neutral, Enemy")

Share this post


Link to post
Share on other sites

Good approach Pureon, thanks for revamping the UI that way !

Share this post


Link to post
Share on other sites

Keep in mind that this is a game set in a pre-modern world, where beauty was more than 'less is more' :) We wouldn't want a Starcraft/Crysis like GUI for this ;)

We can still have an "ancient-themed" GUI without overdoing it. I think a fine line exists between the two and Pureon is doing a fine job staying in balance. (And I wouldn't really call the Starcraft UI "minimalistic"; it seems a bit heavy on the textures.)

Share this post


Link to post
Share on other sites

(Unrelated note: "A N E" needs to be changed, it is not clear that it means "Ally, Neutral, Enemy")

Simplest solution: make the dialog wider so the text fits, or we could use angled/rotated text if the GUI engine supported it, or we could use icons if there are any obvious ones for Ally, Neutral, Enemy, It's one of those things a player really only needs to learn once, and then they understand the layout, so there's clearly a tradeoff.

Is there a better control than unlabeled checkboxes for selecting diplomatic stance in the first place?

Share this post


Link to post
Share on other sites

I'm glad to see an artist looking at this again. Your layout looks really nice. :)

I just used what I had available to make the existing theme. Many of the gold pieces are just the old bronze ones that I removed some of the red from. I wouldn't mind you replacing all the theme stuff I added, lol. I look forward to what you come up with. I don't know if I'll have time to implement it though. I'm sure someone will.

(One small request: I'd like the progress bars to revert back to flat ends. I think I came up the idea for the rounded ones and hacked it in. I've regretted it since then and it's never quite worked the way I wanted.)

1 person likes this

Share this post


Link to post
Share on other sites

Simplest solution: make the dialog wider so the text fits, or we could use angled/rotated text if the GUI engine supported it, or we could use icons if there are any obvious ones for Ally, Neutral, Enemy, It's one of those things a player really only needs to learn once, and then they understand the layout, so there's clearly a tradeoff.

I think the dialog should just be made bigger. Also, it would be nice to see chat history at the bottom with chat input. Perhaps the ability to choose different players to chat to.
Is there a better control than unlabeled checkboxes for selecting diplomatic stance in the first place?

A drop menu could work.

Share this post


Link to post
Share on other sites

Putting this here: I've added the ability to select items in dropdown menus by typing stuff with the keyboard (open the map menu, type "lorr", it gives you Lorraine plains"). I feel like it'd be nice to have, I'll post a patch when I get back home.

3 people like this

Share this post


Link to post
Share on other sites

Putting this here: I've added the ability to select items in dropdown menus by typing stuff with the keyboard ...

I missed that so much, well done!

Share this post


Link to post
Share on other sites

A drop menu could work.

Putting this here: I've added the ability to select items in dropdown menus by typing stuff with the keyboard (open the map menu, type "lorr", it gives you Lorraine plains"). I feel like it'd be nice to have, I'll post a patch when I get back home.

Big +1 to both of these.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now