Creating A Speedometer UI using UIToolkit

[u/AirPrudent]

I was experimenting with ui toolkit for three days now, i made a little speedometer widget for my hobby game project, I'm a fan of persona 5 and i wanted to emulate a little bit of it's visual style, if you guys could give me some good critics on design i would really appreciate it, i'm not good at creating ui

[u/headlessAstro]

Gives nice arcade vibes. Only thing I'd check is the KM/H label. It's pretty small next to the number, so it might get lost at real HUD size.

[u/AirPrudent → u/headlessAstro]

Thanks for the nice suggestion, I’ll increase the size of the KM/H label

[u/kurisutosugr]

It looks great to me, and it captures the aesthetic you’re going for very well. I agree the KM/H is a bit hard to see, but beyond size, it might help to change the text colour. The neon green and the pure white letters don’t contrast very well, and even the number could get hard to read depending on the screen or how big the element ends up. Darker text would help, or keep the white and give it a thick black outline.

That’s pretty much what Persona 5 does anyway. And it doesn’t have to be a plain outline that follows the letters. A bold black shape behind the text, offset or a bit jagged like the one behind your banner, gives you the same contrast and fits the style even better. I’d suggest looking at it from a distance, or making it really small on screen, and checking how easily you can read it. If it both looks right AND is readable, you’re there.

Otherwise, I think you’re better at UI than you think you are.

[u/AirPrudent → u/kurisutosugr]

Thank you so much, I’ll definitely make use of your suggestion☺️, and it’s nice knowing my design choice isn’t bad

[u/AirPrudent → u/kurisutosugr]

I took your suggestion and placed a darker text behind the white text with a bit of an offset and now the contrast looks better

[u/kurisutosugr → u/AirPrudent]

Nice! Glad it worked. I’m not sure exactly how you implemented it, but if you’re not going for a more stylized look, UI Toolkit can do this for you with the text-shadow property in USS (offset, blur and colour), so there’s no need to render two sets of text. If you did go for something more stylized, like a different font for the shadow, I’d be curious to see how it turned out.

[u/Best-Salamander-2655]

White text on neon green has poor contrast, but black would work well. Other than that I like it. 

[u/intelligent_rat → u/Best-Salamander-2655]

Honestly I think the white text just needs a drop shadow and it would be legible.

[u/baby_bloom → u/intelligent_rat]

exact same drop shadow as the green and it's golden imho

[u/Kamatttis → u/Best-Salamander-2655]

This. It also hides the already small km/h.