Good night fellas, i'm not an expert in design, ux ui, etc, my main field is more toward back end, so i would like to ask, how can i improve this page? It's the main page of a Saas i'm developing with a couple friends, and i would like some tips to make this cleaner and prettier, i also left one of the lines open so you can see how it's like.

enter image description here

1 Answer 1


firstly, very cool that you pay attention to want your frontend part looks like, that's important:).

Secondly, to give some good advise in UX we'd need also the background of the design, what are we looking at? What's the purpose of the panel (I assume showing the results of the matches, but then why goals have fractals).

From the first sight it's pretty hard to understand what is what, but it might I don't understand the language. But couple of things I'd try to fix:

  1. spacing in [x] VS [x] is pretty weird, I understand you wanted to keep the spacing across all table rows, but it still could be a bit more closer.
  2. Keep the same font size for same group items. In this example it would be values for "Resultato", "Gols", "Dica"
  3. Keep icons of the clubs on the same side, either start or the end.
  4. Not sure what resultado 1x means, but you can think of the space it will take and box them a little bit closer (Resultado, gols, dica) enter image description here
  5. Use one same font everywhere for simplicity.
  6. If the match is live, consider putting small red dot or red dot + "live" next to the date.
  7. I really like that you used your primary purple colour for labels, but it can also affect legibility and cause a bit chaotic feeling. Consider using transparency on a regular white colour, maybe 40%?
  8. Date also doesn't have to be that far in the middle, move it more toward the right corner, unbold it (it's secondary infomartion so it doesn't have to be bold).

Example of after and before: enter image description here

  1. For the menu consider also fading out inactive items, this way it's super clear in a glimpse which tab you're currently on :)

enter image description here

Hope it helps, but feel free to dig more. You can also check plenty of places to find inspiration - Pinterest, Behance, Dribbble (but be careful here because dribbble designs tend to loose personal touch, just get inspired :) )

  • Just woke up and saw your answer, thanks for your tips, i'll try to implement them into the website, the way you changed the match row looks very good, thank you :)
    – amorim
    Commented Jan 29 at 12:29

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