Jump to content

User Interface concepts


Recommended Posts

Old and new button designs:

ytAtm7V.png

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

KBHqI4V.jpg

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:

IJ3Ko6Y.png

Some colourful concepts for special occasions:

ixqDq2Q.png

Lastly, some tick boxes:

imeuMlQ.png

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?):

hlDOjYi.png

  • Like 1
Link to comment
Share on other sites

How's this for the lobby scrollbar?

lUsquKa.png

EDIT:

Here's an idea for marble buttons:

on81yMG.png

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

0YXaTOC.png

Edited by s1lence
Link to comment
Share on other sites

How's this for the lobby scrollbar?

lUsquKa.png

EDIT:

Here's an idea for marble buttons:

on81yMG.png

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

0YXaTOC.png

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?

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by GunChleoc
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...