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

Клиент пришёл с задачей разработать сайт под ключ на Тильде за 4 недели. Исходных материалов не было. Но были референсы: один — как ориентир по визуалу (3D, плавные анимации, интерактив по курсору), второй — с подходящей структурой. Это стало основой для дальнейшей работы.

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

Отдельным приоритетом были визуальные детали: эстетика, плавность анимаций, интерактив по курсору.

В рамках проекта было решено:

· придумать название бренда и разработать логотип;

· создать фирменный стиль и визуальную концепцию;

· разработать структуру сайта с нуля и подготовить тексты;

· внедрить интерактивные 3D-объекты и анимации в Spline;

· сверстать сайт на Tilda с адаптивностью и плавными эффектами;

· интегрировать формы заявок и подключить аналитику;

· подготовить сайт к полноценному запуску за 4 недели.

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

На основе анализа мы собрали финальную структуру сайта:

· Промо-экран с позиционированием

· Блок о компании

· Преимущества

· Кейсы

· Этапы работы

· Услуги

· Формы захвата

· Футер

Мы сразу собрали прототип, чтобы визуально показать клиенту расположение блоков, из каких элементов они будут состоять и какой нам видится текст на сайте. Структура была согласована практически сразу. Некоторые детали — например, формат показа этапов работы — были доработаны по ходу. Из мелких правок — заменили горизонтальный скролл на вертикальный в блоке с этапами, чтобы сохранить общую ритмику и упростить взаимодействие.

Прототип сайта:

Поскольку у клиента не было ни названия, ни визуального образа компании, мы взяли эту часть на себя.

Предложили рабочее название — Clicado. Оно отсылает к слову "click" и легко воспринимается на слух. Для логотипа использовали минималистичную метафору: курсор встроен в последнюю букву «О». Чтобы визуализировать будущий бренд, мы сделали мокапы с логотипом — на визитках, футболках и сувенирке. Это помогло клиенту оценить, как будет выглядеть фирменный стиль в жизни. Название и логотип были сразу приняты.

На этапе мудборда вместе с клиентом определили вектор по визуалу:

· тёмная цветовая палитра с контрастными вставками

· интерактивные 3D анимации

· многослойность и глубина

· минимализм и «воздух»

· шрифт Inter Tight — простой, понятный, интерфейсный

· аккуратные микроанимации

· глассморфизм

· выравнивание по силовой линии

· стиль бенто-сеток в карточках

Всё это легло в основу цельной визуальной системы, где анимации и 3D дополняют структуру, не перегружая восприятие.

Ключевой элемент — интерактивная 3D-анимация, реализованная через Spline

Первая сцена в промо-экране

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

Добавили интерактивность:

· кольца зациклено вращаются вокруг своей оси

· по движению курсор сцена плавно смещается

· за курсором двигается градиентное световое пятно

· на фоне — паттерн из точек и анимированные градиентные пятна

3D анимация в первом экране:

Анимация по скроллу

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

Во время этого движения появляются текстовые тезисы, которые дополняют анимацию и усиливают смысл.

После — сцена уходит за блок о компании, создавая эффект глубины сайта.

3D-анимация по скроллу:

Блок преимуществ

Следующая 3D-сцена — визуализация воронки продаж. Те же стеклянные кольца, но теперь они расположены друг под другом. Через них по скроллу проходит фиолетовая сфера, создавая визуальную метафору прохождения клиента через этапы воронки.

3D-анимация в блоке «Преимущества»:

Этапы работы

В этой сцене кольца превращаются в звенья цепи. При скролле они последовательно появляются и начинают вращаться, символизируя логичность и связанность этапов.

3D-анимация в блоке «Этапы работы»:

Завершающая сцена

На последнем экране снова возвращается первая 3D-сцена — кольца, которые теперь смещаются в центр. Рядом форма для отправки заявки. В этот момент создаётся кольцевая композиция: 3D-компонент по центру, интерфейс вокруг, и плавный переход в футер.

3D анимация в футере:

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

Мы сделали 4 отдельных проекта в Spline — для каждого брейкпоинта. В каждом задали свои параметры скролла и переключений. Это потребовало времени, но позволило сохранить все интерактивные задумки и производительность даже на слабых устройствах.

Сайт собран полностью на зеро-блоках. Анимация интерфейса выстроена через step-by-step и кастомные модификаторы.

Основные особенности:

· Плавный скролл

· Кастомный скроллбар

· Динамическая шапка, меняющая цвет в зависимости от фона экрана

· Кастомный прелоадер

· Кастомный ок-попап

· Слайдер с кейсами

Блок кейсов

Блок кейсов получился визуально насыщенным и функциональным.

Он собран в слайдере, в котором каждая карточка оформлена в приятную композицию бенто-сетки.

Каждая карточка содержит краткую информацию, а при нажатии «Изучить кейс» — открывается попап с подробной информацией.

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

Адаптивность и оптимизация

Сайт адаптирован под все разрешения, включая мобильные и планшеты.

На десктопе работают интерактивные 3D-сцены. А вот на мобильных и планшетах — вместо тяжёлой 3D анимации используются фоны с зацикленными видео, которые передают тот же визуальный эффект, но не перегружают устройство. Это было важным решением для сохранения производительности.

404-страница

Для сайта была сделана кастомная страница ошибки 404, в которой мы адаптировали 3D-анимацию под тему страницы. Замоделили в том же стиле цифру 404. Вместо нуля — стеклянное кольцо с зацикленной анимацией вращения.

3D-анимация на странице 404:

Изначально мы собрали примерные тексты, чтобы показать структуру. На их основе клиент доработал финальные версии. Тексты для кейсов и части изображений были также предоставлены заказчиком.

Вся подача — простая, конкретная, с ориентацией на действие и понятность, без перегруза терминами.

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

Подключили Яндекс.Метрику, с возможностью отслеживать ключевые действия на сайте.

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

В этой версии:

· Основой стала светлая цветовая гамма

· Для заголовков мы использовали более акцидентный шрифт, чтобы усилить визуальный ритм

· Были переработаны 3D-сцены под новую палитру

· Изменилась композиция некоторых блоков — версия стала визуально «легче»

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

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