Роль: UX / UI Designer | Product Designer
Проект: Медиа-сайт для автоблогера Сергея Захарова
Основная цель — объединить в одном месте авторские обзоры, новости, блог, повысить узнаваемость бренда 3axapoV и улучшить восприятие контента.
постановка задачи
Исходная точка /
Сергей Захаров — автомобильный обозреватель, чья аудитория активно следит за контентом на Drive2, Telegram и Rutube. Однако все публикации были разбросаны по сторонним платформам, что затрудняло контроль над пользовательским опытом, аналитикой и развитием бренда.
отсутствие собственного медиа-пространства, где аудитория могла бы удобно читать, и смотреть свежие обзоры.
Основная бизнес-проблема
Ключевые цели проекта:
  • подготовить базу для партнёрств, рекламы и событий.
  • улучшить восприятие материалов и вовлечённость аудитории;
  • повысить узнаваемость бренда "3axapoV Drive";
  • создать независимую медиа-площадку с чёткой структурой контента;
Аналитика и исследование
На первом этапе были изучены аналоги и лидеры ниши —Drive2, Motor.ru, Авторевю, Jalopnik.
Выявлены проблемы: сложная навигация, избыток рекламы, отсутствие целостного UX-паттерна для медиа-контента.
Основные задачи:

  • Определить болевые точки читателей (избыточная текстовость, визуальный шум, низкая мобильная адаптивность).
  • Сформировать гипотезы о том, как упростить восприятие информации и удержание внимания.
  • Провести JTBD-анализ, чтобы понять, какие задачи пользователь решает, посещая сайт (например: “Когда я выбираю авто — хочу короткий и честный обзор, чтобы не тратить время”).
Исследование аудитории
Провёл сегментацию пользователей и построил JTBD-модель:
Описание изображения 1

Алексей Морозов, 39 лет

Роль: автолюбитель, активный читатель автомобильных медиа. Моя цель — получать честные и структурированные обзоры, быть в курсе новинок и находить мнение, которому можно доверять.

Подробная информация
Описание изображения 2

Екатерина Литвинова, 29 лет

Роль: начинающий автолюбитель, практичный покупатель, ориентированный на мнение экспертов. Моя цель — получить понятную информацию о современных автомобилях, чтобы принять решение о покупке и не зависеть от советов дилеров.

Подробная информация
→ Из этих сценариев родилась структура «Обзоры / Новости / Блог»
появилась идея фильтрации в разделе «ОБЗОРЫ» по регионам (Европа, Китай, Япония, Корея).
  • Визуально иерархия контента построена по принципу Content-First, где пользователь получает быстрый доступ к обзорам и рубрикам.
  • UX-решение: sticky-header с подсветкой активных разделов при скролле, карточки обзоров с фильтрацией по странам (Европа, Китай, Корея, Япония).
  • CTA-зоны для перехода к новым публикациям.
Формулировка гипотез
Мягкие микро-анимации и hover-эффекты создадут ощущение динамичного, живого бренда без перегрузки.
Адаптивная сетка и минимализм интерфейса улучшат восприятие информации.
Сильный визуальный HERO-block с узнаваемым логотипом укрепит идентичность бренда.
Структурирование контента по категориям - повысит навигационную ясность и глубину просмотра.
UX-логика
Архитектура продукта /
Создал информационную архитектуру (IA), выделив основные разделы по цветам:
Блог — лонгриды, личные истории и аналитика;
Новости — короткие заметки с временными маркерами и тегами;
Обзоры — фильтры по странам при переходе на отдельную страницу с обзорами.
Анимированые карточки с обзорами.
Метки «новое» о добавлении свежего контента.
Построил user-flow, включая:

  • путь пользователя от главной страницы к конкретному обзору;
  • сценарий «прочитал новость → перешёл в блог»;
  • взаимодействие с меню, скроллом и активными состояниями.
UX-тестирование
Прототипирование/
Создал wireframe в Figma, с фокусом на UX-паттерны: читаемость, приоритет визуального контента, выверенные интервалы и сетку (12-колоночная, gutter 20px), проверил структуру и кликабельность.

Основное внимание уделено:

  • читаемости текстов (контрастность, длина строк, отступы);
  • скорости восприятия категорий;
  • адаптивности для планшетов и мобильных экранов.
Визуальный язык
В основе цветовой палитры лежат корпоративные цвета заказчика, которые были предоставлены как основные - синий и оранжевый . Мы с заказчиком доработали их оттенки, чтобы они соответствовали современным трендам и были гармонично интегрированы в дизайн систему.

Цветовая палитра

#214DA3
Основной фирменный
Глубокий синий цвет символизирует технологичность, надежность и профессионализм. Вызывает доверие и ассоциируется со стабильностью в решениях.
#FB9127
Акцентный
Энергичный оранжевый передает динамику, креативность и инновации. Привлекает внимание к ключевым элементам.
Типографика
для основного текста (читаемость и лёгкость)
для заголовков (узкая, мощная, динамичная)
  • Хедер с подсветкой активного раздела при скролле (scroll-spy);
  • Карточки материалов с чёткой иерархией информации;
  • CTA-кнопки и формы в едином ритме отступов;
  • Микро-анимации SVG для логотипа и интерактивов.
Создал унифицированные компоненты:
(Tilda + кастом-код)
Разработка и интеграция
Для реализации выбрана платформа Tilda и Zero Block как оптимальное решение для MVP-релиза.
Был написан уникальный код для блоков : HERO, раздел "Обзоры" , раздел "Новости", раздел "Блог"
UI-анимации и визуальные эффекты
  • Использованы чистые CSS-анимации без сторонних библиотек — fade-in, blur-reveal, slide-in.
  • Это обеспечивает минимальный вес страниц и высокую производительность.
  • В HERO-блоке реализовано плавное появление логотипа и заголовка с задержкой по времени, что создаёт кинематографичное ощущение вступления.
Адаптивная система под все устройства
  • Каждая секция имеет кастомные media-queries для трёх брейкпоинтов: Desktop (≥1200 px), Tablet (≥768 px) и Mobile (≤480 px).
  • Сетка перестраивается без потери пропорций, а типографика и кнопки масштабируются плавно — без «ступеней» стандартных блоков.
Тестирование и оптимизация
Провёл серию проверок по трём направлениям:

  1. UX-качество: логика переходов, удобство чтения, фокус-состояния, кликабельные зоны ≥ 44px.
  2. Производительность: оптимизация изображений, кеширование.
  3. SEO: семантическая разметка, OG-теги, корректные H1–H3, понятные URL.
Результаты и итоги
Поставленная цель была выполнена: создана современная, узнаваемая медиа-платформа, которая отражает индивидуальность автора, где сохранен фирменный цвет, а площадка открывает пространство для масштабирования бренда.
сайт стал основной ссылкой-источником для партнёрских публикаций
CTR карточек обзоров
полная версия сайта
глубина просмотра выросла на:
повторные визиты
Анимация процентов
0%
Анимация процентов
0%
Анимация процентов
0%
Десктопная версия
Антон Мурлыкин
2025
©
Политика в отношении обработки персональных данных
Согласие на обработку персональных данных