Контекст и задача

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

Моя роль

Я работал над проектом вместе с партнёром по Worksterdam — Евгением Соколовым. Я управлял проектом, отвечал за дизайн интерфейса и фронтенд, а Женя — за UX. Вместо Фотошопа или Скетча (Фигмы еще не было) я выбрал тогда ещё только зарождавшийся среди дизайнеров подход «дизайн в браузере» — всё создавалось с помощью HTML, CSS и текстового редактора. Также я занимался поиском разработчика и координировал процесс разработки до запуска нового сайта.

Процесс

1. Анализ и вдохновение
   Я изучил старый сайт и контент, обсудил с клиентом их цели. Они ориентировались на городские медиа вроде The Village — с сильным визуальным языком и фокусом на культуру и lifestyle. Аудитория Краснодара — активные горожане, которым нужны не только новости, но и истории.
2. «Дизайн в браузере» как подход
   Я увлёкся концепцией «дизайна в браузере» — весь процесс от эскизов до финального фронтенда шёл через код. Это дало:
   • Скорость: Итерации рождались за часы, а не дни. Не нужно было ездить к клиенту — я скидывал ссылки на новые версии, и они сразу видели результат на своих устройствах.
   • Интерактивность: Живые прототипы помогали редакции понять, как сайт будет работать сразу на разных устройствах, без статичных макетов.
   • Эффективность: Разработчик получал готовый фронтенд на Bootstrap, что сократило время разработки в разы.
   • Тестирование: Дизайн сразу проверялся на любых экранах — от десктопа до смартфонов.
3. Концепция и структура
   Я спроектировал модульную сетку, гибкую для лонгридов, фоторепортажей и новостей. Главная страница стала витриной лучших материалов с крупными обложками. Пересмотрели рубрики и добавили: «Город», «Люди», «Культура» — чтобы уйти от новостного потока.
4. Визуальный стиль
   Старый дизайн был серым и перегруженным. Я переписал его с нуля: чистая типографика, контрастные цвета, больше воздуха. Bootstrap помог быстро настроить адаптивность, а в коде я сделал акцент на визуальные элементы — фото, заголовки, иллюстрации.
5. Мобильный опыт
   С нуля создал мобильную версию: удобный скролл для лонгридов, читабельные шрифты, бургер-меню, крупные тач-зоны. Это решило проблему старого сайта, который был не адаптирован под смартфоны и показывал просто десктоп-версию.
6. Редакторская система
   Мы спроектировали систему управления контентом: настройка рекламы, размещение новостей, сборка материалов из блоков, кастомизация главной страницы. Редакции пришлось выучить основы HTML/CSS, так как из мощных визуальных редакторов тогда была только Setka от основателей Look At Media. Я подготовил для них базовые инструкции, чтобы они могли детально работать с материалами.
7. Итог
   Клиент получил готовый фронтенд и гайд по стилю. Новый Югополис стал современным, гибким и готовым к новому контенту, а процесс сэкономил кучу времени на переговорах и разработке.

Результаты

Редизайн дал ощутимый эффект:

• Редакция получила платформу для лонгридов и фотоисторий, о которой мечтала и стала больше выпускать интересных материалов.
• Выросло количество пользователей с мобильных устройств.
• Ежедневная аудитория выросла с 20–30 тысяч посетителей до 40–65 тысяч. В пиковые моменты аудитория доходила до 90 тысяч посетителей в день.
  Эти цифры показали, что новый дизайн и мобильная версия вернули ушедшую аудиторию и привлекли новых читателей.

Судьба проекта

В 2022 году клиент продал Югополис и уехал в США. Новый владелец в 2024 году переделал сайт, вернув его к новостной модели — политика, урожаи, надои, ДТП и проишествия. Это напомнило, что дизайн открывает возможности, но их реализация зависит от стратегии владельца.

Инсайты

• «Дизайн в браузере» — это эффективность: Ссылки вместо встреч и готовый фронтенд ускорили всё — от идей до запуска.
• Мобильность решает: Адаптация утроила потенциал охвата.
• Команда — часть процесса: Обучение редакции HTML/CSS дало им контроль, хоть и потребовало усилий.
• Дизайн — не панацея: Без поддержки клиента даже успешный редизайн может смениться регрессом.

Что дальше?

«Дизайн в браузере» стал для меня открытием — я продолжаю развивать этот подход в проектах, где важны скорость и гибкость. Например, этот сайт тоже создавался сразу в коде (Next.js + Tailwind CSS). А ещё я узнал многое о том, как работают новостные редакции, как создаются большие материалы и что выбор хранения фотографий в бакете на AWS с 90 тысячами посещений в сутки было большой ошибкой. Получил знания по SEO для медиа и способам распространения контента на разных платформах.

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