Как изменить дизайн, чтобы было красиво?

Question

[mozart1337]

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



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

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

Answer 1

[Igor Vakulenko]

Касательно первого варианта:
1. Заголовки блоков должны выделяться (так как они серые и маленькие, то они слегка теряются), нужно сделать крупнее и возможно пожирнее или цвет изменить (скажем на черный). Главное чтобы пользователю было визуально понятно что это за блоки.
2. нужно увеличить расстояние между блоком "Последние тесты" и блоком "рейтинг группы", не стоит их так близко лепить друг к другу
3. Блок последние тесты - не понятно, что красные цифры могут быть оценкой / баллом. Визуально это нужно указать (например, написать оценка / балл: 4 - тут можно по разному это показать, главное чтобы было понятно, что это оценка, а непросто цифра).
- Красный цвет оценки / балла лучше заменить на другой, скажем черный или бирюзовый, как цвет иконок. Так как красный цвет слишком будет отвлекать на себя внимание. Это больше субъективный фактор ), тут на твое усмотрение.
4. Средний балл. Выделить заголовок, он еле заметен. Вот круг я бы залил мягким красным цветом, примерно как цвет звездочек (тут больше на свое усмотрение, главное чтобы было понятно что это график) и сделал бы слегка толще круг.
- цифры в круге нужно немножко уменьшить.
5. Блок "Рейтинг группы". Иконки - если берешь за пример material design, то лучше соблюдать сам стиль, к примеру https://www.iconfinder.com/search/?q=reward&type=v...
тени иконок лучше убрать и уменьшить (так как они сами по себе (благодаря цвету) уже выделяются, ничего страшного если они будут меньше). Главное выделить имена победителей, сделать их крупнее, как и сам балл. Насчет цвета кубков можно экспериментировать, главное чтобы не выбивалось из общего стиля )
6. Возможно, как упоминали ранее люди - стоит разместить кубки слева направо (золото, серебро, бронза). Так как мы читаем слева на право, то с точки зрения юзабилити это будет правильно, но это субъективная оценка )
7. Рейтинг других людей. Звездочки лучше не делать, так как они отвлекают на себя внимание, тут акцент на людей, а точнее на их имена и оценку / балл. Главное, чтобы было видно, какое место, кто его занял и какой у него балл. Остальные элементы будут лишними.

Что касается второго варианта:
это не спортивное мероприятие (если я правильно понял:)), а скорее сфера образования, потому смысл в пьедестале лично я не вижу (но это моя субъективная оценка). В любом случае этот пьедестал отвлекает на себя слишком много внимания, а на странице, где есть много информации, лучше такого не делать. Поэтому первый вариант вписывается лучше )

Answer 2

[Антон Агальцов]

Ну это все вкусовщина конечно. )

1) Рейтинги групп (кубки) отнимают взгляд. Может их лучше поменять местами с Последние тесты.
2) Левый кубок (серый) выглядит как не активная картинка. Возможно имеет смысл их выстроить по порядку 1 место, 2 место, 3 место. Читаем мы все таки с лева на право. За счет увеличения картинки не удалось добиться позиционирования первого места.
3) Возможно это только шаблон, но все же 4 из 4 даст средний бал 4. Если вы суммируете результаты, которые не отображаются, то лучше Средний бал вынести отдельно. Да и цифры 4 слишком прижаты к среднему балу. Сначала будет идти средний бал, а ниже (или справа) уже список, который на средний бал повлиял.

Comments

[mozart1337]

Спасибо за ответ. Последние тесты и средний балл за все пройденные тесты (не только за первые 4) должны отображаться первыми элементами, т.к. рейтинг группы это уже информация не такая важная. Есть один вопрос, как вынести средний балл? (вопрос только про стилистику, что-то типо где лучше расположить и т.д)

[Антон Агальцов]

mozart1337: Лично я бы, сделал так: Средний бал перенес бы на лево. А список последних тестов на право и сделал бы в них скролл.

Answer 3

[Алексей Николаев]

Я бы поменял собственно кубки, т.к. их дизайн выглядит аляповато (красная звезда на желтом? seriosly?) и выбивается из общего стиля. К тому же, они слишком большие, особенно желтый. немножко уменьшить, сделать более адекватные цвета, и выделять победителя более спокойно - например, увеличив сам средний блок на 5-10 пикселов.

Comments

[mozart1337]

Спасибо за ответ. Можете посоветовать именно с цветами и их расположениями?

[Алексей Николаев]

mozart1337: я бы оставил золотой кубок в середине (возможно, сделал бы посветлее, не таким ярким - нужно экспериментировать в редакторе), но убрал бы с него звезды и номер, а также выкинул бы красный кубок (сделал бы его серым, или светло-красным). 2 и 3 места можно разграничить оттенком серого (посветлее и потемнее), но делать три ярких разноцветных кубка в ряд - нехорошо, потому что лично у меня создается ощущение, словно я попал в магазин игрушек. С приглушенными тонами будет органичнее.

Номера мест можно указать, приделав к кубкам постаменты (просто прямоугольник, на котором они стоят), либо просто написать их на кубках, но не так, как сейчас, а вдавленным текстом (приделать в фотошопе), чтобы было ощущение гравировки.

[mozart1337]

просто может вообще как-то пересмотреть концепт рейтинга. Может и без кубков и всего прочего. Но как -то сделать так, чтобы первые три места бросались в глаза, типо "элита". Просто спрашиваю потому, что у меня нет графического видения и не знаю в какую сторону экспериментировать

[mozart1337]

я там кое-что новое сверстал

[Алексей Николаев]

mozart1337: новый вариант (что ниже) гораздо лучше

[mozart1337]

Алексей Николаев: а что можно поменять? просто не оч он еще

Answer 4

[mozart1337]

эксперимент №1000 неудачный