Light Style© by Fisana

Jump to content


Photo

User Interface concepts


  • Please log in to reply
177 replies to this topic

#1 Pureon

Pureon

    Primus Pilus

  • 0 A.D. Art Team
  • 3,659 posts

Posted 21 April 2013 - 04:00 PM

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:

Posted Image

Posted Image

Posted Image



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


Here are the windows using the new UI theme:

Posted Image

Posted Image

Posted Image


On flat white and black backgrounds:

Posted Image


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! :)
  • 12

Pureon
0 A.D. Part time Designer / Texturer / 3D Artist
Contact email:
pureon{@}wildfiregames.com


#2 leper

leper

    Centurio

  • WFG Programming Team
  • 612 posts

Posted 21 April 2013 - 04:13 PM

: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.)
  • 0
Georg Kilzer [ aka leper ]
Wildfire Games Programmer
Contact me: leper@wildfiregames.com

Support Wildfire Games!

#3 Shield Bearer

Shield Bearer

    Primus Pilus

  • WFG Retired
  • 1,621 posts

Posted 21 April 2013 - 04:22 PM

This. Is. Awesome!!! To quote leper: " :jawdrop: "
It's so elegant, it's so sauve, its just spectacular!
  • 0

Amish Coelho [aka Shield Bearer aka gAMeboy]
Wildfire Games Art Department
Contact me: amish13@gmail.com
AIM handle: Mythgamer
MSN Account: amish13@live.com


"The fate of 0 AD is in the hands of those who have vision and perseverance." - Ken Wood


#4 zoot

zoot

    Primus Pilus

  • Community Members
  • PipPipPipPipPipPip
  • 1,562 posts

Posted 21 April 2013 - 04:29 PM

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, 21 April 2013 - 04:38 PM.

  • 0

#5 Yves

Yves

    Primus Pilus

  • WFG Programming Team
  • 1,028 posts

Posted 21 April 2013 - 04:53 PM

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.
  • 0

#6 Shield Bearer

Shield Bearer

    Primus Pilus

  • WFG Retired
  • 1,621 posts

Posted 21 April 2013 - 05:16 PM

Oh, and maybe the bottom 'scrolls' could point down, instead of up :)
  • 0

Amish Coelho [aka Shield Bearer aka gAMeboy]
Wildfire Games Art Department
Contact me: amish13@gmail.com
AIM handle: Mythgamer
MSN Account: amish13@live.com


"The fate of 0 AD is in the hands of those who have vision and perseverance." - Ken Wood


#7 Pureon

Pureon

    Primus Pilus

  • 0 A.D. Art Team
  • 3,659 posts

Posted 21 April 2013 - 05:25 PM

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)
  • 0

Pureon
0 A.D. Part time Designer / Texturer / 3D Artist
Contact email:
pureon{@}wildfiregames.com


#8 quantumstate

quantumstate

    Primus Pilus

  • WFG Retired
  • 1,150 posts

Posted 21 April 2013 - 05:50 PM

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

Jonathan Waller [ aka quantumstate ]

Wildfire Games Programmer
Contact me: jonathanmarkwaller at gmail dot com


Support Wildfire Games!


#9 feneur

feneur

    Cartographer of imaginary worlds

  • 0 A.D. Project Leader
  • 7,986 posts

Posted 21 April 2013 - 07:08 PM

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 :)
  • 0

Erik Johansson [ aka feneur ]

Wildfire Games
Contact me: feneur@wildfiregames.com



Support Wildfire Games!


#10 Mythos_Ruler

Mythos_Ruler

    Senator

  • WFG Retired
  • 14,967 posts

Posted 21 April 2013 - 07:46 PM

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)
  • 0

#11 MishFTW

MishFTW

    Primus Pilus

  • Web Development Team
  • 1,923 posts

Posted 22 April 2013 - 02:46 AM

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
  • 0
Mish [Adarash Mishra]
Wildfire Games Webmaster
Email Me | About Me

#12 Shield Bearer

Shield Bearer

    Primus Pilus

  • WFG Retired
  • 1,621 posts

Posted 22 April 2013 - 03:04 AM

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 ;)
  • 0

Amish Coelho [aka Shield Bearer aka gAMeboy]
Wildfire Games Art Department
Contact me: amish13@gmail.com
AIM handle: Mythgamer
MSN Account: amish13@live.com


"The fate of 0 AD is in the hands of those who have vision and perseverance." - Ken Wood


#13 wraitii

wraitii

    Primus Pilus

  • WFG Programming Team
  • 1,666 posts

Posted 22 April 2013 - 05:51 AM

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!
  • 0
Lancelot de Ferrière le Vayer [ aka Wraitii ]
Wildfire Games Programmer, AI developer, auxiliary map designer, dealing with anything water.
Contact me: wraitii@wildfiregames.com

Also the world's only three-dimensional poodle.

#14 Mythos_Ruler

Mythos_Ruler

    Senator

  • WFG Retired
  • 14,967 posts

Posted 22 April 2013 - 07:42 AM

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

#15 Pureon

Pureon

    Primus Pilus

  • 0 A.D. Art Team
  • 3,659 posts

Posted 22 April 2013 - 02:00 PM

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.
  • 0

Pureon
0 A.D. Part time Designer / Texturer / 3D Artist
Contact email:
pureon{@}wildfiregames.com


#16 Jeru

Jeru

    Factotum

  • Web Development Team
  • 4,990 posts

Posted 22 April 2013 - 03:35 PM

Wonderful!

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

Aviv Sharon [ aka Jeru ]

Wildfire Games 0 A.D. PR & Social Media Contributor
Contact me:
E-mail & Google Talk: aviv dot sharon at gmail dot com
MSN: lc_jerusalem at hotmail dot com
Facebook, Twitter, LinkedIn


#17 Ludo38

Ludo38

    Centurio

  • WFG Retired
  • 727 posts

Posted 22 April 2013 - 10:18 PM

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

Ludovic Celle "Ludo38"
I do : layout on Inkscape, photomanip on Gimp and 3D on Blender

"I want to do good. I want the world to be better because I was here."  Will Smith
-my portfolio website-my DeviantArt -my FB -my Twitter
-my Pinterest  -my Linkedin -


#18 MishFTW

MishFTW

    Primus Pilus

  • Web Development Team
  • 1,923 posts

Posted 22 April 2013 - 10:30 PM

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.)
  • 0
Mish [Adarash Mishra]
Wildfire Games Webmaster
Email Me | About Me

#19 historic_bruno

historic_bruno

    Primus Pilus

  • WFG Programming Team
  • 2,491 posts

Posted 22 April 2013 - 11:43 PM

(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?
  • 0
Ben Brian [ aka historic_bruno ]

Wildfire Games Programmer
Contact me: ben [at] wildfiregames [dot] com

#20 WhiteTreePaladin

WhiteTreePaladin

    Primus Pilus

  • WFG Retired
  • 1,666 posts

Posted 23 April 2013 - 12:40 AM

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

Brian [aka WhiteTreePaladin]

0 A.D. Gameplay and UI Developer