Как я делал домашку от Детепра — 2. Редизайн календаря событий для ТопЛистРана

Про то, как я делал первую домашку можно прочитать здесь.

Детепр — место, где раз в неделю вам приходит дизайнерская задача, а затем арт-директора Яндекса его оценивают по пятибалльной шкале и дают фидбек.

В этот раз мне предстояло сделать редизайн страницы каталога событий на спортивном сайте ТопЛист. Задача звучала как: «Разберитесь зачем нужен этот раздел, уберите лишнее и добавьте недостающее, сделайте красиво, чтобы хотелось скачать такое приложение».

Исходный материал

Разбираюсь зачем нужен этот раздел

ТопЛист позиционирует себя как социальная сеть для бегунов. Хотя, по факту представляет из себя базу данных спортсменов, результатов и событий. Скорее всего, с помощью сайта, спортсмены подбирают для себя события и соревнуются между собой в рейтинге.

Поэтому, я предполагаю, что каталог событий нужен, чтобы спортсмен смог заранее узнать где и когда пройдёт подходящий для него забег и заблаговременно начать к нему готовиться.

В первую очередь для такого сценария использования важны тип соревнования, дата и место проведения.

Убираю лишнее и добавляю недостающее

Определяю, что действительно нужно в карточке события.

  1. Название — ну куда без него.
  2. Тип забега и расстояния — при быстром сканировании поможет сразу отсеять неподходящее.
  3. Обложка — поможет выделиться карточке среди кучи похожих забегов.
  4. Дата и место проведения — без этого элемента карточка будет бессмысленной.
  5. Комментарии, лайки и просмотры — дополнительное привлечение внимания. Больше активности — больше шанс, что на карточку кликнут.
  6. Рейтинг — на исходном скриншоте были звёздочки рейтинга. Честно, я так и не понял, зачем они нужны. Да и как оценивать предстоящий забег тоже не очень ясно. Роль звёздочек отлично исполнит счётчик лайков.
  7. Большая кнопка «Зарегистрироваться» — Куда без призыва к действию.

Делаю красиво

Для начала собираю шапку и верхнюю часть экрана с поиском и фильтром

Шапка и быстрый фильтр

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

Под строкой поиска лежат уже применённые фильтры. Отсюда их можно быстро отменить.

Карточка события

Расположил элементы в иерархическом порядке по степени важности

Большая фиолетовая кнопка предлагает зарегистрироваться на событие. А бегущие рядом друзья ещё сильнее подтолкнут к участию :)

Вариант победнее

Карточки могут содержать или не содержать разную информацию. Например, здесь регистрация ещё не открыта, да и друзей пока отобразить не получится.

Ещё изменился вид комментариев. Выше их не было, и я предлагал «Комментировать». А сейчас они есть и я пишу конкретное число :)

Фильтр

Решил развить тему и поупражняться в проектировании фильтров. Попробовал разбить параметры по категориям и как можно понятнее скомпоновать таблицу.

Обошёлся минимумом компонентов

Бонус-трек

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

В итоге

Разобрался, как собрать хорошую карточку и попрактиковался в дизайне всяких технических штук. Как обычно, можно клэпнуть здесь и лайкнуть на Дрибббле.

Лайкать тут :)

Спасибо за внимание. Увидимся через неделю.

Дизайнер интерфейсов и сайтов. Сейчас двигаюсь в направлении продуктового дизайна и сложных интерфейсов. Работаю в студии и образовательном стартапе enabla.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store