Как превратить конференцию для HR‑специалистов в увлекательное путешествие по сайту и собрать максимум регистраций?
Именно такую креативную задачу поставили нашему веб‑отделу. Необходимо было связать атмосферу «Хроник Нарнии», карты таро и немного волшебства с серьёзной профессиональной программой конференции для HR-специалистов. Казалось бы, Mission: Impossible, но не для команды MAXVAL.
Сейчас мы покажем, как через сценарий, дизайн и интерактивы превратить сайт конференции в мир, в который так и хочется попасть.
Первый экран как дверь в шкафу - так и манит
Задача от клиента
Первый экран переносит современного HR‑специалиста в волшебный мир Эйчарнии. Посетитель сайта сразу узнаёт себя, при этом ощущает связь с известной киновселенной «Хроники Нарнии». Экран должен быть красочным и одновременно чётко передавать информацию о месте и времени конференции, а также о том, какие выгоды получит участник.
Решение
Для выполнения запроса мы применили современные инструменты — магию нейросетей. В результате разработали и утвердили вариант главного экрана, который сочетает эмоциональную атмосферу и практичную информативность.
Задача
Разместить большой объём текста после главного экрана так, чтобы сохранить интерес пользователя и не потерять стилистику сайта.
Решение
Первой мыслью было: «Где раньше размещали важные послания?»
Ответ прост: в старинных книгах, свитках, на досках объявлений. Все эти образы мы в дальнейшем использовали в лендинге, но для этого блока выбрали вариант со свитком и печатью. Её мы сгенерировали в нейросети Sora, сочетая оформление письма и идею «послания от HR‑специалистов к HR‑специалистам».
Таро-расклад или ответы на HR‑вызовы
Задача от клиента
Необходимо создать интерактивный блок «вопрос/ответ» на сайте в стиле карт таро. На них должны быть иллюстрации, не просто связанные с фильмом «Хроники Нарнии», но и при нажатии показывать ответ.
Решение
Реализация идеи проходила в несколько этапов:
Обратились к нейросети для генерации изображений в формате карты и добавили текстом вопрос.
Подготовили отдельные карты с ответами и настроили анимацию.
Чтобы было интуитивно понятно, что на карту нужно нажать, сделали анимированное пёрышко‑подсказку.
Расположили объекты на фоне стола.
Секретная дверь или интерактивный призыв к действию
Задача от клиента
Сделать блок с призывом к действию: разместить текст «Кому подходит конференция», кнопку для регистрации поместить за закрытой дверью — при нажатии на которую она открывается и появляется кнопка.
Решение
Как говорилось ранее, длинный текст можно разместить на свитке, доске объявлений или в книге. Здесь логически подходит только вариант «доска объявлений». Для реализации задумки мы нашли подходящую дверь и с помощью нейросети сделали её открытой. Немного магии анимации, и задача выполнена. В качестве логичного фона мы выбрали каменную стену, у которой будет стоять доска объявлений и дверь.
HR-энциклопедия = программа конференции
Задача от клиента
Разместить большую программу 2-х дней так, чтобы она не занимала много места и чтобы пользователь захотел дочитать её до конца, а также разместить описание каждого дня. Идеально — оформить в виде книги.
Решение
Условие «занимать мало места» звучало как вызов. И мы с ним справились. Вот как мы поступили:
Сгенерировали изображение раскрытой книги.
Настроили табы для выбора дня конференции — при переключении меняется «книга» с коротким описанием этого тома.
Для размещения подробной информации учли возможные изменения программы: вёрстка сделана гибкой, чтобы в будущем легко вносить корректировки.
На первой странице каждой «книги» разместили описание дня в виде пролога.
На соседней странице поместили содержание с перечнем тем выступлений.
Для подробного описания каждого выступления выделили разворот: на одной странице — спикер, его регалии, тема и тезисы. Каждый разворот реализован как отдельный блок в Zero Block. Всего их предусмотрено 15, чтобы позже подключить листание книги пользователем.
В местах, где оставалось пустое пространство, вставляли сгенерированные тематические иллюстрации в стиле фильма «Хроники Нарнии».
Результат
Получилась компактная и визуально привлекательная «книга» программы, удобная для чтения и которую легко редактировать при смене программы или добавлении новых материалов.
Задача, о которой пожалели клиенты
Задача
Разместить всех спикеров в одном блоке, который можно листать. Все фотографии обработать нейросетью в стилистике королей и королев‑воинов.
Решение
Мы обработали нейросетью более 30 фотографий спикеров и разместили их в стандартный блок, а также в книге, о которой было сказано выше.
Так почему же заказчик пожалел о своей задаче? Ответ прост — многие спикеры испытали непривычные эмоции при виде себя в образе воинских королей: кому‑то не понравилась одежда, кто‑то не узнавал себя, а некоторые были просто в ужасе. В результате для таких спикеров мы:
1) Обрабатывали фото вручную или вовсе генерировали заново по новым исходникам.
2) Согласовали финальные версии с каждым спикером индивидуально.
Итог
Клиенты решили больше не экспериментировать с этой идеей в будущих проектах, но визуальный результат после всех правок получился очень стильным.
Необычная навигация по сайту
Задача от клиента
Сделать карту навигации, чтобы было и интересно её читать, и удобно переходить к нужному блоку. Названия мест и описания должны быть креативными и запоминающимися.
Решение
Мы снова использовали нейросети для разработки концепции и выкрутили нашу фантазию на максимум для того, чтобы придумать названия и описания локаций. Для удобства внедрили якорные ссылки, позволяющие быстро перемещаться по лендингу. Описания мест реализованы в виде невидимых тултипов, а привязка якорей — с помощью шейпов.
Что в итоге?
Результат получился компактным, визуально привлекательным и легко редактируемым при любом изменении программы. Клиент остался очень доволен финальным продуктом — несмотря на сложности и переработки, итог превзошёл все ожидания, и визуальная часть проекта была официально признана мега‑классной. И приятно, и не поспоришь.