Шуховскую башню превратили в маршрут. Что взять продюсеру

За несколько дней до запуска команда SUPPORT AGENCY отказалась от Tilda и пересобрала сайт о Шуховской башне на собственной разработке. Рискованно, но цифровой спецпроект для лектория «Москва глазами инженера» сохранил всю анимацию и не потерял в скорости загрузки. Для продюсеров и бренд-менеджеров здесь два урока сразу: как рассказать сложную историю без лонгрида и когда конструктор перестаёт справляться.

Как устроен цифровой спецпроект: скролл вправо и башня из стержней

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

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

Из советского конструктивизма авторы взяли геометрию и контрастные шрифты. Красно-чёрную гамму оставили за бортом, чтобы цвет не отвлекал от башни.

Tilda потянула концепцию и начала тормозить на полном архиве

Сначала сайт собирали на Tilda. На тесте концепции всё работало отлично. Потом на страницу загрузили весь массив архивных материалов и тяжёлую анимацию, и интерфейс заметно затормозил. Вариантов было три: упростить визуал, убрать горизонтальный скролл или рискнуть.

Команда рискнула и за несколько дней до запуска перенесла проект на собственную разработку. Честно говоря, не знаю, хватило бы мне духу на такое перед самым релизом. Но вывод я для себя сделал: если в плане сложная анимация и нестандартная механика, кастомную веб-разработку надо закладывать в бюджет и сроки сразу. Шаблонные конструкторы хороши для простых лендингов, на сложных сценариях они могут подвести.

Сайт стал хабом фестиваля, а блогеры получили дождевики

Сайт встроили в программу фестиваля «Шухов Фест». Страница работала хабом: люди читали историю создания башни и тут же покупали билеты на лекции и экскурсии. Для пиара агентство устроило для блогеров двухчасовую прогулку вокруг башни и сделало для них яркий мерч – дождевики.

За три месяца проект набрал 3 064 просмотра и привлёк 1 130 уникальных посетителей. Для нишевой архитектурной темы я считаю это хорошим результатом. Если нужно рассказать о сложном продукте или историческом событии, интерактивный визуальный опыт даёт читателю гораздо больше, чем полотно текста.

Что проверить до старта похожего проекта

• Загрузите в тестовую сборку весь архив и всю тяжёлую анимацию до того, как утвердите платформу. Прототип с тремя картинками всегда летает.
• Решите заранее, чем вы жертвуете, если интерфейс тормозит: анимацией, скроллом или платформой. Шуховской команде пришлось выбирать это за несколько дней до запуска.
• Если в сценарии нестандартная механика, заложите в смету и график кастомную веб-разработку, а не надейтесь на шаблон.
• Свяжите страницу с офлайном: билеты, расписание лекций, повод для блогеров. Здесь сайт заработал именно как хаб.

Анимация, которая за секунды объясняет сложное, упирается в производство: кто её рисует, как согласует, за сколько собирает. Как это выглядит в видео, можно посмотреть в кейсе «Окко. Спорт в цифрах», где цифры живут внутри кадра, и в других работах на странице AI-видеопродакшн Мити Амбарцумяна.