Лендинг кроссовок: пример, где модель разбирается по слоям

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

Темп 38

Беговые кроссовки, которые не стыдно разобрать.

248 г в размере 42, размеры 39–45

Выбрать размер

Верх

86г

сетка в один слой, шнуровка на месте

Дышит и не натирает: в носке нет ни одного шва.

Пена

38мм

в пятке, два слоя: 8 + 30 мм

Мягкий слой сверху гасит удар, упругий снизу возвращает энергию в шаг.

Подошва

4мм

резина, глубина протектора

Держит мокрый асфальт, гравий в протекторе не застревает.

Что внутри «Темп 38»

Четыре слоя и шнуровка, у каждой детали своя работа. Вместе — 248 граммов в размере 42.

Размер

Деталь	Материал	Размер	Зачем
Верх	сетка в один слой	86 г	дышит и не натирает на длинной дистанции
Шнурки	плоские, с рифлением	120 см	не развязываются на бегу
Пена сверху	мягкая	8 мм	гасит удар при приземлении
Пена снизу	упругая	30 / 22 мм	возвращает энергию в шаг
Подошва	резина	протектор 4 мм	сцепление на мокром асфальте

Как сделано

Как устроен этот лендинг кроссовок

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

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

Как сделан пример

75 кадров 1600×900, которыми управляет прокрутка: вниз — модель раскладывается, стоит разобранной и собирается обратно, вверх — всё в обратном порядке
Каждый кадр — отдельный файл WebP, загруженный в Тильду. Вся сцена весит 2,2 МБ, один кадр — 26–39 КБ
Первый кадр появляется сразу, остальные догружаются по ходу прокрутки: страница не ждёт, пока придёт вся сцена
Выноски привязаны к слоям: линия идёт за деталью, пока та отходит, и прячется, когда модель собирается
На телефоне своя раскладка: модель по ширине экрана, под ней одна выноска — про слой, который сейчас разошёлся
Работает на Tilda — пример стоит обычным блоком HTML-кода — и так же на сайте на коде. Кадры сгенерированы, бренда «Темп» не существует; откуда берутся кадры для настоящего товара, разобрано на странице «Видео по скроллу»

Структура

Что должно быть на лендинге кроссовок

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

Первый экран с моделью и предложением

Название модели, цена или «от», одна главная кнопка. Сцена стоит здесь: пока человек листает, он уже рассматривает товар, а не меню.

Детали, по которым видно качество

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

Размеры и подсказка по посадке

Размеры кнопками, таблица длины стопы, строка «маломерит или нет». Главный вопрос покупки обуви онлайн — угадать с размером, и страница отвечает на него раньше, чем человек напишет в чат.

Доставка, примерка, возврат

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

Живые фото и отзывы

Сцена показывает устройство модели, фото на ноге — как пара выглядит в жизни. Одно без другого продаёт хуже: нужны обе стороны.

Заказ без лишних шагов

Корзина, быстрый заказ по телефону или переход в каталог, если моделей несколько. Главная кнопка одна, остальные — второстепенные.

Скорость на телефоне

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

Связь с каталогом

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

Кому подойдёт

Кому подойдёт сайт со сценой товара

Приём работает там, где товар интересно показать изнутри и где одну модель хотят продавать громко. Кроссовки в этом примере — лишь один из вариантов.

Магазин с флагманской моделью

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

Свой бренд обуви

Запуск модели или коллекции: промо-лендинг под рекламу и соцсети, где устройство пары — главный аргумент. Так может выглядеть сайт вашего бренда к старту продаж.

Производитель и опт

Дилеру и закупщику разбор по слоям объясняет разницу в цене лучше прайса. Здесь уместнее сайт-каталог без корзины: модели, размеры, заказ через заявку.

Товар, собранный из слоёв

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

Продажи из рекламы

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

Когда сцена не нужна

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

Обсудить задачу

Процесс

Как делаю лендинг с такой сценой: этапы и сроки

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

Раскадровка

Что отходит первым, какие слои подписываем, что стоит на первом экране. Согласуем до начала: здесь менять решения дешевле всего.

Кадры

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

Лендинг

Структура, тексты, дизайн и сборка на Tilda или на коде. Сам лендинг — от 7 дней.

Сцена

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

Замер и сдача

Вес сцены и скорость первого экрана — числом. Если цифра хуже согласованной, довожу, а не сдаю.

Что нужно от вас

3D-модель пары, образец для съёмки или хотя бы фото с нескольких сторон
Характеристики модели: материалы, вес, размерная сетка
Условия магазина: доставка, примерка, оплата, возврат
Логотип и живые фото, если есть; если нет — подскажу, где их взять

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

Стоимость

Сколько стоит лендинг кроссовок со сценой

Две строки сметы: сам сайт и видео по скроллу поверх него. Обе называю до старта и фиксирую в договоре.

Лендинг с разбором модели по слоям

Такая же сцена, как в этом примере, — на вашей модели, с вашими характеристиками и брендом, и полный лендинг вокруг неё.

Первый экран со сценой, характеристики, размеры и форма заказа
Раскадровка: что отходит первым и какие слои подписываем
Подготовка кадров и отдельная раскладка для телефона
Вес сцены — числом до сдачи

от 27 000 ₽

Лендинг на Tilda от 15 000 ₽ плюс видео по скроллу от 12 000 ₽ надбавкой. На чистом коде — от 32 000 ₽. Если нет 3D-модели или съёмки товара, кадры считаются отдельной строкой — сумму называю до подписания.

Получить смету

15 000рублей — лендинг на Tilda без сцены, от 7 дней; на коде от 20 000 ₽

40 000рублей — интернет-магазин обуви на Tilda: каталог, корзина, оплата; на коде от 85 000 ₽

30 000рублей — сайт-каталог: модели и размеры без корзины, заказ через заявку

40 000рублей — 3D-сцена вместо кадров: модель можно покрутить самому

Магазин со сценой на главной — цена магазина плюс 12 000 ₽ за видео по скроллу. Состав и сроки — на страницах интернет-магазина, лендинга и сайта-каталога.

Вопросы

Частые вопросы о лендинге со сценой

Сколько времени займёт лендинг с такой сценой?

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

Не будет ли сцена тормозить на телефоне?

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

Можно ли сделать такое на Tilda?

Да. Этот пример собран блоком HTML-кода в Тильде, кадры загружены в неё же — сторонние сервисы и подписки не нужны. Если сайт на коде, сцена ставится так же.

Откуда взять ролик или 3D-модель?

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

Как такая страница ведёт себя в поиске?

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

Что если у меня нет фото товара?

Хватит образца или 3D-файла от фабрики: по нему делаются и кадры сцены, и фото для каталога. Если нет ни того, ни другого, можно запустить лендинг без сцены за 15 000 ₽, а сцену добавить позже надбавкой от 12 000 ₽ — переделывать сайт не придётся.

Примеры

Другие примеры видео по скроллу

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

Городской рюкзак

Рюкзак раскрывается, вещи вылетают из отделений и возвращаются на место.

Пример промо-сайта товара

Бургер

Ингредиенты ложатся друг на друга, сыр тает на котлете.

Дизайн сайта ресторана

Жилой комплекс

Камера летит над районом к башне и выходит на террасу пентхауса.

Лендинг ЖК

Парфюм

Золотая спираль застывает стеклянным флаконом с крышкой.

Сайт бренда парфюмерии

Турбина

Турбокомпрессор разбирается по оси, выноски с оборотами и давлением идут за прокруткой.

Сайт с анимацией

Как устроено видео по скроллу

Откуда берутся кадры, сколько весит сцена и работает ли она на Tilda. От 12 000 ₽ надбавкой к сайту.

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

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

Обсудить лендинг

Made on

Tilda