Привет. МЫ студия unova. Мы создаём сайты на Тильде с упором на интерактивные 3D-анимации.
В этом кейсе расскажем, как мы за 4 недели разработали одностраничный сайт для агентства контекстной рекламы Clicado. У клиента на старте не было ничего: ни логотипа, ни названия, ни структуры, ни текстов. Только желание получить красивый и понятный сайт, который объясняет суть бизнеса и собирает заявки.
Запрос
Клиент пришёл с задачей разработать сайт под ключ на Тильде за 4 недели. Исходных материалов не было. Но были референсы: один — как ориентир по визуалу (3D, плавные анимации, интерактив по курсору), второй — с подходящей структурой. Это стало основой для дальнейшей работы.
Задача: сделать понятный и эстетичный сайт, который будет презентовать компанию, выделять её преимущества и закрывать пользователя на заявку.
Отдельным приоритетом были визуальные детали: эстетика, плавность анимаций, интерактив по курсору.
Аналитика и структура
Перед тем как рисовать дизайн, мы провели бенчмаркинг — изучили сайты конкурентов и похожих агентств. Сфокусировались не только на визуале, но и на логике — какие блоки чаще всего встречаются, как строится путь пользователя, как компании рассказывают о себе и презентуют кейсы.
На основе анализа мы собрали финальную структуру сайта:
- Промо-экран с позиционированием
- Блок о компании
- Преимущества
- Кейсы
- Этапы работы
- Услуги
- Формы захвата
- Футер
Мы сразу собрали прототип, чтобы визуально показать клиенту расположение блоков, из каких элементов они будут состоять и какой нам видится текст на сайте. Структура была согласована практически сразу. Некоторые детали — например, формат показа этапов работы — были доработаны по ходу. Из мелких правок — заменили горизонтальный скролл на вертикальный в блоке с этапами, чтобы сохранить общую ритмику и упростить взаимодействие.
Прототип сайта
Нейминг и логотип
Поскольку у клиента не было ни названия, ни визуального образа компании, мы взяли эту часть на себя.
Предложили рабочее название — Clicado. Оно отсылает к слову "click" и легко воспринимается на слух. Для логотипа использовали минималистичную метафору: курсор встроен в последнюю букву «О». Чтобы визуализировать будущий бренд, мы сделали мокапы с логотипом — на визитках, футболках и сувенирке. Это помогло клиенту оценить, как будет выглядеть фирменный стиль в жизни. Название и логотип были сразу приняты.
Визуальный стиль и подход
На этапе мудборда вместе с клиентом определили вектор по визуалу:
- тёмная цветовая палитра с контрастными вставками
- интерактивные 3D анимации
- многослойность и глубина
- минимализм и «воздух»
- шрифт Inter Tight — простой, понятный, интерфейсный
- аккуратные микроанимации
- глассморфизм
- выравнивание по силовой линии
- стиль бенто-сеток в карточках
Всё это легло в основу цельной визуальной системы, где анимации и 3D дополняют структуру, не перегружая восприятие.
3D-сцены и анимации
Ключевой элемент — интерактивная 3D-анимация, реализованная через Spline
Первая сцена в промо-экране
На первом экране размещена абстрактная сцена: три стеклянных кольца, вложенные друг в друга, которые плавно вращаются. Это задаёт атмосферу и визуальное настроение всего сайта.
Добавили интерактивность:
- кольца зациклено вращаются вокруг своей оси
- по движению курсор сцена плавно смещается
- за курсором двигается градиентное световое пятно
- на фоне — паттерн из точек и анимированные градиентные пятна
3D анимация в первом экране
Анимация по скроллу
Когда пользователь начинает скроллить, кольца ускоряют вращение и плавно смещаются в центр.
Во время этого движения появляются текстовые тезисы, которые дополняют анимацию и усиливают смысл.
После — сцена уходит за блок о компании, создавая эффект глубины сайта.
3D-анимация по скроллу
Блок преимуществ
Следующая 3D-сцена — визуализация воронки продаж. Те же стеклянные кольца, но теперь они расположены друг под другом. Через них по скроллу проходит фиолетовая сфера, создавая визуальную метафору прохождения клиента через этапы воронки.
3D-анимация в блоке «Преимущества»
Этапы работы
В этой сцене кольца превращаются в звенья цепи. При скролле они последовательно появляются и начинают вращаться, символизируя логичность и связанность этапов.
3D-анимация в блоке «Этапы работы»
Завершающая сцена
На последнем экране снова возвращается первая 3D-сцена — кольца, которые теперь смещаются в центр. Рядом форма для отправки заявки. В этот момент создаётся кольцевая композиция: 3D-компонент по центру, интерфейс вокруг, и плавный переход в футер.
Возникшие проблемы и их решения
3D-сцены переключались в зависимости от количества пикселей, проскролленных на странице. Но из-за адаптивной высоты блоков сцены начинали переключаться не в том месте — раньше или позже нужного.
Мы сделали 4 отдельных проекта в Spline — для каждого брейкпоинта. В каждом задали свои параметры скролла и переключений. Это потребовало времени, но позволило сохранить все интерактивные задумки и производительность даже на слабых устройствах.
Верстка и техническая реализация
Сайт собран полностью на зеро-блоках. Анимация интерфейса выстроена через step-by-step и кастомные модификаторы.
Основные особенности:
- Плавный скролл
- Кастомный скроллбар
- Динамическая шапка, меняющая цвет в зависимости от фона экрана
- Кастомный прелоадер
- Кастомный ок-попап
- Слайдер с кейсами
Блок кейсов
Блок кейсов получился визуально насыщенным и функциональным.
Он собран в слайдере, в котором каждая карточка оформлена в приятную композицию бенто-сетки.
Каждая карточка содержит краткую информацию, а при нажатии «Изучить кейс» — открывается попап с подробной информацией.
При скролле страницы слайдер ненадолго фиксируется на экране, что облегчает взаимодействие и не даёт случайно проскроллить блок мимо.
Адаптивность и оптимизация
Сайт адаптирован под все разрешения, включая мобильные и планшеты.
На десктопе работают интерактивные 3D-сцены. А вот на мобильных и планшетах — вместо тяжёлой 3D анимации используются фоны с зацикленными видео, которые передают тот же визуальный эффект, но не перегружают устройство. Это было важным решением для сохранения производительности.
404-страница
Для сайта была сделана кастомная страница ошибки 404, в которой мы адаптировали 3D-анимацию под тему страницы. Замоделили в том же стиле цифру 404. Вместо нуля — стеклянное кольцо с зацикленной анимацией вращения.
3D-анимация на странице 404
Контент
Изначально мы собрали примерные тексты, чтобы показать структуру. На их основе клиент доработал финальные версии. Тексты для кейсов и части изображений были также предоставлены заказчиком.
Вся подача — простая, конкретная, с ориентацией на действие и понятность, без перегруза терминами.
SEO и аналитика
Настроили базовую SEO-оптимизацию: тайтлы, дескрипшены, фавикон, теги заголовков, альты и превью при расшаривании.
Подключили Яндекс.Метрику, с возможностью отслеживать ключевые действия на сайте.
Альтернативная концепция: светлая версия сайта
Хочется еще упомянуть, что изначально мы прорабатывали одну основную концепцию, но в процессе у нас накопилось столько идей, что мы решили реализовать ещё одну — альтернативную версию сайта. Она строилась на тех же смыслах, но с другим визуальным настроением.
В этой версии:
- Основой стала светлая цветовая гамма
- Для заголовков мы использовали более акцидентный шрифт, чтобы усилить визуальный ритм
- Были переработаны 3D-сцены под новую палитру
- Изменилась композиция некоторых блоков — версия стала визуально «легче»
Альтернативная концепция получилась полноценной и завершённой, и могла бы пойти в работу как отдельный сайт. Клиенту понравились обе версии, но финальный выбор пал на тёмную, как более эффектную и выделяющуюся в нише.
Альтернативная версия дизайнаэ
Результат
Сайт был запущен месяц назад. Сейчас идёт наблюдение за метриками — поведенческие данные показывают хорошую вовлечённость и интерес к контенту. Клиент остался доволен, дал положительный фидбек и уже рекомендует нас другим.
Анимация всех экранов сайта
Для нашей студии этот проект стал одним из ключевых. Он максимально отражает то, на чём мы специализируемся: Tilda, визуальный интерактив, 3D-анимации, современные сайты без программирования, но с высоким уровнем реализации.
Если интересно посмотреть сайт вживую — переходите на clicado.ru.
Посмотреть другие проекты нашей студии можно на сайте unova.
Если есть вопросы по Тильде, Spline или просто хочется пообщаться — смело пишите, всегда рад диалогу!
А если вам близка тема 3D, интерактива и no-code разработки — заглядывайте в наш Telegram-канал.