Как создать кастомный сайт для со сложной анимацией на Tilda?

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

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

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

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

Основные требования:

• создать сайт на основе фирменного стиля клиента
• передать атмосферу заведения через дизайн и визуальные элементы
• отразить авторский подход Вани, не опираясь исключительно на прямые метафоры или личный бренд
• внедрить маскот, сохранив взрослую эстетику и избегая детской мультяшности
• создать «космический» сайт с уникальной визуальной идентичностью, не основываясь на образе одноименного хита

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

Для этого проекта мы предложили несколько концепций на выбор.

Первая концепция: Серьёзный космос

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

Вторая концепция: Классика

Бар располагается в историческом особняке с богатой и большой историей, а концепция интерьеров предполагает разделение зон по стилистике - всем этим хочется поделиться с гостями. Поэтому мы также создали концепцию, в которой акцентом была прямая коммуникация

Третья концепция: День/Ночь

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

Графические приемы, которые мы хотели внедрить:

• использование пластинки как орбиты
• использование орбитального музыкального плейлиста
• абстрактные постеры, где корабль представлен в форме круассана
• типографика по “орбите”
• анимированный фон из летающих звезд

Коммуникация:

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

Для того, чтобы достичь единство и эффект сторителлинга, но при этом не терять конверсионную структуру сайта, мы прибегли к помощи плагинов, о которых расскажем ниже

Плагины, которые помогли нам сделать сайт интерактивным:

1. Настройка интерактивного фона с движущимися звездами: реакция на движение мышкой, звездный фон для всего сайта

Такая анимация погружает пользователя в сторителлинг, повышая вовлеченность и взаимодействие с сайтом. Опираясь на существующие модификации, мы разработали уникальный код, который отрисовывает звёзды в режиме реального времени, и аккуратно разместили на сайте с минимальным ущербом для оптимизации.

2. Орбитальность: карта лояльности для создания ощущения космического пространства

Разработали дизайн карт и применили готовое решение летающей по орбите галереи (от Matilda design). Анимация отлично вписалась в общую концепцию, передавая атмосферу.

3. Космическая звезда, летающие объекты и анимированные планета и пластинка: сложные анимации настроенные в тильде

Разработали уникальные пошаговые анимации, которых ещё не видели на просторах интернета. Придумали идеи анимаций, сразу заложили в дизайн сайта, а дальше тщательно продумали их по шагам, что позволило реализовать нечто новое и выделиться.

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

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