Сайт бренда: пример, где флакон застывает из золотой спирали

Бренд и флакон придуманы для примера: так может выглядеть первый экран сайта вашего бренда. Как это сделано и сколько стоит — сразу под демо.

Парфюмерный дом Ореоль К разбору примера

ЯнтарьПарфюмерная вода

№ 7Листайте — спираль застынет флаконом

Верхние ноты

Бергамот и розовый перец

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

Сердце

Ирис и шафран

Через полчаса аромат садится на кожу: тёплый, пудровый, с жасмином и золотой нитью шафрана.

База

Янтарь и ладан

Остаётся шлейфом до вечера вместе с ванилью и сандалом. Ради этой ноты аромат и назван.

ЯнтарьПарфюмерная вода, 50 мл

№ 7Гранёное стекло, крышка — латунь с позолотой

Как сделано

Пример сайта бренда и как он устроен

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

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

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

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

  • Кадры. 90 кадров 1600×900, каждый — отдельный файл. Все загружены в Тильду и отдаются с её серверов, как обычные картинки страницы
  • Вес. 3,6 МБ на всю секвенцию, в среднем 40 КБ на кадр. Первый кадр появляется сразу, остальные догружаются по ходу прокрутки
  • Движение. В начале пауза, чтобы спираль успели рассмотреть; дальше кадры разложены по движению, а не по секундам ролика
  • Платформа. Работает на Tilda — код стоит в одном блоке рядом с обычными — и на сайте на чистом коде
  • Телефон. Сцена перестраивается: флакон уходит в верхнюю часть экрана и виден целиком, подписи — в полосе под ним, прокрутка короче
  • Материал. Кадры примера сгенерированы, бренд придуман для примера. Для вашего товара точнее рендер 3D-модели или съёмка на поворотном столе
Структура

Что должно быть на сайте бренда

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

01

Первый экран с образом

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

02

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

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

03

Линейка или коллекция

Карточки продуктов с объёмами, составом и ценой. В косметике — тип кожи и способ применения, в одежде — размерная сетка и материалы, в подарочной продукции — состав наборов.

04

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

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

05

Где купить

Корзина магазина, ссылки на маркетплейсы или список магазинов-партнёров. Путь к покупке виден с любого экрана, а не только в подвале.

06

Доверие

Отзывы покупателей, публикации, упоминания у блогеров, сертификаты и декларации. У косметики документы о соответствии снимают половину вопросов ещё до покупки.

07

Опт и связь

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

08

Мобильная версия

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

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

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

Кому подойдёт такой имиджевый сайт

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

Подходит

  • Косметика и парфюмерия собственного производства: нишевые марки, уходовые линейки, свечи и диффузоры
  • Бренды одежды, обуви, украшений и аксессуаров, которым нужен сайт коллекции
  • Подарочная продукция: чай, кофе, шоколад, напитки в фирменной упаковке
  • Запуск нового продукта или линейки — промо-страница под рекламу и блогеров
  • Бренд продаёт на маркетплейсах, но хочет свою площадку с историей и оптовым разделом

Лучше другой формат

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

Как идёт разработка сайта бренда

Лендинг бренда на Tilda — от 7 рабочих дней, магазин — 15–25. Секвенция добавляет несколько рабочих дней веб-части. Срок материала — съёмки или рендера — называю до старта: от него зависит всё остальное.

01

Бриф и раскадровка

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

02

Материал для кадров

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

03

Структура, тексты и макет

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

04

Сборка и привязка к прокрутке

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

05

Замер и запуск

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

Стоимость

Сколько стоит сайт бренда с анимацией

Разработка сайта бренда начинается с формата: имиджевый лендинг о продукте или магазин, где его сразу покупают. Эффект при прокрутке — надбавка к любому из них, а не отдельный сайт. Лендинг бренда с таким первым экраном на Tilda — от 27 000 ₽: 15 000 ₽ сайт плюс 12 000 ₽ за видео по скроллу. Цена фиксируется в договоре и дальше не растёт.

Лендинг бренда

от 15 000 ₽

  • Имиджевый сайт на Tilda: одна страница о продукте или коллекции
  • История бренда, линейка, детали и где купить
  • Тексты, дизайн, SEO, Метрика и документы — под ключ
  • Срок 7–12 дней
Обсудить лендинг

Магазин бренда

от 40 000 ₽

  • Интернет-магазин на Tilda, пакет «Старт»
  • Каталог линейки и наборов, объёмы и варианты — в карточке товара
  • Корзина, оплата, доставка и письма покупателю
  • Документы и электронная коммерция в Метрике, срок 15–25 дней
Обсудить магазин

Видео по скроллу

от 12 000 ₽

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

На чистом коде лендинг — от 20 000 ₽, с видео по скроллу — от 32 000 ₽; магазин — от 85 000 ₽. Сайт-каталог без корзины — от 30 000 ₽. Если посетитель должен сам крутить товар, это уже 3D-сцена, от 40 000 ₽. Логотип для нового бренда — от 1 500 ₽; если следом делаем сайт, знак стоит 1 000 ₽ сверх его цены. Съёмка или 3D-модель, если их нет, считаются отдельной строкой: сумму называю до подписания. Все цены · 3D-сайты · Логотип

Вопросы

Частые вопросы о сайте бренда

Сколько времени займёт сайт бренда с таким первым экраном?

Лендинг на Tilda — от 7 рабочих дней, секвенция добавляет несколько рабочих дней веб-части. Магазин — 15–25 дней. Материал для кадров считается отдельно: рендер по готовой модели делается быстро, съёмка и моделирование дольше, и этот срок я называю до старта.

Не будет ли страница тяжёлой на телефоне?

Секвенция предсказуема: сколько весит, столько и грузится. В этом примере 90 кадров 1600×900 весят вместе 3,6 МБ, первый кадр появляется сразу, остальные догружаются по ходу прокрутки. Для телефона движение собирается отдельно, а вес и скорость первого экрана я называю цифрой до сдачи.

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

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

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

Источника три. Съёмка на поворотном столе подходит для готового флакона, банки или упаковки. Рендер по 3D-модели — когда нужен разбор, наполнение или движение, которое не снять камерой; если модели нет, её делают по чертежам или образцу. Генерация годится для абстрактных сцен вроде спирали в этом примере, но для точного показа вашего товара — нет, и я скажу об этом прямо.

Что делать, если фотографий товара нет?

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

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

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

Ещё примеры

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

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

Промо-сайт товара

Городской рюкзак раскрывается при прокрутке: вещи вылетают из отделений, зависают в воздухе и возвращаются на место.

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

Лендинг кроссовок

Беговой кроссовок раскладывается по слоям: подошва, амортизирующая пена, стелька и шнурки.

Пример лендинга кроссовок

Сайт ресторана

Ингредиенты по очереди ложатся друг на друга и собираются в бургер, сыр тает последним.

Пример сайта бургерной

Лендинг ЖК

Камера пролетает над жилым комплексом на закате и опускается на террасу пентхауса.

Пример лендинга ЖК

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

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

Пример сайта с анимацией

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

Откуда берутся кадры, сколько весит страница и почему секвенция кадров дешевле 3D-сцены.

Технология и цены

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

Обсудить сайт бренда
Made on
Tilda