Как мы сделали сайт на Tilda c 3D и Lottie анимацией и получили награды

Проект, на котором разработчик вспомнил курс вышмата, а дизайнер стала чуть-чуть программистом.

К нам обратилась мультимедийная студия hptx, создающая современное искусство на языке технологий. Компания создает полный цикл проекта в AR, VR, XR, Web и CG — от концепции до воплощения.

Клиент хотел обновить старый сайт. Он был перегружен, информация неактуальна, не отображает деятельность студии и не выделяется на фоне конкурентов. Новый сайт хотелось сделать простым, понятным, минималистичным, но с фишкой. Зацепить внимание пользователя, запомниться и показать последние реализованные проекты.

У команды hptx уже был гайдлайн с логотипом, цветами и шрифтами, но мы решили его дополнить и немного переработать.

Мы собрали всех конкурентов. Нужно было понять за счёт чего можно выделиться. Вспомнили, что hptx вообще-то делают классные проекты и решили использовать 3D объекты в концепции. У нас было технологическое ограничение – ребята хотели удобно редактировать контент, поэтому сборка проекта была на Tilda Publishing.

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

Главная страница стала самой сложной с точки зрения технической реализации. Мы собрали ее преимущественно на Zero-блоках. Интерактивные элементы работают на JavaScript, а все 3D-элементы реализованы с помощью библиотеки Lottie.

Логотип состоит из 9 сетов букв, что генерирует 126 вариантов логотипа – после перезагрузки страницы собирается новый уникальный логотип. Была задача сделать так, чтобы 2 раза буквы не повторялись.

Клиент хотел, чтобы буквы никогда не совпадали из одного сета. Разработчик написал функцию, которая для каждой буквы проходилась по всем 9 вариантам и брала случайную. А в следующей итерации, эта же буква уже не попалась. Тут можем вспомнить курс теории вероятности и понять, что всё равно иногда разные буквы попадались бы из одного сета. Это не совпадало с видением клиента. Поэтому мы предложили взять анимацию, которая будет бесконечно прокручиваться.

Вторая техническая фишка – логотип фиксируется и скролится вместе со страницей. Для реализации кодом – это простая задача. Но тут есть подводный камень – автоскейл Tilda. Tilda фактически не меняет размер блока, но зато он визуально больше или меньше. Что приводило к рывкам, скачкам и багам. Решение – брать значение параметра zoom, которое вешает Tilda и передавать его в свой скрипт. Всё гениальное просто.

В итоге несложными математическими расчетами и методом инженерного научного подгона – удалось добиться плавности, а дизайнер сказала «Кайфово!».

Для публикации кейсов использовали интерфейс онлайн-магазина. Чтобы клиенту было удобно добавлять проекты через каталог Tilda. Нам нужна была подгрузка проектов, чтобы выгружалось по 4-6 проектов на странице. Если делать это в Zero Block, то будет много костылей и, например, изменить порядок проектов уже будет довольно сложной задачей.

Чтобы заказчику было удобно редактировать код на сайте – мы специально вынесли отдельным блоком из всего кода. Клиент сможет самостоятельно добавлять и менять ссылки для элементов Lottie-анимации.

Напишите в комментариях, как бы вы решили эти технические ограничения?

Подобные проекты можно реализовывать только в креативной паре – разработчик и дизайнер. Верстать силами одного дизайнера крайне сложно. Много уникальных скриптов, которые требуют специальных знаний. Для таких проектов мы будет использовать Webflow. Он ближе к коду, но от того больше контроля над конечным результатом.

Это был классный проект, на котором мы протестировали креативные подходы, набили шишки и получили крутой опыт. В процессе работы над проектом мы сформулировали много новых алгоритмов работы, например, как организовывать код на странице.

Отдельно хотим сказать спасибо нашему партнеру – hptx. Ребята поддерживали идеи, активно участвовали в процессе и самое главное – доверяли нашей экспертизе. Из такой синергии получаются действительно классные проекты. На данный момент hptx взял 4 дизайнерские награды.

Проект получился необычным и аккуратным. Из-за интерактивных элементов создаётся ощущение уникальности и новизны. Все 3D элементы взяты из кейсов заказчика, что сразу демонстрирует результат работы команды hptx.

В итоге мы расширили гайдлайн компании, собрали сайт, который запоминается и выделяется на фоне конкурентов. Пользователя теперь встречают забавные 3D объекты, которые и демонстрируют возможности hptx. Особенно круто смотриться 3D корова на странице 404.

Web Exellent Awards

CSS Light

Design Nominees

Made on Tilda