Статьи Unova https://unova.pro ru Sun, 18 Jan 2026 14:12:41 +0300 Как мы используем Spline для создания 3D-сайтов https://unova.pro/tpost/kak-mi-ispolzuem-spline-dlya-sozdaniya-saitov Mon, 06 Oct 2025 07:31:00 +0300 Глеб Говядинский

Как мы используем Spline для создания 3D-сайтов

Расскажу, зачем мы используем Spline, как встраиваем его в сайты, какие анимации используем и как оптимизируем сцены для стабильной работы.
Меня зовут Глеб Говядинский. Я дизайнер и основатель студии Unova. Мы делаем сайты на Тильде с интерактивными 3D анимациями.
Сплайн мы используем в собственных проектах. Также занимаемся разработкой 3D-сцен для других студий и команд. Чаще всего это коллаборации, где мы создаём интерактивные 3D-решения для сайтов.
Основная роль сплайна, как вы уже догадались — 3D анимация. Мы используем его для создания 3D-сцен, которые двигаются, откликаются на курсор и клики, реагируют на прокрутку и даже имитируют физику объектов и частиц. Такой подход делает сайт более живым и эффектным. Пользователь перестаёт быть наблюдателем и получает возможность управлять интерфейсом.

Для чего мы используем Spline на сайтах

Интерактивные 3D анимации помогают не только украсить сайт, но и решают ряд других важных задач.
  • Создают вау-эффект и формируют первое впечатление о бренде.
  • Выделяют сайт на фоне конкурентов.
  • За счет вовлеченного взаимодействия повышают лояльность к бренду, что увеличивает продажи.
  • Увеличивают время нахождения пользователя на сайте, что положительно сказывается на SEO.
  • Ну и да, это просто красиво.
Таким образом, сплайн-анимации не только добавляют красоты, но увеличивают бизнес-метрики.

Как мы встраиваем Spline в Тильду

Сначала мы создаём саму сцену в Spline, а потом добавляем её на сайт. Для размещения используем два подхода.

1. Через встроенный Spline Viewer.

Самый простой вариант — скопировать несколько строк кода и вставить их в HTML-блок Tilda. В этом случае сцена подгружается напрямую с серверов Spline.

2. Через API и хостинг на своей стороне.

Более сложный вариант — выгрузить сцену в формате .splinecode, загрузить ее в свой репозиторий и подключить через API @splinetool/runtime. Тогда сцена открывается уже с нашего хостинга, что дает больше контроля.

Какие интерактивные приемы мы чаще всего используем

Просто вставить 3D на сайт — недостаточно. Чтобы пользователь получил хороший опыт нужно настроить хороший интерактив.
В своей практике мы выделили несколько приёмов, которые особенно хорошо ощущаются пользователем внутри интерфейса.

1. Зацикленные анимации

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

2. Реакция камеры на курсор

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

3. Движение элемента за курсором.

Анимация, при которой элемент двигается вслед за курсором. Благодаря этому можно перемещать элемент по экрану, просто двигая мышью. Приём можно доработать — создать небольшой «паровозик»: первый элемент движется за курсором, второй — за первым, третий — за вторым. Это делает эффект заметнее и добавляет динамики сцене.
Важный момент. Чтобы 3D сцена добавленная на сайт стабильно реагировала на курсор, у всех элементов, размещённых поверх неё, нужно отключить взаимодействие с мышью (pointer-events: none). В противном случае эти элементы будут блокировать курсор, и 3D-сцена перестанет правильно отслеживать движения.

4. Движение источника света за курсором.

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

5. Слежение за курсором

Объект не двигается, а поворачивается за движением мыши — будто наблюдает за курсором. Эффект легкий, но сразу делает сцену живее.
Причём есть хитрость. Для слежения за курсором используется триггер «Look at», который можно направить либо на курсор, либо на другой объект. Если вместо курсора выбрать отдельный объект, Spline позволяет более гибко настроить поведение — задать ось вращения и плоскость, в которой будет улавливаться курсор. Поэтому, для более точного управления, мы создаём вспомогательный невидимый объект, который двигается за курсором, и указываем его как цель для «Look at». В итоге получаем то же слежение за курсором, но с более точной и гибкой настройкой.
Продвинутое слежение за курсором

6. Анимация по ховеру

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

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

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

8. Физика объектов

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

9. Анимация частиц

За счет частиц можно создавать интересные атмосферные сцены. А если привязать к курсору particle force, пользователь сможет взаимодействовать с ними — разгонять, отталкивать или притягивать.

10. Комбинация всех вышеописанных приемов

Настоящая магия начинается при комбинации всех этих приемов. Редко получается обойтись каким-то одним. Смешение всех выше описанных приемов открывает бесконечные возможности для создания интересных интерактивных 3D-сцен.
Пример нашей сцены, где всё собрано вместе: винты вращаются, корпус плавно поворачивается, глаза и панель следят за курсором, аппарат двигается за мышью, а при зажатии ЛКМ срабатывает анимация и физика. В итоге — ощущение, что управляешь настоящим живым объектом. Поиграться в реалтайме со сценой можно по ссылке

Как избежать лагов на сайте

Чтобы 3D-сцена работала плавно даже на слабых устройствах, важно следить за её оптимизацией. В Spline для этого есть встроенный инструмент — панель производительности, которая показывает, насколько сцена оптимизирована.
При работе нужно учитывать два ключевых показателя:
  1. Вес сцены — сколько данных нужно загрузить пользователю.
  2. Нагрузка на процессор — насколько сложно компьютеру просчитать анимации, тени и физику в реальном времени.

Оптимизация веса сцены

Вес напрямую влияет на скорость загрузки 3D на сайте. Чем меньше размер сцены, тем быстрее она отобразится у пользователя.
  1. Используйте форматы glb или gltf. Если вы импортируете модель, например, со Sketchfab, выбирайте именно эти форматы — они весят значительно меньше, чем fbx.
  2. Следите за количеством полигонов и объектов. Чем их меньше, тем быстрее будет работать сцена. В Spline можно увидеть статистику прямо внутри интерфейса.
  3. Минимизируйте использование текстур. Особенно больших по размеру (в форматах JPG или PNG). Лучше по возможности использовать встроенные генеративные материалы и текстуры Spline — они почти не влияют на вес сцены.

Оптимизация производительности сцены

Даже лёгкая сцена может нагружать процессор, если в ней много вычислений в реальном времени.
  1. Не перебарщивайте с количеством анимаций. Чем их меньше, тем стабильнее FPS.
  2. Не используйте много источников света — особенно динамических.
  3. Удаляйте неиспользуемые материалы и эффекты.
  4. Отключайте отбрасывание и приём теней у тех объектов, где тени не влияют на итоговую картинку.
  5. Не злоупотребляйте частицами — они сильно нагружают сцену при движении и взаимодействиях.
  6. Избегайте размещения нескольких сцен Spline на одной странице
Всё это помогает достичь баланса между визуальной выразительностью и производительностью. Даже сложная 3D-сцена будет работать плавно — если грамотно контролировать её вес и оптимизировать работу в реальном времени.
На одном из конкурсов Tilda я делал 3D-сцену с китом. Хотел усилить атмосферу и добавил эффект преломления воды. Для этого поверх текстуры освещения наложил анимированную маску noise. Визуально это выглядело интересно, но производительность сразу упала почти вдвое. В итоге пришлось отказаться от эффекта ради стабильности.

Как мы тестируем

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

Итог

Spline — инструмент, который действительно меняет подход к no-code разработке. Он позволяет не просто добавить 3D на сайт, а создать более глубокое и вовлеченное взаимодействие между пользователем и интерфейсом. Даже простая сцена с минимальной анимацией способна заметно усилить впечатление от сайта и сделать его запоминающимся.
Мы используем Spline в своих проектах постоянно и можем уверенно рекомендовать его другим дизайнерам и студиям. Интерактивные элементы помогают не только усилить визуал, но и улучшить бизнес-показатели
]]> Кейс: Сайт на Тильде для производителя ограждений «Рубеж» https://unova.pro/tpost/keis-sait-na-tilde-dlya-proizvoditelya-ograzhdeniy Wed, 24 Sep 2025 08:56:00 +0300 Глеб Говядинский

Кейс: Сайт на Тильде для производителя ограждений «Рубеж»

В этом кейсе расскажу о проекте для компании «Рубеж» — производителя систем ограждений.
Меня зовут Глеб Говядинский, я дизайнер и основатель студии unova. Мы делаем сайты на Тильде с акцентом на эмоциональный дизайн и интерактивные 3D анимации.
Компания «Рубеж» обратилась с задачей обновить корпоративный сайт. Старый ресурс имел устаревший дизайн и запутанную структуру, что осложняло поиск информации и мешало восприятию. Новый сайт должен был быть современным, аккуратным и удобным.
При этом клиент отметил, что основная аудитория — люди старше сорока лет. Для них дизайн важно сделать более сдержанным и сервисным, без избыточных анимаций и отвлекающих деталей.

Прототип и структура

Работу начали с проектирования. На первом этапе определили, какие экраны будут на сайте, в какой последовательности и какое примерное содержание будет в каждом блоке. Для визуализации — отрисовали прототип и написали черновые тексты.
Итоговая структура включила в себя:
  • Hero-блок c позиционированием
  • Блок продукции с карточками
  • Блок о компании
  • Перебивка с формой обратной связи
  • Текстовый раздел про доставку и монтаж
  • Реализованные кейсы
  • Футер с контактами
Прототип главной страницы

Мудборд

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

Дизайн-концепция

В качестве цветовой палитры использовали светлую тему с темно-зелеными акцентами. Этот цвет максимально близок к тематике, так как используется в самой продукции клиента.
Анимация дизайн-концепции
В композиции применили бенто-сетки, что позволило аккуратно упорядочить элементы и создать удобный ритм для восприятия.
Большую роль в подаче сыграли фотографии продукции — они заняли заметное место в макете, усилили подачу и визуализировали продукт клиента.
Для преимуществ подобрали абстрактные иконки. Это добавило акценты и создало узловые точки, за которые цепляется взгляд клиента при просмотре блока.
Блок «О компании»
Уделили отдельное внимание мобильным адаптивам. На этапе концепции сразу подготовили макеты для смартфонов, чтобы убедиться, что все решения будут одинаково корректно работать на всех устройствах.
Адаптивы

Альтернативная версия

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

Верстка и реализация

Сайт полностью собрали на Zero блоках. Но это уже база. Этим никого не удивишь. Но в этот раз, верстка была сделана полностью на основе FLEX функционала тильды. Это аналог автолайаутов фигмы. Новый подход значительно ускорил процесс сборки. Верстка получилась более гибкая и лучше адаптируется под различную высоту и ширину экрана.
Для загрузки сайта реализовали кастомный прелоадер — сделали иллюстрацию забора в контурной стилистике, которая с помощью CSS-анимации меняет цвет и выполняет функцию прогресс-бара. Этот же забор использовали на 404-ой
Прелоадер
В верстке применили несколько кастомных модификаторов. Среди них — плавный скролл, слайдер для кейсов и ховер-эффект карточек, при котором изображение увеличивается, а текст меняет цвет.
Ховер карточек
Остальные анимации сделали стандартно, через step by step.

Не обошлось без нейронок

Клиент предоставил фотографии, но не все они подходили для прямого использования. Чтобы улучшить их качество и привести к единому стилю, мы использовали генерацию ChatGPT
Для hero-блока почистили шумы у изображения
Было/стало
Для перебивки попросили нейросеть убрать потертости, ржавчину, лужи под станком и перекрасить цвет
Было/стало
Для кейсов заапскейлили очень мелкое и пережатое изображение
Было/стало

Финальные шаги

На заключительном этапе мы провели тестирование и внесли все необходимые настройки. Были прописаны title и description, настроены теги заголовков, добавлен favicon и подготовлено корректное превью для социальных сетей. Для улучшения SEO мы добавили микроразметку. Все изображения были сжаты и переведены в формат WebP.
Дополнительно мы подготовили страницы политики конфиденциальности и согласия на обработку данных. После этого подключили домен, установили SSL-сертификат, настроили отправку форм заявок на почту клиента и интегрировали Яндекс.Метрику.

Результат

В итоге получился сдержанный и понятный сайт, который соответствует ожиданиям целевой аудитории и при этом выглядит чисто и современно.
Проект был завершён и принят практически без правок. Клиент остался доволен результатом.
Если интересно посмотреть сайт вживую — переходите по ссылке
]]> Презентация дизайн-концепции сайта. Как согласовывать дизайн с первого показа https://unova.pro/tpost/prezentatsiya-dizain-kontseptsii-saita Tue, 02 Sep 2025 11:54:00 +0300 Глеб Говядинский

Презентация дизайн-концепции сайта. Как согласовывать дизайн с первого показа

Делюсь опытом, как организовать презентацию дизайна сайта так, чтобы утвердить макет с первой попытки. Подход, который почти всегда срабатывает.
Меня зовут Глеб Говядинский — я дизайнер и основатель студии unova. Мы делаем сайты на Тильде с интерактивными 3D-анимациями.
Я UX/UI дизайнер с опытом более 7 лет. За это время я успел презентовать десятки дизайн-концепций и понял одну важную вещь — сделать хороший дизайн это только половина успеха. Вторая половина — это то, как ты его показываешь и продаешь клиенту.
Когда я только начинал работать на фрилансе, мне казалось, что достаточно подготовить макет и просто кинуть ссылкой в заказчика «Дизайн готов. Посмотрите». На практике это оказалось плохим сценарием. Клиент мог ничего не понять, не уловить идеи, начать сомневаться и либо завернуть концепцию полностью, либо завалить правками.

Почему нельзя оставлять клиента наедине с макетом

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

Звонок вместо ссылки

Мы всегда показываем концепцию на звонке, а не ссылкой в чате. Встреча обычно длится не меньше часа. Обязательно приглашаем ЛПР — того, кто реально принимает решение. Это очень важно — первое впечатление должно формироваться у человека, от которого зависит утверждение.
Перед началом презентации озвучиваем регламент звонка и просим клиента фиксировать все вопросы, которые появятся в процессе. Объясняем, что обсудим их после показа целиком. Это помогает и мне не сбиваться на ответы посреди повествования, и клиенту сохранять целостность восприятия. Часто бывает так, что вопросы, которые возникают в начале, сами отпадают на следующих слайдах.
Есть еще один прием, который мы используем. Никогда не говорим: «мы презентуем дизайн». Такая фраза будто поднимает клиента выше нас. Мы презентуем, а он сидит и выносит вердикт. Вместо этого мы говорим: «Давайте посмотрим и обсудим дизайн-концепцию». Казалось бы, мелочь, но именно она выравнивает позиции и превращает процесс в совместное обсуждение.

Структура презентации

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

Обложка

Обложка нужна не только ради красоты, но еще и как «заглушка». Пока вы приветствуете клиента, даете вводное слово и озвучиваете регламент звонка, на экране висит нейтральный слайд. Он должен быть простым и минималистичным, чтобы ничто не отвлекало клиента от вашей речи.
Важный момент — на обложке нельзя использовать элементы будущей концепции. Это заспойлерит дизайн и разрушит эффект интриги.

Аналитика

Напоминаем, какие предварительные исследования мы проводили и на основе чего проектировали структуру сайта. Это возвращает клиента в контекст и показывает, что дизайн — это логичное продолжение.

Прототип

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

Мудборд

Слайд с референсами, которые клиент отметил на этапе мудборда. Мы напоминаем, какие решения тогда зашли клиенту — какие цветовые гаммы, какие шрифты, какие визуальные приемы. Это помогает плавно связать прошлые этапы с текущей концепцией.

Анимированная дизайн-концепция в мокапе

На этом слайде мы показываем концепцию «вживую» — в мокапе ноутбука. Причем сначала используем небольшой трюк — поверх мокапа накладываем размытие и говорим что-то вроде «И вот, наконец-то, результат всей нашей работы, барабанная дробь, исторический момент». Нагнетаем интригу, а потом снимаем размытие и показываем главный экран сайта с анимацией.
Этим приемом мы достигаем сразу нескольких целей:
  • показываем концепцию в презентабельном виде
  • даем клиенту понять, как сайт будет выглядеть на реальном устройстве
  • показываем ключевой визуал дизайн-концепции с ключевой анимацией

Дизайн концепция в полный рост

После мокапа показываем макет целиком. Здесь мы подробно разбираем каждый блок: сетку, цветовую гамму, шрифты, приемы композиции, баланс воздуха и контента. Всё это сопровождаем комментариями, чтобы клиент видел не просто картинку, а понимал, почему выбраны именно эти приемы. Ссылаемся на некоторые решения из мудборда. Раскрываем идеи метафор, заложенные в стилистику. Объясняем, как стилистика пересекается с продуктом клиента.
Фрагмент презентации слайда концепции в полный рост
Мы показываем презентацию в фигме. Это позволяет сделать макет кликабельным и интерактивным. Сразу показать анимации по наведению, переходы между страницами, закрепленные по скроллу элементы, всплывающие окна. В отдельных случаях собираем анимацию в After Effects, но обычно хватает стандартной смарт-анимации фигмы.

Адаптивы

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

Miniguide

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

Дополнительные материалы

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

Альтернативная версия

Когда клиент уже посмотрел концепцию, адаптивы и все материалы, он думает, что презентация подходит к концу. В этот момент мы говорим: «Демонстрация дизайн-концепции подходит к концу… Хотелось бы сказать. Но нет. Вишенка на торте — альтернативная версия». Обычно на этом месте клиент расплывается в улыбке 😊
Фишка в том, что по договору мы готовим одну концепцию. И именно этого ждет клиент. Но в процессе всегда рождается больше идей, чем можно уместить в одну. Чтобы не терять ценные решения, мы готовим вторую концепцию — полностью самостоятельную, с другой цветовой гаммой, другими шрифтами и другой композицией.
Эта версия всегда становится вау-эффектом. Клиент не знал, что она есть, и воспринимает её как бонус. Мы также показываем её сначала в мокапе, а затем в полный рост, с разбором всех стилеобразующих решений.

Сравнение версий

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

Завершение презентации

Последний слайд — «Спасибо. Есть вопросы, обсудим». На нём мы говорим: «Спасибо, мы проделали большую работу, нам самим очень нравится результат. Хотим услышать ваши первые впечатления и обсудить вопросы, которые у вас возникли в процессе».
Очень важно именно здесь снять с клиента первое ощущение. Понять понравился клиенту дизайн или нет. Получить первые эмоции.
После этого я возвращаю слайд со сравнением концепций, чтобы во время обсуждения обе версии были перед глазами. Так клиенту проще ориентироваться.
Как правило, клиент говорит, какая из версий понравилась больше. Далее обсуждаем вопросы и комментарии. После чего обещаем прислать митинг-репорт и ссылку на презентацию и прощаемся.

Резюмирую

Этот способ презентации мы проверили на множестве проектов, и почти всегда концепцию принимали сразу. Ещё раз выделю главные мысли.
  • Презентуйте на звонке. Макет нельзя показывать просто ссылкой. На звонке вы сможете объяснить все решения и подчеркнуть ценность работы, иначе восприятие дизайна будет искажено.
  • На звонке обязательно должен быть ЛПР. Первое впечатление и аргументация должны быть направлены именно на него. Если подключить его невозможно, настаивайте на том, чтобы он посмотрел запись звонка. Так аргументы дойдут до него в первозданном виде, а не «через глухой телефон».
  • Перед звонком проговорите регламент и предложите клиенту записывать вопросы, чтобы обсудить их после презентации. Многие вопросы, появившиеся в начале, решаются сами во время демонстрации.
  • Будьте эмоциональны на звонке. Веселая и позитивная подача заряжает клиента и задает правильный тон для обсуждения.
  • Напоминайте о предыдущих этапах. Это помогает клиенту вспомнить пройденные шаги и понять, что дизайн формировался последовательно, с учетом согласованных решений. В итоге уменьшается шанс услышать «это все не то», так как клиент признает свою роль в согласовании этапов. Такой подход частично распределяет ответственность и снижает риск, что концепцию полностью завернут.
  • Анимируйте интерфейс. Даже небольшие интерактивные элементы делают концепцию живой и помогают клиенту почувствовать сайт в действии.
  • Показывайте дополнительные артефакты. Стилевая система, адаптивы, 3D или иллюстрации — все это подчеркивает масштаб и глубину работы.
  • Превышайте ожидания. Альтернативная версия дизайн-концепции — это всегда вау-эффект. Она показывает, что вы заморочились и сделали больше, чем прописано в договоре, а клиент получает приятный бонус и чувство выбора.
Надеюсь, мои наблюдения помогут вам в работе и сэкономят нервы на согласованиях. Если тема откликнулась — подписывайтесь на телеграм-канал, там я делюсь новыми проектами и полезными материалами.
]]> Сделали лендинг с 3D-анимацией на Тильде для Tilda Design Battle за 15 часов https://unova.pro/tpost/sdelali-lending-s-3d-animatsiei-na-tilde Mon, 18 Aug 2025 12:09:00 +0300 Глеб Говядинский

Сделали лендинг с 3D-анимацией на Тильде для Tilda Design Battle за 15 часов

В ноябре прошлого года участвовали в конкурсе — Tilda Design Battle 4. Его суть — за 15 часов сделать креативный сайт на Тильде с анимациями и полноценными адаптивами. Захотелось проверить свои силы — и я вписался. Рассказываю, как это было.
Привет. Меня зовут Глеб Говядинский — я дизайнер и основатель студии unova. Мы создаём сайты на Тильде с интерактивными 3D анимациями
Тема батла была — тур на остров Маврикий для встречи с китами.
Мы давно используем связку с Spline + Tilda в коммерческих проектах, и для конкурса выбрали такую же технологию. Это был шанс показать нашу сильную сторону и выделиться на фоне остальных участников.
3D на Тильде? Да ещё и интерактивное, с реакцией на курсор? И всё это за 15 часов? Что? Такого ещё никто не делал. Вызов принят! Погнали!

Начал с разработки 3D-сцены

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

Этапы разработки 3D

3D — мощная штука, но требует времени. На всю работу с 3D-сценой ушло 5 часов из выделенных 15. Пока другие участники уже завершали отрисовку дизайна и начинали вёрстку, я ещё даже не добрался до фигмы, а сидел развлекался в Spline. На что же я потратил эти 5 часов?

1. Подбор и настройка 3D-модели

Моделировать кита с нуля было некогда. Зашёл на Sketchfab, нашёл уже заанимированную модель кашалота, импортировал в сцену, добавил зацикленное движение вверх-вниз — и вуаля! Основа для 3D-сцены готова.

2. Настройка текстур и материалов

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

3. Освещение

В сцене два источника света:
  • Первый отвечает за основное освещение кита.
  • Второй создаёт мягкий блик на спине, подчёркивая объём.

4. Окружение

Чтобы усилить реалистичность подводного пространства, добавил:
Фон сцены
Настроил глубокий тёмно-синий фон. Он стал базой всей цветовой схемы сайта. Добавил лёгкий туман, чтобы дальние объекты мягко растворялись в фоне.
Солнечные лучи
Добавил анимацию размытых солнечных лучей, проникающих сквозь толщу воды. Реализовано это хитрым способом — на заднем плане размещены узкие полупрозрачные панели с белым градиентом, которые хаотично движутся вдоль одной оси. А спереди — невидимая стеклянная панель, которая размывает всё, что за ней. Получился мягкий, реалистичный свет.
Пузырьки воздуха
С помощью генератора частиц добавил пузырьки, плывущие навстречу киту. Это усилило иллюзию движения и глубины.
Второго кита
Кашалоты — не одиночки, они живут стаями. Чтобы нашему киту не было скучно, добавил ему братишку на задний план. Один — хорошо, а два — лучше.
Прогресс создания окружения

5. Интерактив с курсором

Добавил мягкий поворот камеры при движении мыши. Получилась плавная и ненавязчивая анимация, которая добавляет живости и подчёркивает объём.
В итоге вышло то, ради чего всё и затевалось — сцена, в которую просто залипаешь. Всё двигается, переливается, плавает. Ощущение живого подводного мира.
Готовая 3D-сцена опубликована в нашем Spline-профиле. Забирайте, ремиксуйте, используйте в своих проектах

Тестирование и оптимизация

На моём компьютере всё работало идеально — плавно и без лагов. Но тестирование на ноутбуке выявило проблему: 3D сильно нагружало систему слабых устройств.
В чём дело? Полигонов немного. Лишние материалы удалены. Текстуры сжаты. Всё вроде оптимизировано…
Оказалось, что одна из анимированных текстур, имитирующая преломлённые лучи света на поверхности кита, сильно грузила систему. Пришлось её убрать. Всё — сразу полегчало и сцена стала работать стабильно и плавно даже на стареньком ноуте.
С мобильными устройствами — отдельная история. Флагманские модели ещё справляются с 3D-сценами из Spline, но мой древний Redmi Note 5 просто отказывается загружать сайт, если в нём встроена даже самая лёгкая сцена с шестью полигонами.
Чтобы решить эту проблему, специально для мобильных устройств мы используем выгрузку зацикленного видео из 3D-сцены. Да, это лишает пользователя интерактива, но сохраняет все анимации, не нагружая производительность телефона.
Для конкурсной работы сделал точно так же — выгрузил 3D в зацикленное видео и добавил в качестве фона на мобильных адаптивах.

Дизайн

После завершения 3D-сцены принялся за отрисовку дизайна сайта. Это заняло ещё 5 часов. Тут всё проще и привычнее: открыл фигму — и рисуй блок за блоком. Все тексты были указаны в ТЗ конкурса. Оставалось только продумать расположение и визуальную подачу элементов. Получился лендинг из 6 блоков.
При отрисовке опирался на принципы современного дизайна:
  • Соблюдал визуальную иерархию, работал с контрастами, выравниваниями и унифицированными отступами.
  • Отказался от классической сетки — разделил её на две зоны, расставил силовые линии, по которым выстраивал композицию.
  • Поддерживал визуальный ритм — чередовал текст и визуал, чтобы блоки смотрелись живо и не перегружали восприятие.
  • Придерживался минимализма — гармонично балансировал контент и воздух, не перегружал лишним визуальным шумом.
  • Добавлял мелкие декоративные детали и иконки — для усиления композиции и визуальных акцентов.
Концепция получилась цельной и завершённой — она точно передавала настроение и суть сайта. Конечно, можно было ещё докрутить отдельные детали, улучшить UI некоторых блоков. Но времени было впритык, и нужно было переходить к вёрстке.

Вёрстка в Тильде

После этого началась финальная сборка в Tilda (5 часов). Дизайн был нестандартным, поэтому всё собирал на зеро-блоках.
Быстро понял, что времени не хватает. Пришлось расставлять приоритеты. Сначала сделал десктоп, потом мобильные разрешения. Планшеты в итоге не успел проработать.
По умолчанию максимальное разрешение в Тильде — 1200 px. Но хотелось, чтобы сайт круто смотрелся и на 1440 px, и на 1920 px, поэтому добавил эти разрешения вручную и сделал под них отдельную вёрстку.

Не обошлось без скриптов

Чтобы добавить сайту индивидуальности, применил 3 модификатора:
  • Кастомный курсор. Заменил стандартный курсор на круг, который при наведении на кликабельные элементы плавно превращается в точку.
  • Анимация появления изображений. Модификатор, который добавил плавную анимацию появления изображений с интересным эффектом смещения.
  • Горизонтальный скролл. В блоке с фотографиями использовал скрипт, для плавного перетягивания фото по горизонтальному скроллу.
Для всех остальных анимаций использовал стандартный step by step Тильды.
Ссылка на готовый проект seewhale-promo.tilda.ws
Для адаптивной версии под мобильные разрешения сделал бургер-меню.

Итоги баттла

В конкурсе участвовало 130 человек. В шорт-лист вошли 10 финалистов, но мой сайт туда не попал из-за отсутствия палншетного адаптива. Однако жюри всё равно выделило мою работу и показало её в финальном разборе, отметив оригинальность идеи и проработку 3D.
Действительно, это выглядит эффектно, очень органично и здорово. С этим хочется развлекаться. Ты ловишь себя на ощущении, как-будто бы кит смотрит прямо на тебя, под каким углом не посмотри. Работа очень достойная.
Антон Командин, арт-директор Experience Agency, жюри
Результат: 25-е место из 130.
Но самое главное — я снова подтвердил гипотезу, что связка Spline + Tilda работает и позволяет делать сайты, которые заметно выделяются на фоне обычных сайтов.

Доработки после конкурса

После баттла я полностью завершил проект:
  • Сделал недостающие адаптивы.
  • Создал прелоудер для мягкой загрузки сайта.
  • Разработал кастомную 404-страницу, где вместо кита теперь плавают цифры «404».
  • Сделал favicon и SEO-настройки.
Страница «Ошибка 404»

Выводы после конкурса

  1. За 15 часов реально сделать хороший, сильный сайт на тильде с крутым дизайном и проработанными анимациями.
  2. Связка Spline + Tilda — действительно рабочий инструмент. Позволяет быстро собрать эффектный 3D-сайт без навыков кодинга или знаний Three.js.
  3. Tilda Design Battle — классный формат. Ограничения времени только подогревают интерес, и ты реально растёшь в процессе. Отличная встряска и мощная прокачка. Хоть выиграть не удалось — сама атмосфера и процесс мне понравились. Обязательно поучаствую в следующем баттле.
В итоге я получил классный опыт. Проверил себя и посоревновался с другими. Хоть и выиграть не удалось, ни о чем не сожалею. Планирую и дальше участвовать в последующих баттлах от Тильды.
Этот проект и другие проекты студии, можете посмотреть на нашем сайте.
А следить за новостями и интересными кейсами из сферы интерактивного 3D дизайна можете в нашем Telegram
]]> Наш путь в Spline Community — от первых сцен до «Дизайнера недели» https://unova.pro/tpost/nash-put-v-spline-community Sun, 10 Aug 2025 12:28:00 +0300 Глеб Говядинский

Наш путь в Spline Community — от первых сцен до «Дизайнера недели»

Делюсь историей, как я залетел в Spline Community, прокачал профиль и два раза получил награду «Designer of the week».

Предыстория

Меня зовут Глеб Говядинский — я дизайнер и основатель студии unova — мы делаем сайты на Тильде и Таптопе с упором на интерактивное 3D. Последние 7 лет я занимаюсь дизайном интерфейсов и активно использую 3D в своих проектах. Долгое время я ограничивался классическим 3D — собирал сцены в Cinema 4D, рендерил и добавлял в дизайн в виде картинок, либо видео в MP4 или PNG-секвенциями. Получалось неплохо, но не хватало интерактива. Хотелось, чтобы пользователь мог взаимодействовать с объектами прямо на сайте. В общем, хотелось уметь в крутое интерактивное 3D, чтоб прям как на сайтах awwwards.
Я знал, что такие интерактивные сайты делают, используя Three.js. Но без кодерского опыта мне такое было не доступно. Всё это время я искал что-то похожее, но с интерфейсом. Так я и нашёл Spline.

Знакомство со Spline

Spline — это онлайн-сервис, который позволяет делать трёхмерные сцены прямо в браузере. Он чем-то похож на Фигму, только для 3D. В нём можно моделировать простые фигуры, настраивать освещение, материалы, камеры, анимации и взаимодействия — почти всё как в Cinema 4D, только попроще и в реалтайме.
Я попробовал Spline и понял, что это как раз то, что нужно — возможность собирать интерактивное 3D без погружения в код. Начал с небольших обучалок, тестовых сцен, потом перешёл к более сложным проектам. Сейчас уже прокачался и свободно использую его в коммерческих задачах.

Публикации в Spline Community

В Spline есть открытая галерея — Spline Community. Любой пользователь может выкладывать туда свои работы.
Я решил попробовать. Сохранял интересные 3D-референсы в заметках, а когда появлялось время — делал по ним сцены в Spline. Иногда полностью копировал референсы, иногда делал что-то своё и публиковал.
Интересно было, что отклик произошёл практически сразу — уже после второй публикации я смог попасть в закреплённую подборку лучших проектов.
Какие-то работы залетали, какие-то нет. Самое любопытное — лучше всего заходили простые, но залипательные сценки. Я тратил на них меньше всего времени, при это они получали максимальный отклик комьюнити.

Примеры работ, которые залетели

Анимированная абстрактная жидкость
Ссылка на проект
Простая сцена с жидкой анимированной абстракцией с эффектом следования капель за курсором. Работа была сделана за пару часов по референсу. В итоге провисела в закрепленных проектов на главной странице сплайна несколько месяцев и собрала 1,3к лайков и 7,7к ремиксов.
Интерактивный радиальный паттерн
Ссылка на проект
Простая сцена с радиальным узором. За курсором летает светящаяся сферка, которая при приближении к фигуре изменяет цвет лепестков. На эту работу также ушло не больше 3 часов, но она тоже залетела в закреп и находилась там больше месяца. Сейчас на ней 4,9к ремиксов и почти 800 лайков.
А были работы, на которые я тратил по 16+ часов, упарывался в детали, но после публикации работа оставалась почти без внимания комьюнити.

Примеры — которые не залетели

Интерактивная робо-рука
Ссылка на проект
Проработанная сцена с механической рукой, которая следит за курсором. Здесь и вращение элементов в разных плоскостях, и зацикленная анимация движения носовой части и фоновый UI интерфейса, и движение текста на фоне в зависимости от положения курсора — и... всего лишь 154 лайка и 313 ремиксов. Грех жаловаться — но в сравнении с предыдущими работами «не густо»😊
Рождественское вторжение
Ссылка на проект
В этой сцене вообще был полный набор. Множество зацикленных анимаций, слежение за курсором, динамический свет, псевдоинерция, частицы — технически очень проработанный проект, который так и не сыскал высоких оценок. На выходе 47 лайков и 187 ремиксов. Лично мне он по-прежнему нравится. Я иногда открываю его, полетать и полюбоваться рождественской атмосферой.
Прикольно было, что некоторые работы замечала команда Spline и делала по ним шортсы на официальном YouTube-канале сплайна. Таких моменты очень мотивировали дальше развивать профиль и неплохо подогревали ЧСВ.
За 9 месяцев в моём профиле накопилось 18 работ. Комьюнити оказалось очень активным: каждый день прилетали уведомления о лайках и дублировании моих сцен. За это время набралось 406 подписчиков, 52к просмотров, 15,5к ремиксов и 3,1к лайков.

Designer of the Week

В конце прошлого года я зашёл в Spline Community и увидел свой профиль на первом экране — меня выбрали «Designer of the Week». Для тех, кто не знаком со Spline Community, это один из способов, как платформа выделяет авторов, чьи работы заметили модераторы.
Целую неделю профиль был закреплён на главной странице, а рядом красовалась наградная медалька. Медалька, кстати, остаётся в профиле навсегда в качестве приятного бонуса. Честно говоря, это был очень приятный момент — ощущение, что твои сцены реально нашли отклик и тебя заметили среди сотен других дизайнеров.
За ту неделю подписчиков стало заметно больше, а активность в профиле выросла в разы. Начали писать студии и фрилансеры, которые искали разработчика интерактивных сцен для своих проектов. Пару таких заказов мы реализовали, и это было как раз тем самым бонусом, который идёт в комплект к моральному удовлетворению. Я понял, что выкладывать работы в комьюнити — это не просто про лайки и просмотры, а про реальные шансы получить лидов и клиентов.

Советы тем, кто тоже хочет в Spline Community

Не бойтесь публиковать
Это вообще несложно. Как показала практика, сцену можно накидать за пару часов — и есть шанс, что она хайпанёт. Опубликовать сцену можно в пару кликов. Есть ощущение, что платформа поддерживает новых авторов. Если вы только стартуете и выложите неплохую сцену, то есть большой шанс, что её заметят и выведут в закреп.
Добавляйте интерактив
Красивая сцена — это хорошо, но когда в сцене есть «залипательная» интерактивная анимация, аудитория реагирует намного лучше. С такой сценой хочется поиграться, подвигать, кликнуть — и это удерживает внимание.
Делайте базовое оформление
Не поленитесь сделать кастомное превью, придумать внятное название и прописать теги с описанием. Так ваша работа выделится в общем списке, а по тегам и описанию её смогут найти через поиск.
Будьте активны в комьюнити
Лайкайте и подписывайтесь на авторов, чьи работы вам нравятся. Тогда и они будут заходить к вам, смотреть ваши сцены и оставлять реакцию. Первый месяц я сам заходил на каждый профиль тех, кто лайкнул мои работы, и если у них были классные проекты — оценивал их и подписывался. Работает на взаимность.

Ну и финалочка…

Через 8 месяцев после первого раза история повторилась — мой профиль снова в «Designer of the Week». Прямо сейчас он висит на главной. Кто заинтересовался тематикой и есть желание, можете зайти посмотреть остальные проекты и полайкать, если что-то понравится 😉
Если есть какие-то вопросы по сплайну и необходима помощь или совет, пишите в личку. Буду рад помочь!
]]> Кейс: Clicado — сайт на Тильде с 3D-анимацией, неймингом и логотипом под ключ за 4 недели https://unova.pro/tpost/keis-clicado-sait-na-tilde-s-3d Tue, 15 Jul 2025 12:40:00 +0300 Глеб Говядинский

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

В этом кейсе расскажу, как мы за 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-канал.
]]>