2

I am very new to UI and Figma (I started this week). Im making a simple UI for a game set in ancient Rome.

Surprisingly I'm quite happy with my background UI, but as soon as I add text to my side panel, it doesn't look right, it looks dull. Since Im so inexperienced I dont know why, I just know I dont like it.

Each text is a button, can I improve this somehow? Sorry if this type of question is to broad.

enter image description here

enter image description here

2 Answers 2

2

Three solvable issues, all of which have to do with typographical variations that, in the end, are the generators of contrast.

  • Family
  • Size
  • Weight
  • Tilt
  • Broad
  • Color

In the image example, it's clearly seen that there is a font family chosen based on the content, although correct, it may not be the most appropriate in terms of contrast. I would use within the same family, one with greater weight: bold, extra-bold, or heavy.

Roman fonts are characterized by the serif and the modulation of strokes. The font used has a pronounced difference in thickness between the thin and thick strokes, which causes some illegibility. I would avoid any modern Roman fonts:

bodoni

On the contrary, look for a font with little stroke modulation like the ancient Roman ones:

enter image description here

Within the family variables, not only Roman fonts induce the concept of ancient or classic. It is possible to find the same idea in alternative families such as a round Gothic one or a calligraphic, slab serif fonts or a glyphic serif font:

Wittenberger

Cascade

Serifa

Friz

Benguiat

Finally, use some graphic resource so the text is not a simple addition and forms part of the background, standing out against it, for example using an outline:

outline

0

I would say it's because your text draws more attention than the game content, at least in your screenshots, maybe due to the overlay you added over the game graphics.

If there is no text, user's attention goes towards the background, even if it's muted. But when you add that bright text, user's attention goes towards the text, because that's the thing that stands out the most.

Normal text will always look dull compared to 3D graphics.

My suggestions would be:

  1. Grey out the text so it doesn't draw too much attention, but this might cause you accessibility issues, so be careful. This would be the "lazy" solution.

  2. Add some graphics together with the text so that they draw more attention than the text itself. You can use icons or fancy buttons or cards or whatever looks nice. You can also add animations and effects for better engagement. This is what most games do nowadays.

  3. Create a special text with animations and particles and fancy interaction effects, so that users can play with the text itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.