Редизайн сайта крупнейшего IT-кэмпа для C-level

1. Вводная задача от заказчика, проблематика, цели

ПРОБЛЕМА

У South HUB не было единой цифровой платформы. Промо-лендинг собирался каждый год заново на Tilda или схожих конструкторах. В итоге терялась часть аудитории, снижалась вовлеченность и усложнялась работа самих организаторов.

ЗАДАЧИ

• Собрать всю ключевую информацию в одном месте.
• Обеспечить удобный путь пользователя — от знакомства с South HUB до покупки билета.
• Предоставить возможность обновлять контент из года в год без привлечения разработчиков.
• Создать визуально яркий и динамичный образ, отражающий атмосферу комьюнити и события

РЕШЕНИЕ

Новый сайт:

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

Конструктор блоков:

Создание системы модульного редактирования — готовые блоки с ограничениями по контенту. Это позволяет обновлять сайт самостоятельно. В итоге пользователи всегда видят актуальную программу и материалы.

Удобный переход на покупку билетов:

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

Александр Шкрядов

Art Director, Maru's Team

Мы начали с mobile-first, потому что «сегодня» подавляющая часть аудитории заходит на сайт именно со смартфона. Маленький экран мгновенно выявляет лишнее: остаётся только то, что человеку нужно «здесь и сейчас», интерфейс читается одной рукой, а код и графика держатся лёгкими. Такая выверенная мобильная база потом безболезненно масштабируется.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

ДИЗАЙН

Мы взяли за основу брендбук, но добавили к нему настроение самой аудитории. South HUB — это С-level из IT: люди, для которых премиум важен не меньше, чем драйв и энергия. Поэтому дизайн получился сдержанным и элегантным по форме, но живым и динамичным по содержанию — без канцелярской строгости и с атмосферными акцентами.

В основу легла палитра белого, серого и черного цветов. «Встречает» посетителей сайта логотип-молния в 3D-исполнении, с ним можно «поиграть» при помощи курсора. Этот элемент объединяет несколько смыслов: первую букву названия South HUB, технологичность и дружелюбность через плавные линии. Мягкий liquid gradient остается статичным во всех блоках — оживляет композицию, но не отвлекает внимание от контента.

Также мы использовали несколько приемов:

• Акцентная типографика и смещение строк: помогают сфокусировать внимание на заголовках.
• Бегущая строка: для call-to-action, чтобы создать ощущение ожидания события.
• Анимация и скроллителлинг: от микроанимаций (hover, focus) до эффектов, завязанных на скролле.
• Параллакс: добавляет глубины и динамики.

Вся динамика не случайна — она отражает сам дух IT-комьюнити, где все всегда в движении.

ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ

Чтобы совместить динамичный UX с удобным управлением контентом, использовали React + WordPress в роли Headless CMS. WordPress используется как источник данных (API), а визуал и логика — в React. Такой decoupled-подход дал гибкость на фронтенде, не связывая руки CMS-шаблонами.

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

WordPress помог снизить порог входа для контент-менеджеров. В админке внедрили кастомные поля и ограничения (например, лимит на длину заголовка), чтобы контент нельзя было «сломать» и визуал оставался аккуратным при любых правках. Плюс — можно смотреть историю версий и кто внес изменения: удобно для контроля качества и оперативных откатов.

Михаил Горбачёв

Tech Director, Maru's Team

Мы выбрали React вместо no-code, потому что нам нужен был полный контроль над проектом — особенно в части анимаций и взаимодействия с пользователем. No-code не давал нужной гибкости: как только появлялись нестандартные задачи, всё упиралось в ограничения платформ.

3. Результаты сотрудничества

Чтобы понять, что такое South HUB, как проходит кэмп, где купить билеты и как подтвердить участие, раньше человеку приходилось проходить целый квест. Запуск новой платформы заметно изменил то, как люди взаимодействуют с ивентом. Теперь путь от знакомства с сообществом до участия в событии стал короче и понятнее. Все необходимое доступно в одном месте, без лишних действий и разрозненных ссылок.

А главное — исчезла сложность входа в South HUB. Участники больше не тратят силы на поиск информации и оформление участия, а могут сосредоточиться на том, с кем интересно было бы познакомиться, какие посетить доклады и активности. Благодаря этому у проекта кратно выросло число участников.