Кейс: Tilda на максималках. Сочный продуктовый лендинг для карбоновых байков

Этим летом у нас в команде было жарко. Одним из интересных проектов, о котором хотелось бы рассказать, был продуктовый сайт для карбоновых велосипедов, в котором мы очень постарались с классной анимацией.

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

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

Syre — это небольшая команда собранная со всех уголков России и увлеченных одной идеей — создать идеально сбалансированные велосипеды, основываясь на опыте прошлого, чтобы воплотить сегодня байк будущего.

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

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

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

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

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

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

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

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

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

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

Чаще всего, верстая сайт на тильде исполнители просто забивают на непопулярные разрешения, ведь на них приходится от 1% до 3% всего трафика.

Например, усредненная статистика показывает, что скорее всего с 13 макбука с разрешением 1280х800 на ваш сайт зайдут меньше одного процента людей. Но ведь они зайдут, и увидят кривую анимацию. Так не пойдет, делаем еще несколько дополнительных блоков и прописываем код.

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

Получилось очень сочно, а главное эффект работает даже на мобильных устройствах.

Кстати заказчик реально выкрасил 15 банок кока колы в разные цвета, чтобы показать как цвет будет выглядеть вживую и не использовать рендеры. И отдельно позабавили креативные названия цветов вроде Pink Pig и Bahama Yellow.

Реализация подобных пунктов добавляет плюс в копилку удобностей тильды. Даже простой блок с размерами удалось сделать интереснее благодаря триггерной анимации встроенной в конструктор. Всего-навсего нужно подготовить 15 разных картинок для каждого состояния.

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

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

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

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

Если вы хотите делегировать создание сайта опытной команде, мы с радостью готовы помочь вам и начать сотрудничество с бесплатной консультации, где мы разберем стратегию и этапы работы. Оставляйте заявку на сайте команды Skvortsov — созвонимся и обсудим.

Если кейс вам понравился или оказался полезным, рекомендуем почитать и другие наши полезные материалы. Ниже топ статей нашей команды за последний год: