Thoughts on UI design?

Help and Feedback Art Design Support
#1

I’m having trouble determining how to make my UI look coherent across all elements.

If we look at the 5 buttons at the top, this is what I originally had

RobloxScreenShot20190921_122913900
RobloxScreenShot20190921_1229139001920×1017 228 KB

I just used 2 circular images, resized one to be in the centre (white part) and then the other was bigger to create a border.
I then decided to completely redo it all in paint and got this
image
image1565×880 500 KB

Which I think look good

However if I try replicating this circular idea on say a close button (which is a different size) it means that the border around the edge is different and thus creates differences in the sizes of the borders of the UI

image
image1565×880 293 KB

The close button looks really ugly to say the least.

So I want opinions and thoughts on how games can use custom UI made in paint/photoshop and get it to be consistent across every single UI element. And how a game like say MeepCity can get a constant close button size even with different frame sizes

RobloxScreenShot20190723_135225333
RobloxScreenShot20190723_1352253331920×1017 633 KB
RobloxScreenShot20190723_150502021
RobloxScreenShot20190723_1505020211920×1017 487 KB

11 Likes
#2

It reminds me of meepcity and adopt me, its really nice but could be bigger. Its colorfull, cartoony… Though the icons at the top could be closer to eachother, Great work :yum:

#3

Made some changes, thoughts on which option is better?

RobloxScreenShot20190922_184141057
RobloxScreenShot20190922_1841410571100×759 321 KB

1 Like
#4

Personally I prefer the second option (the one of the right).

But if your going to stick with the left one, shift the name (OnlyTwentyCharacters) down so it fits perfectly in the middle of the the title and the main section of the UI. At the moment it looks off centered.

#5

I think the second one is more clean imo. Should use the other 2nd one.

#6

Minimalistic and simple is nice but i feel like its a bit too empty partially because of how small it is. Other than that it looks nice and i’d say the second one too.

#7

The ‘two people’ button looks a bit odd, I made an example of what would look better. Besides that everything looks great!

PErsonthing
PErsonthing1080×1080 57.2 KB

1 Like
#8

Oh yeah, That does look nicer.

#9

I’d say the 2nd option, the 1st doesn’t look right to me. I think the second goes well with the color pattern.

#10

Worth noting that since the screenshots were taken in studio it squishes them so they look skinnier in studio

image
image1920×1080 700 KB