How does this slider menu look?

Hey guys, so for quite awhile I’ve been working on releasing an entire new UI system, which I finally was able to do. Although, for the main menu screen, I’m gonna need to be able to fit in more buttons for different features or what-not. Aka; achievements, tutorial, etc…

Just wanted to hear your guys’ thoughts on how this looks. Took a lot of extra time to center everything out and make the slider bar symmetrical so when you slide to the max it only shows you the two rows of buttons on that part of the frame. Like, that’s all it shows you, not like a few pixels of a button that’s been cut off.

Here’s a link to a gyazo gif of it functioning:

Thanks guys!

20 Likes

The ui looks great, but my only suggestion is the maybe change the text to the bottom,

6 Likes

The UI that you have created looks great! The only change I would make is to change the size of some of the texts in the inner shop options. Some of the names, such as the “Updates” one, seem to be a little bigger in size then the rest I believe that you can change this to be more symmetrical to the rest by making the text box bigger or smaller than the actual square it is in, since if the background is visible it should change the sizing but look as if it still perfectly fit in the box. This is one of the cleanest UI I have ever seen, and I can see no major flaws, so great job!

10 Likes

Packs show up twice. Triggering my OCD. But the UI looks pretty nice, the icons fit well.

3 Likes

Ahh it looks amazing! I tried your bowling sim. game and really loved it! This makes me extremely excited!! :slight_smile:

1 Like

I love the UI; you never dissappoint :smile: Maybe the only thing I request you to improve on is to have rounded corners (to look more professional), and possibly messing around with other types of text (as the current one is a bit generic). Other than that, superb job man! :ok_hand:

1 Like

I’d start with moving the text to the bottom and changing the font to something more cartoony. I’d also shift “Bowling Simulator” more towards the bottom left corner.
The icons all together have different heights and sizes, which triggers me a lot so I’d also work on that.

2 Likes

Thanks for all the wonderful feedback guys! Really appreciate it. Will definitely take these ideas into consideration for further improvement. :slight_smile:

2 Likes

it looks great!
But i think a smoother movement for the slide would make it even better!

2 Likes

The UI itself is straightforward and has a nice, flat design. However, to give it more dimension and appeal I suggest programming some interactive qualities such as hover effects, click effects, and shadow effects, etc. Good luck! :octopus:

3 Likes

Why are rounded corners automatically associated with being “professional”?

I have seen so many people say stuff like this and I am not sure why, since sometimes having normal corners looks better depending on the situation and the style the UI designer is going for.

4 Likes

Rounded corners, in my opinion, would be perfect for this UI, as it is easier for the eyes and more eye-catching, and focuses the attention on the UI, compared to sharp corners. Especially since it is in a grid fashion, it seems to suit it even more. (I would not have mentioned rounded corners if it was a list format or some other format.)

In addition, there is a widely accepted opinion that it represents a more modern and simple look. To the players, it represents a sense of optimism and can be the difference between a click and no click. It seems more natural to have rounded UI, as we are used to seeing rounded objects as something pleasing to look at than sharp (cornered) objects.

Let’s take this picture for example:

image

Tell me, which picture you would look at, the first one, or the second one? The first one seems out of place, correct?

Making that extra effort to improve and provide Quality UX is the way to go with game developing, as players generally look for a game that is pleasing to them. The smallest of differences can make players think like, “Wow. This really makes me feel happy and lively.”

You might be wondering, there are many ways of achieving this, no? Unfortunately, not all the hard work we developers do is seen and appreciated by the player, so we must start with the aspects that directly is seen and interacted with the player. In this post, it is UI I am mentioning

Sorry if I had said anything incorrect, please correct me if I did.

1 Like

Outstanding UI design, I love it! In my opinion it would make more visual sense if the scroller bar was lighter in color, than the inset frame behind it. Technically the scroll bar is in front of the holder, so it should be outstanding and brighter. Love the UI in any case, keep up the good work! Cheers :v:

4 Likes

That image example is heavily biased - there’s much more visual noise in the sharp corner example. You should have just gone with squares imho.

Also, rounded rectangles are not a silver bullet. The use of rounded rectangles is down to the discretion of the designer; as long as you have a consistent design language, the use of rounded rectangles will have little to no impact on the user experience. It’s largely an aesthetic choice, especially when you take into account other factors such as colour.

This is not true. Many people hate rounded corners with a passion. Personally, I like my corners tighter, but I’ve seen people who are much more opinionated than I am (hello Microsoft)

This post is heavily biased and does not properly account for both arguments.

2 Likes

Again, these were recommendations. I do not want to derail this thread, so I will not speak further of this.

I made the post with the intention to prove why rounded UI was ideally more effective than sharp-cornered UI. I was not making comparisons/contrasts on purpose, as it was not the intention of the post. So you may think of it as biased, but I think of it as persuasive.

Looks great!

1 Like

Looking nice :sunglasses:

1 Like