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