User Interface concepts

[Pureon]

Old and new button designs:

Everything apart from the texture and text is a photoshop effect/mask, making it easy to adjust.

The button size is a mask of a large background texture, so it can be scaled easily within Photoshop.

Here's a slightly more edgy example of the button design with a pressed (down) mockup:

Some colourful concepts for special occasions:

Lastly, some tick boxes:

As always, let me know if you like what you see. Feel free to comment below I might not respond to everyone's feedback, and for that I apologize, but it does help me make decisions even when it's contradictory.

[Yves]

I think the buttons look a lot better than before, well done!

The radio buttons look a bit like LEDs, but maybe it's just me.

[Loki1950]

I think the buttons look a lot better than before, well done!

The radio buttons look a bit like LEDs, but maybe it's just me.

So whats wrong with LED's they get the point across quickly and unambiguously.

Enjoy the Choice

[Lion.Kanzen]

Can try some rounded like those for icons. See the Main menu of Rome Total War II. civilization have other lite version for mobile.

[Yves]

So whats wrong with LED's they get the point across quickly and unambiguously.

I don't think the GUI has to look like it's made out of stone or something. But I would prefer something more neutral that doesn't look like a piece of semiconductor technology.

[fakeskins]

A smaller rounded interface with submenus would be excellent. as for design I think a stone one for civs that are famous for they`re sotneworks and architecture (romans ,spartans ,indians ,etc.) and wooden GUI for tribal like civs (gauls ,britons ,etc.)

[Mythos_Ruler]

The radio buttons are fine to me. Not sure how else you would do buttons like those. Great job Pureon. Now, to design the rest of the UI. Maybe we can start with a Game Settings page?

[Donner]

The new menu buttons look quite confusing. The gray colour of the stone texture make the buttons look as if the buttons are grayed out and unusable. My suggestion for the buttons would be that a different colour be used for the buttons. However, it is an improvement over the current UI. I quite like the brass frame around the menu buttons.

I can barely wait for a redesign of the HUD.

[Enrique]

The gray colour of the stone texture make the buttons look as if the buttons are grayed out and unusable.

I agree on this one.

I made a test with a window posted earlier on this thread and added the button to see the overall look, and I had the same impression, like the button is grayed/unusable:

[Lion.Kanzen]

Not for me, the text is white and non Gray as the button, I want to click it XD. The text can be unusable when have a layer gray over it.

[wraitii]

It looks disabled to me too. I would suggest trying a marble-like texture?

[Mythos_Ruler]

Probably just a lighter gray will do. Or go with yellow buttons.

[Lion.Kanzen]

I agree with Michael. Color can differenciate more.

[Pureon]

I prefer the gray to the yellow button - but I'll think about it for another few weeks

[s1lence]

Good work pureon!

I think that small caps would look good for the window titles.

The new buttons look really good.

I don't really like the gloss on the radio buttons, What does it look like with the gloss removed and maybe an inner shadow on the yellow?

Perhaps there should be check-boxes as well.

Also, I think that the ingame status bars are in dire need of a redesign.

[Jeru]

I agree with Michael. Color can differenciate more.

+1

[alpha123]

I like the look of the buttons but the color is rather poor as wraitii and Enrique outlined.

Perhaps just switch it to a gold texture, or some kind of marble as wraitii mentioned.

Quick mockup of the marble type (these are probably a little big, I think we'd want to scale them down) (not to mention loaded with issues, but you get the idea I'm going for, right?):

[Lion.Kanzen]

The metallic golden stroke in border fits with the concept. But is nice reference, but color full like match menu are best choice. I mean use color button red to cancel and green to Ok or Agree.

Maybe like this ones.

Edited September 19, 2013 by Lion.Kanzen

[alpha123]

Small:

Okay, I definitely like Pureon's version better than the marble. I still think the color needs to change though.

[s1lence]

How's this for the lobby scrollbar?

EDIT:

Here's an idea for marble buttons:

I think the colors look nice against cool grey, and the white stands out more too. (although that may be a bad thing)

I am creating these as svg so they are resolution independent, although not quite as detailed as pureon's

Edited September 20, 2013 by s1lence

[Josh]

How's this for the lobby scrollbar?

EDIT:

Here's an idea for marble buttons:

I think the colors look nice against cool grey, and the white stands out more too. (although that may be a bad thing)

I am creating these as svg so they are resolution independent, although not quite as detailed as pureon's

Those are pretty nice! I especially like the scrollbar. Might you be able to post the svg files so I could take a closer look?

[s1lence]

Those are pretty nice! I especially like the scrollbar. Might you be able to post the svg files so I could take a closer look?

Thanks! The forum software won't let me attach the files I will plop them in my ubuntu one account for you to access tomorrow afternoon, and set up layers/guides in the files because i was a bit lazy in creating them.

[GunChleoc]

I think I will have problems fitting my translation on that button: Start game = Tòisich air geama. You might find this article helpful when designing sizes for buttons etc:

http://www.w3.org/In...ticle-text-size

Here's their table on string length:

No. of characters
in English source		  Average expansion
Up to 10					  200–300%
11–20				  180–200%
21–30				  160–180%
31–50				  140–160%
51–70				  151-170%
Over 70				  130%

We also might need more height for non-Latin scripts.

I will be happy to do some size testing once there's a Windows build available for testing translations, since my language tends to have strings that are quite long.

Edited September 20, 2013 by GunChleoc

[s1lence]

When i took a closer look at pureon's mocks I noticed that the gold i was using was way too yellow, I adjusted the colors to use shades of gold from pureon:

[Jeru]

I feel "Start Game" should also be in the same gold, or in a lighter shade of gold.