Jump to content

shiny - alternative main menu & UI theme


maroder
 Share

Recommended Posts

9 hours ago, ffffffff said:

Maybe the logo without the grey background halfoverlapping the background in the upper Bar? or is in design terms depending on the background image that maybe a mismatch? just curious.

screenshot0055.png.e768bec166a68928171c59da57ea24c8.png

It's possible, but I like it more with a background. Also not sure what to do with the lines on the left and right side in this case.

Link to comment
Share on other sites

On 17/01/2022 at 8:05 AM, nwtour said:

In a non-Latin interface, this text looks extremely non-native

 

On 17/01/2022 at 9:23 AM, Stan` said:

He meant russian or asian chars. :) In an old game of mine they'd have all the art assets ready and it'd change depending on the locale.

Well, that's a good question: Is the 'Empires Ascendant' part of the logo and should look the same all the time (latin letters, saved as png) or is it more of a description / title that is made up of strings, which could be translated to other languages/ alphabets?

Link to comment
Share on other sites

51 minutes ago, vladislavbelov said:

Seems like designed for mobiles, not PC displays. Eyes have to walk for a long distance to find important buttons. Which leads to Brownian motion of eyes.

Thanks for the feedback!

Kind of true, that's part of the design.

I can only say that I always have the mod enabled, because the old layout is a bit too small and complicated for my liking.

Arguably there are only very few important buttons a player uses frequently (especially a new player). That's why I decided to put the buttons to start a game prominently in the middle of the screen. Without having data to prove it, I think this is the first thing you see when looking at the page, which I think is important.

That the top menu is very stretched out is a bit unfortunate, but I would argue that this is the standard layout of most desktop programs. Every browser / office software / 2D/3D art software ect. I have ever used, has a top menu which holds the options. Especially the exit button on the top right corner is what I would call "standard". So according to Jakobs law https://lawsofux.com/jakobs-law/ it is a good idea to copy that design decision as users are already used to it.

The bottom menu could be placed elsewhere, those are the less important buttons imo, my only goal was a symmetrical layout. So they could also be columns on the left and right, but I think this doesn't address your concern that everything is far apart.

So overall I would say I like this design, because it clearly separates the thematically similar functionalities, which makes navigation easier for me. You got your options at the top, the game buttons in the middle and informational elements at the bottom. And it is only one click to get to the mod page, which I use very frequently.

But yes a looks a bit like it's made for mobile :D

Edited by maroder
  • Like 1
Link to comment
Share on other sites

3 hours ago, maroder said:

Arguably there are only very few important buttons a player uses frequently (especially a new player). That's why I decided to put the buttons to start a game prominently in the middle of the screen.

By the way if the exit button is not so important, is it VIM? :D

3 hours ago, maroder said:

That the top menu is very stretched out is a bit unfortunate, but I would argue that this is the standard layout of most desktop programs. Every browser / office software / 2D/3D art software ect.

I suppose it's not so stretched. It's aligned to the left (right if RTL) with a fixed padding. Which a bit different type of layout in UX.

Blender:

image.png

Office:

image.png

Browser:

image.png

The problem with your approach is that you need to skip by eyes a lot of empty spaces to find the each next visual anchor (button text).

3 hours ago, maroder said:

Especially the exit button on the top right corner is what I would call "standard".

macOS users :welcome:

4 hours ago, maroder said:

So overall I would say I like this design, because it clearly separates the thematically similar functionalities

I agree that the grouping is a good thing. Though I believe that it needs to be grouped in a more natural way, without a lot of empty space.

  • Haha 1
Link to comment
Share on other sites

33 minutes ago, vladislavbelov said:

macOS users 

well they choose to pay for the quirks :D

33 minutes ago, vladislavbelov said:

I agree that the grouping is a good thing. Though I believe that it needs to be grouped in a more natural way, without a lot of empty space.

different ideas welcome â„¢

Also, you mean the empty space within the different menus (i.e. learn to play -> Single-player) or between them (top menu, center menu)?

Edited by maroder
Link to comment
Share on other sites

6 hours ago, maroder said:

It's possible, but I like it more with a background. Also not sure what to do with the lines on the left and right side in this case.

Yeah that's true just I am missing some balance in the whole picture because it seems that there is some gradient at the bottom of the screen what I really like but its missing at the top. Maybe adding it as a slight idea to the top panel too in some manner? Not that I wouldn't like the flat design just as an idea to get more perspective depth ;-). much love <3

Edited by ffffffff
  • Like 1
Link to comment
Share on other sites

7 hours ago, maroder said:

True, the width should be uniform.

screenshot0058.thumb.png.72c1393bcc07913b10088fb4a19fbdde.png

Extending the edge of the logo towards the top of the screen means also lowering the bottom part of the box to keep it symetrical. So the box looks a bit bigger this way. The other option would be to not center the logo at the bottom off the top menu:

screenshot0060.thumb.png.63e3c3ffead0af2c6f5e3601a4c43b7f.png

I very much like this design, I would like Empires Ascendant to be put below 0ad logo with smaller font and because it is a name and thus it should not be translated. The only drawback I see is that I would put the single-player, multi-player and learn to play in this order to the side because I would like to see the beautiful artwork, just an opinion. 

  • Like 1
Link to comment
Share on other sites

8 hours ago, maroder said:

Well, that's a good question: Is the 'Empires Ascendant' part of the logo and should look the same all the time (latin letters, saved as png) or is it more of a description / title that is made up of strings

IMHO The name 'Empires Ascendant' is not part of the interface - as it is the name of one of the game's many mods

If you enable a third-party mod and disable mod "0ad" - the display of hardcoded line 'Empires Ascendant' will be an error. Should display "Description of my super mod"

 

  • Like 1
Link to comment
Share on other sites

On 17/01/2022 at 9:39 AM, wraitii said:

You could perhaps push the middle-button-row a little higher (have it split the screen â…“ - â…”), this would leave more room for the background, and possibly any information we might want to show there.

If moving to the side due to ultra wide screens is undesirable this is the the next best solution to preserve art. Dead center is almost always problematic. I agree on this one.

  • Like 1
Link to comment
Share on other sites

You could probably use javascript to make the width of the top-bar only extend up to a certain point, and then just have empty space on either side. This would fix Vlad's problem I think.

I agree with wow, the square-box-single-line design is kinda boring for the 0 A.D. box now. I disliked the original because it looked inconsistent IMO, but now it's boring. As a matter of fact I think wow's design here is best so far, but perhaps just extending upwards instead of being closed.

I would definitely go with the 'not center the logo at the bottom off the top menu' option, which looks much better than the bigger box IMO.

I agree about the 'Empires Ascendant' text, but since I suggested moving the buttons upward, I would suggest putting it below the buttons (Edit -> that being said, maybe moving the buttons further down is better? Seems like it would be for DE's main menus anyways).

  • Like 1
Link to comment
Share on other sites

2 hours ago, wowgetoffyourcellphone said:

then the other artwork needs taken into account too

very true.

40 minutes ago, wraitii said:

I agree about the 'Empires Ascendant' text, but since I suggested moving the buttons upward, I would suggest putting it below the buttons (Edit -> that being said, maybe moving the buttons further down is better? Seems like it would be for DE's main menus anyways).

Not a good idea since there is a drop down menu that opens to the bottom. That's why I generally wouldn't want to move the center menu lower then half of the screen.

42 minutes ago, wraitii said:

You could probably use javascript to make the width of the top-bar only extend up to a certain point, and then just have empty space on either side. This would fix Vlad's problem I think.

sure, would be possible, but I'm still not 100% sure if they were referring to the space within or between the menus.

Link to comment
Share on other sites

1 hour ago, hyperion said:

the super ultra wide display

true. It's just hard to come up with a design that works equally well from 3,440x1,440 to 1024x768.

Best would be to just center everything around the vertical axis -> but that also covers most of the art and would be very crowded with the many buttons there are.

If someone wants to show me a draft of how they would imagine it I would be _very_ interested

Link to comment
Share on other sites

7 hours ago, wraitii said:

You could probably use javascript to make the width of the top-bar only extend up to a certain point, and then just have empty space on either side. This would fix Vlad's problem I think.

draft.thumb.png.43214053d47af9fdc03b95a4faa916bd.png

The left and right seems a bit empty

Note: this is fixed width, meaning that this would look different on all screen sizes. Bigger screens would have more empty space on both sides, while the min resolution has no empty space.

Edited by maroder
  • Like 4
Link to comment
Share on other sites

24 minutes ago, maroder said:

The left and right seems a bit empty

Note: this is fixed width, meaning that this would look different on all screen sizes. Bigger screens would have more empty space on both sides, while the min resolution has no empty space.

I would definitely keep extending the top border over the whole top regardless.
Also IMO definitely worth considering JS to extend it, the buttons taking two lines instead of one makes it much uglier.

I also rather dislike what's happening in the bottom corners on the 0 A.D. box, but I think it's the same as the one I complained about lol. Wow's design didn't have that and it looked much better IMO.

Link to comment
Share on other sites

1 hour ago, wraitii said:

the buttons taking two lines instead of one makes it much uglier

indeed, but that's always the case at the minimum resolution. Only option would be to make the font smaller (which I don't want to do).

1 hour ago, wraitii said:

I would definitely keep extending the top border over the whole top regardless.

And having nothing on there?

 

1 hour ago, wraitii said:

I also rather dislike what's happening in the bottom corners on the 0 A.D. box, but I think it's the same as the one I complained about lol. Wow's design didn't have that and it looked much better IMO.

Yeah it's the same one, just shifted to the top. See, the problem is the that the pictures wow posted were just the first design I did with those double lines. But then I asked @Stan` and @wowgetoffyourcellphone how they liked it or if they would prefer one of my other drafts and they both choose the current design you don't like.

So ... you see my problem? Kind of going in a circle :/

  • Like 1
Link to comment
Share on other sites

11 hours ago, wraitii said:

I also rather dislike what's happening in the bottom corners on the 0 A.D. box, but I think it's the same as the one I complained about lol. Wow's design didn't have that and it looked much better IMO.

Wow's one here has some nice lines. ;)

0ViSdq7.jpg

 

I'm a sucker for Art Deco though. ;) 

 

EDIT: I prefer the 0 A·D· logo though, as opposed to one without dots.

Edited by wowgetoffyourcellphone
  • Like 1
  • Haha 1
Link to comment
Share on other sites

  • maroder changed the title to shiny - alternative main menu & UI theme

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