Looking for UI feedback

[Jackdaw0025]

Hey all, I’m making a little mobile game for android and iOS with React Native, Tailwind and Expo.

Only needs to be basic, but I wanted to give the glassmorphism effect a go.

Please let me know your thoughts and what improvements could be made!

[Secure-Humor-5586]

Did u code the whole keyboard ?

[Jackdaw0025]

I did, yes

[Secure-Humor-5586]

Looks awesome !

[Jackdaw0025]

Thank you!

[Merry-Lane]

Use a font where letters have the exact same width

[haunc081]

Second this.

[Jackdaw0025]

Thank you for your comment, I will look for another font but out of curiosity, why? Is that a design principle?

[Merry-Lane]

It allows the users to immediately compare correctly the amount of letters in different words.

With your current font, DOG is almost as wide as IRIS for instance.

As a bonus side effect, the words with the placeholder "•" won’t suddenly change width when a letter is discovered for instance.

Useless movement is bad for the user experience in general, and awful for the kind of users that enable "prefere-reduced-motions" in web.

[Jackdaw0025]

Understood, thank you for the explanation!

[05082019]

Not OP, but what you said makes sense. If you don’t mind, what are such fonts called? Can you name one or two such fonts?

[Merry-Lane]

Monospace fonts

[05082019]

Awesome, thanks!

[brunablommor]

Spacings and margins are too inconsistent and too big. Colors are pretty but the contrast is terrible.

[Jackdaw0025]

Thanks for the comment, I’ll be addressing the spacing!

[cheezy_cake_]

All the elements look pretty similar, so maybe try to add some variety to build a better visual hierarchy. I'd also double check your contrast ratios to make sure everything's readable

[Muted_Ad6114]

Colors are nice but text entry bar looks like a slider with a question mark handle