Статьи Unova

Кейс: Clicado — сайт на Тильде с 3D-анимацией, неймингом и логотипом под ключ за 4 недели

2025-07-15 16:40
В этом кейсе расскажу, как мы за 4 недели разработали одностраничный сайт для агентства контекстной рекламы Clicado. У клиента на старте не было ничего: ни логотипа, ни названия, ни структуры, ни текстов. Только желание получить красивый и понятный сайт, который объясняет суть бизнеса и собирает заявки.
Привет. Меня зовут Глеб Говядинский — я дизайнер и основатель студии unova. Мы создаём сайты на Тильде с упором на интерактивные 3D-анимации.

Запрос

Клиент пришёл с задачей разработать сайт под ключ на Тильде за 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-сцены под новую палитру
  • Изменилась композиция некоторых блоков — версия стала визуально «легче»
Альтернативная концепция получилась полноценной и завершённой, и могла бы пойти в работу как отдельный сайт. Клиенту понравились обе версии, но финальный выбор пал на тёмную, как более эффектную и выделяющуюся в нише.
Альтернативная версия дизайна

Результат

Сайт был запущен месяц назад. Сейчас идёт наблюдение за метриками — поведенческие данные показывают хорошую вовлечённость и интерес к контенту. Клиент остался доволен, дал положительный фидбек и уже рекомендует нас другим.
Спасибо большое, за то что проделали такую работу. Все круто! Мне понравился получившийся результат. Будем вас всем рекомендовать!

Анастасия Подшивалина, основательница агентства Clicado
Анимация всех экранов сайта
Для нашей студии этот проект стал одним из ключевых. Он максимально отражает то, на чём мы специализируемся: Tilda, визуальный интерактив, 3D-анимации, современные сайты без программирования, но с высоким уровнем реализации.
Если интересно посмотреть сайт вживую — переходите на clicado.ru.
Посмотреть другие проекты нашей студии можно на сайте unova.
Если есть вопросы по Тильде, Spline или просто хочется пообщаться — смело пишите, всегда рад диалогу!
А если вам близка тема 3D, интерактива и no-code разработки — заглядывайте в наш Telegram-канал.