Thoughts on my UI side bar


#1

com-video-to-gif
Just want opinions on their positions, colours.

Also any opinions on the next sliding out, as well as the image getting shadow (to highlight it more) Also thoughts on the top bar (when I click Gifts and Medals, look at the change in the top bar)


#2

I really like it!
I think it’s really clean and modern and I also like how you added the bottom shadow layer when the mouse scrolls over the UI, great job!


#3

I really like the minimalism, but my one issue with every menu bar is if I am unable to hide the menu :no_mouth:(maybe im too minimalistic), but overall I love the design :heart:


#4

I suggest adding some contrast to the buttons (such as a small black outline) to help distinguish them from the colours of three dimensional objects behind them. It might be hard to see the blue profile button, for example, when looking up at the sky.


#5

I like the minimalism good job on the UI.
Personally I think you should put some sort of frame popping up behind the icons to make it easier to see? Or just have it there fixed.


#6

I like the effect when you hover over it. But it should stand out a bit more before that even. Maybe adding a background to the side-menu; then making it able to be closed and re-opened.


#7

Very nice! Depending on the game, I might feel the icons are pretty big. But if it’s a game like a tycoon or mini-games it will work amazing for it!


#8

I would suggest adding a white background with round edges behind the buttons.
I like the effects though, nice job!


#9

I’d add a drop shadow on the buttons to give it some added flare. That way they stand out from the surroundings of the map.


#10

Amazing! I don’t think there has to be any changes except checking for bugs. It looks clean and slim as well. Keep it up! :ok_hand:


#11

Your UI is very commendable. I suggest you craft the UI to fade into a shadow instead of it immediately turning black in the background. You could use the code for i = to perform that action. The overall design is very intriguing, though.


#12

Hello!
I think they work really well, but I would put some type of black line around it so that players can distinct it from background colour, for example if the green cart is hidden within the green grass in the background, it’ll be a bit harder to spot than having one with lines out, it would really spark them out giving them a bit of more detail and efficiency!

:smiley: I hope it helps!


#13

How are you adjusting/scaling the sidebar to accommodate for mobile devices? If you ask me the current positioning seems a bit intrusive towards mobile control layouts. I would suggest watching the UX design video from RDC last year to gain more insight. I do like the design by the way. :+1:


#14

I have noticed this, for the moment I’m not gonna really do anything, as it only really affects the smaller mobile devices, but fits well with Tablet and PC which is the main demographic for the game


#15

Fair enough, but I do stress that it is something crucial to keep in mind in the future.


#16

Not really a fan of how it would look


Just ruins the feel imo


#17

Instead of doing that:

  • Try a black background instead of a white background.
    While it’s still not optimal, it’s a hold-over.
  • Stencil the edges of the icons to give them “pop” regardless of background.
    This approach works best when using very simple icons. It would be somewhat similar to your roll-over effect. Here’s an example of what I’m talking about:
    image
  • Another approach to the above would be to take more of a material design styled approach. Put them on a shaped background and then “holepunch” them. On roll-over, you could then color them, and use the shadow/movement as a backup for people who might be colorblind.

#18

Shop_Icon_Outline_4
I Tried something like this, but in game it made little to no difference (outline was incredibly faint.
Tried a black outline as well, but that just made it look like the normal scaling problem (the black outline thats usually created when scaling things.

Also, I should note that I use ImageColor3 in these Images, so I upload them as white icons, that way I can easily just change their colors in game without having to edit the original PNG


#19

ImageColor3 is a blessing.

The approach I take is if I have multiple layers on a button like that, I split it into what I want to get colored initially, then the “background”/edge layer is on its own. You do have to play with the weight of the outline, and sometimes you need to take a different approach to whatever icon you’re using if the weight of the outline looks ugly.

I will be honest here and say that having colored buttons like that on the outset doesn’t exactly play nicely with backgrounds that are pale or tend to wash out colors. That is part of the reason why I suggested using the black background for the drawer rather than white, as it would resolve the washing-out of the buttons. The other thing is that it may just be wiser to keep the buttons plain white until you mouse over them, or choose colors that are less likely to get blown out by the surroundings.


#20

It’s really good so far; I hope to see what you use it for, It’s very simple and clean. :+1: