How can I make my stopwatch UI better?

Greetings! I created a revolutionary stopwatch that looks something like this currently:
image

It works really similar to a real stopwatch like this:

However, I am not impressed with the UI design. How can I make the UI look a lot better?

Thanks in advance!

I have made the stopwatch look a lot more like the existing UI in the game, and added some tabs on the side since that is what a Stopwatch looks like.

Anything else that I should add to it?
image

Can we get a general look of what your other UI looks like? It’d be easier to know what style you’re going for.

If you’re going for a simple look though, I’d keep the other parts (the buttons and circle) the same color.

The circle in the middle isn’t really circular either as it appears to have some sides to it :thinking:
If you’re using a UI corner, make it max out to make it a complete circle or just use a circle image instead.

The text seems out of place as well, I can also see it being conflicting when the red hand goes underneath the time adding visual clutter, you can try moving it below the stop watch to free up some space. (Try to also prevent the text from changing sizes by using text offset sizing rather then textscaled, might require some mangling around to get it working on different screen resolutions though)

Otherwise, the simple stopwatch is actually pretty fine all things considered. Something to add that can maybe give it a cooler look would be a trail behind the red hand with a fade (though don’t add this if it doesn’t fit in with the style of your UI, its your decisions and choices after all).

Keep it up, looks and functions pretty well so far :+1:

Didn’t think I would like it, but I like it a lot better. Thanks for the suggestion.
image


Is UICorner really this broken? I already have it at 1, 0…
Edit: It was Studio doing some resolution stuff. After setting a higher resolution, it looks good:

Are you sure? I don’t really see it being that bad tbh.
image

1 Like

If I were you, I would try and make some scale marks/lines inside the stopwatch (doesn’t have to be accurate). It’s a feature that almost every stopwatch has. Use this image as inspiration.
image

Hey, I can’t see your image. Do you think you can try sending it again?

Oop sorry about that

All good.
How is this?
image

And yes, I made them accurate. The red spinny thing is accurate, so I used the same math equation to make the tick marks accurate.

Your stopwatch already looks a bit more realistic!

1 Like

At UI stroke on the borders to make it pop!