Дизайн и разработка сайта МК Спорт

МК Спорт

2024
Клиент

Московский Комсомолец-Спорт

2022www.sportmk.ru/

Клиент

«Московский комсомолец-Спорт» — онлайн-газета в стиле спорт-поп, которую выпускает издательский дом «Московский комсомолец». У ее сайта разнообразная целевая аудитория: от фанатов спорта 
до пользователей, которые редко читают подобные новости.

Каким 
МК Спорт 
был до редизайна

Изначально «МК-Спорт» был рубрикой МК на отдельном домене, но наследовал его навигационный интерфейс 
и газетный дизайн. Из-за этого пользователям было трудно воспринимать его отдельно 
от МК. Также дизайн 
не позволял вставить традиционные спортивные виджеты: таблицы и статистику.

Что хотел получить клиент:

  • Самостоятельный сайт, который визуально отличается от МК
  • Яркий, контрастный дизайн, характерный для спорт-изданий
  • Виджеты, которые органично встроены в дизайн
  • Адаптивный интерфейс, в первую очередь, для мобильных устройств.

Цели и задачи

Разработать дизайн-концепцию, которая:

  • подчеркнет индивидуальность «МК-Спорт» и впишется в экосистему проектов МК
  • позволит увеличить показатели просмотра с 5 до 7 страниц, длительности сеанса с 2,5 до 3,5 минут, посещаемости — до 1 миллиона в сутки

Работа над проектом

Аудитория и устройства

Веб-аналитика сайта «МК-Спорт» показала следующее:
— чаще всего газету читают люди в возрасте 45+ лет
— самая вовлеченная аудитория — люди 35-44 лет: 
они просматривают больше страниц за посещение и имеют самые низкие отказы
— обычно пользователь проводит на сайте меньше минуты, показатель отказов высокий
— чаще всего на сайт заходят с мобильных устройств, пользователи мобильной версии более вовлеченные, 
чем декстопа

 

Конкруенты МК-Спорт

Мы проанализировали сайты конкурентов по следующим параметрам: look and feel, виды навигации, UI-элементы 
и контентные блоки, сетка построения, дизайн мобильной версии. Затем выбрали best practice для дизайна «МК-Спорт»: разнообразные контентные блоки, простая сетка, поэкранное разделение контента, крупный визуал или видео на первом экране. Важно было создать комфортную интерфейсную сетку, которая будет понятна пользователям всех возрастов, и эффективную навигационную цепочку.

Проектирование интерфейса

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

Мобильная 
версия

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

Навигационная цепочка

Для «МК-Спорт» создана отдельная навигационная цепочка — с МК ее объединяет только общая «плашка» в верхней части экрана. 
В меню вынесены популярные виды спорта, также есть навигация по форматам и типам контента, потому что пользователи показывают высокую заинтересованность в фото- и видеоматериалах.

Слайдер в стиле Stories

В среднем нам нужно ≈ 7 секунд для решения остаться на сайте или нет. Чтобы успеть заинтересовать пользователя за это время, на первый экран мы поместили слайдер в формате stories. Он переключает интересные материалы и задерживает внимание.

Рекомендации

Для увеличения глубины просмотра страницы издания дополнены «информационным обвесом» — блоками с популярными новостями, статьями по теме. В теле новости появились ссылки на похожие материалы, которые могут привлечь читателя.

Стилистика сайта

Сдержанный монохромный дизайн в черно-белой гамме подчеркивает, что «МК-Спорт» — деловое, надежное и серьезное издание. Иллюстрации яркие 
и большие, они сразу привлекают внимание пользователя, он может сделать вывод о содержании новости 
по картинке. Это делает интерфейс интуитивно понятным и предсказуемым.

Типографика

Крупная, темная типографика отлично читается на white space — соблюден AAA-стандарт контрастности текста. 
На сайт добавлены кнопки 
для увеличения шрифта 
и автопрочтения текста.

Проект в цифрах

40

Аналитика

160

Проектирование

230

Дизайн

Обсудить
проект

Имя
Компания
Как с вами связаться
Расскажите о задаче

Нажимая кнопку «Обсудить», вы соглашаетесь с политикой обработки персональных данных