Код на no-code: сайт для Вани Дмитриенко

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

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

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

Ключевые задачи:

➤ создать сайт на основе фирменного стиля клиента

➤ передать атмосферу заведения через дизайн и визуальные элементы

➤ отразить авторский подход Вани, не опираясь исключительно на прямые метафоры или личный бренд

➤ внедрить маскот, сохранив взрослую эстетику и избегая детской мультяшности

➤ создать «космический» сайт с уникальной визуальной идентичностью, не основываясь на образе одноименного хита

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

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

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

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

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

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

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

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

Чтобы сохранить нарратив и конверсию, мы расширили возможности Tilda кастомными решениями: 

1. Интерактивный звёздный фон

Динамический фон, где звёзды реагируют на движение курсора. Сами написали уникальный скрипт, который отрисовывает звёзды в реальном времени, тщательно оптимизировав его. 

2. Орбитальная галерея и карта лояльности 

Разработали концепцию карты лояльности в виде небесных тел. Для её реализации адаптировали готовое решение от Matilda Design — галерею, планеты которой вращаются по орбите. 

3. Уникальные космические анимации в Tilda

Летающая космическая звезда, анимированные планеты и вращающаяся виниловая пластинка, сложные пошаговые переходы, созданные с нуля.

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

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

Среди графических приёмов, которые легли в основу визуального языка:

1. Пластинка как орбита — символ музыки, вращающейся в ритме дня и ночи;

2. Орбитальный музыкальный плейлист, где треки сменяют друг друга

3. Абстрактные постеры, в которых космический корабль обретает неожиданную форму круассана, что стало отсылкой к утренней атмосфере заведения;

4. Типографика, развивающаяся по орбитальной траектории для подчёркивания динамики и ритма;

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

Создавая в no-code-средах сложные анимации и дизайн, не забывайте после каждого обновления проверять скорость загрузки. Даже самое красивое космическое путешествие не состоится, если пользователь не дождётся взлёта :))