How to change the design to be beautiful?

Question

css

Всем привет. Делаю небольшой локальный ресурс в стиле material design. Но есть небольшая проблема в дизайне.

"Последние тесты" и "Рейтинг группы" как по мне не сочетаются. Как лучше оформить данную страничку, чтобы было красиво и со вкусом?
P.S Сверху список пройденных тестов и какая оценка за каждый тест получена. Справа рейтинг на всем протяжении выполнения тестов. Снизу рейтинг всей группы. Расположен будет по возрастанию среднего балла. Как пьедестал почета с местами

Answer 1

Regarding the first option:
1. Headers of the blocks should stand out (since they are gray and small, they are slightly lost), you need to make them larger and possibly fatter or change the color (say, to black). The main thing is that the user should be visually clear what these blocks are.
2. you need to increase the distance between the "Latest tests" block and the "group rating" block, you shouldn't put them so close to each other
3. The last tests block - it's not clear that the red numbers can be a grade / score. You need to indicate this visually (for example, write a score / score: 4 - here you can show it in different ways, the main thing is to make it clear that this is a score, and not just a number).
- It is better to replace the red color of the score / score with another one, say black or turquoise, as the color of the icons. Since the red color will be too distracting. This is more of a subjective factor, here it's up to you.
4. Average score. Highlight the title, it's barely noticeable. Here I would fill the circle with a soft red color, approximately like the color of the stars (here it is more at my discretion, the main thing is to make it clear that this is a graph) and I would make the circle slightly thicker.
- the numbers in the circle need to be slightly reduced.
5. Block "Group rating". Icons - if you take material design as an example, then it is better to follow the style itself, for example https://www.iconinder.com/search/?q=reward&type=v...
it is better to remove and reduce the shadows of the icons (since they already stand out by themselves (due to the color), it's okay if they are smaller). The main thing is to highlight the names of the winners, make them bigger, like the score itself. As for the color of the goblets, you can experiment, the main thing is not to get out of the general style)
6. Perhaps, as people mentioned earlier, it is worth placing the goblets from left to right (gold, silver, bronze). Since we read from left to right, it will be correct from the point of view of usability, but this is a subjective assessment)
7. Rating of other people. Asterisks are better not to do, as they divert attention to themselves, here the emphasis is on people, or rather on their names and rating / score. The main thing is to be able to see what place, who took it and what score he has. The rest of the elements will be redundant.
As for the second option:
this is not a sporting event (if I understood correctly :)), but rather the sphere of education, therefore I personally do not see the point in the pedestal (but this is my subjective assessment). In any case, this pedestal draws too much attention to itself, and on a page where there is a lot of information, it is better not to do this. Therefore, the first option fits better)

Answer 2

Well, it's all a matter of taste, of course. )
1) Group ratings (cups) take away the view. Maybe it's better to swap them with the latest tests.
2) The left cup (gray) looks like an inactive picture. Perhaps it makes sense to line them up in order 1st place, 2nd place, 3rd place. We read from left to right. Due to the increase in the picture, it was not possible to achieve the positioning of the first place.
3) Perhaps this is just a template, but still 4 out of 4 will give an average score of 4. If you summarize the results that are not displayed, then it is better to take out the Average score separately. Yes, and the numbers 4 are too pressed to the average ball. First, the average score will go, and below (or on the right) there is already a list that influenced the average score.

Answer 3

I would change the actual cups, because. their design looks gaudy (red star on yellow? seriosly?) and out of style. Plus, they're too big, especially the yellow ones. slightly reduce, make more adequate colors, and highlight the winner more calmly - for example, by increasing the middle block itself by 5-10 pixels.

Answer 4

experiment no. 1000 failed