Лендинг бренда
от 15 000 ₽
- Имиджевый сайт на Tilda: одна страница о продукте или коллекции
- История бренда, линейка, детали и где купить
- Тексты, дизайн, SEO, Метрика и документы — под ключ
- Срок 7–12 дней
Бренд и флакон придуманы для примера: так может выглядеть первый экран сайта вашего бренда. Как это сделано и сколько стоит — сразу под демо.
ЯнтарьПарфюмерная вода
№ 7Листайте — спираль застынет флаконом
Верхние ноты
Бергамот и розовый перец
Первые пятнадцать минут: яркое, летучее начало с каплей мандарина. Разлетается, как брызги этой спирали.
Сердце
Ирис и шафран
Через полчаса аромат садится на кожу: тёплый, пудровый, с жасмином и золотой нитью шафрана.
База
Янтарь и ладан
Остаётся шлейфом до вечера вместе с ванилью и сандалом. Ради этой ноты аромат и назван.
ЯнтарьПарфюмерная вода, 50 мл
№ 7Гранёное стекло, крышка — латунь с позолотой
Это демонстрационная страница: бренд и флакон придуманы, а первый экран собран так же, как для заказчика. Так может выглядеть сайт вашего бренда — в косметике, парфюмерии, одежде или посуде, везде, где товар продаёт образ, а не таблица характеристик.
Прокрутка выбирает кадр: вниз — спираль собирается во флакон, вверх — флакон снова становится жидкостью.
Под экраном нет видеоплеера. Это секвенция кадров: ролик заранее разложен на картинки, и каждое движение колеса мыши или пальца показывает следующую. Поэтому сцена идёт ровно с той скоростью, с какой листает посетитель, замирает вместе с ним и отматывается назад. Подписи привязаны к моментам движения и появляются по очереди. На сайте вашего бренда на их месте встанет то, что продаёт именно ваш товар: материал, состав, объём, способ применения.
Красивые сайты брендов держатся не на количестве эффектов, а на порядке блоков. Этот пример сайта бренда показывает только первый экран, а дальше страница отвечает на три вопроса покупателя: что это, почему стоит своих денег и где купить. С такой структуры начинается разработка сайта бренда — дальше она подстраивается под ваш продукт.
Продукт крупно, название, одна фраза о том, чем он отличается, и кнопка. Движение здесь одно и сильное: в примере жидкость застывает флаконом, у вашего бренда это может быть раскрытие упаковки, текстура крема или ткань в движении.
Кто стоит за брендом, откуда идея и сырьё, для кого продукт. Имиджевый сайт живёт этим блоком: без него сайт бренда превращается в каталог, где решает только цена.
Карточки продуктов с объёмами, составом и ценой. В косметике — тип кожи и способ применения, в одежде — размерная сетка и материалы, в подарочной продукции — состав наборов.
Материал упаковки, фактура, мелочи, которых не видно на маленьком фото. В примере эту роль играют подписи, привязанные к движению; на обычном экране — крупные фотографии с короткими пояснениями.
Корзина магазина, ссылки на маркетплейсы или список магазинов-партнёров. Путь к покупке виден с любого экрана, а не только в подвале.
Отзывы покупателей, публикации, упоминания у блогеров, сертификаты и декларации. У косметики документы о соответствии снимают половину вопросов ещё до покупки.
Форма для оптовиков и байеров, подписка на новинки, контакты. Если бренд растёт через магазины-партнёры, этот блок нужен не меньше корзины.
Посетители из соцсетей приходят в основном с телефона, поэтому мобильная версия проектируется вместе с десктопной, а не ужимается из неё. В примере сцена перестраивается под вертикальный экран.
Дизайн сайта косметики и парфюмерии строится по одним правилам: крупный продукт, много воздуха, мало текста на экране и спокойная палитра, в которой товар — самое яркое пятно. Всё это собирается в макет до вёрстки, и вы видите страницу целиком раньше, чем она попадёт на сайт.
Спираль и флакон — частный случай. Та же техника подходит любому продукту, который выигрывает от движения: его можно раскрыть, собрать, повернуть или показать изнутри.
Лендинг бренда на Tilda — от 7 рабочих дней, магазин — 15–25. Секвенция добавляет несколько рабочих дней веб-части. Срок материала — съёмки или рендера — называю до старта: от него зависит всё остальное.
Продукт, покупатель, что человек должен почувствовать на первом экране. Раскладываю движение по кадрам на бумаге: здесь решения меняются бесплатно, потому что менять ещё нечего.
Съёмка на поворотном столе, рендер 3D-модели или генерация для абстрактных сцен. Если нужен фотограф или 3D-художник, его сумму и срок называю отдельной строкой заранее.
Блоки из раздела выше под ваш продукт, тексты по вашей фактуре, макет в Figma для компьютера и телефона. Согласуем страницу целиком до сборки.
Tilda или чистый код. Кадры сжимаются и готовятся отдельно для компьютера и телефона, движение привязывается к прокрутке, подписи — к моментам движения.
Вес и скорость первого экрана называю цифрой до сдачи. Метрика с целями, документы, домен, доступы у вас. В работу входят две итерации по движению.
Разработка сайта бренда начинается с формата: имиджевый лендинг о продукте или магазин, где его сразу покупают. Эффект при прокрутке — надбавка к любому из них, а не отдельный сайт. Лендинг бренда с таким первым экраном на Tilda — от 27 000 ₽: 15 000 ₽ сайт плюс 12 000 ₽ за видео по скроллу. Цена фиксируется в договоре и дальше не растёт.
от 15 000 ₽
от 40 000 ₽
от 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 МБ, первый кадр появляется сразу, остальные догружаются по ходу прокрутки. Для телефона движение собирается отдельно, а вес и скорость первого экрана я называю цифрой до сдачи.
Да, этот пример сайта бренда собран именно под Тильду: кадры загружены в неё, код стоит в одном блоке рядом с обычными. Тексты, цены и фотографии вы правите сами, как привыкли; менять само движение — работа в коде блока. На чистом коде тоже можно: там тоньше настройка загрузки, но для посетителя разница почти не видна.
Источника три. Съёмка на поворотном столе подходит для готового флакона, банки или упаковки. Рендер по 3D-модели — когда нужен разбор, наполнение или движение, которое не снять камерой; если модели нет, её делают по чертежам или образцу. Генерация годится для абстрактных сцен вроде спирали в этом примере, но для точного показа вашего товара — нет, и я скажу об этом прямо.
Сайт от этого не встаёт: предметную съёмку или 3D-модель можно заказать в рамках проекта, сумму подрядчика я называю до подписания. Если продукт ещё в производстве, первый экран собирается по образцу или макету упаковки, а структура и тексты готовятся параллельно.
Секвенция для них — набор картинок, на индексацию она не влияет. Заголовки, тексты, цены и карточки товаров стоят обычной разметкой рядом со сценой и индексируются как на любом сайте, поэтому сайт с эффектом продвигается так же, как обычный.
Этот пример сайта бренда — одна из шести демонстрационных страниц: та же техника в пяти других нишах, у каждой свой дизайн. Для вашего товара соберу своё движение, а не копию одного из них.
Городской рюкзак раскрывается при прокрутке: вещи вылетают из отделений, зависают в воздухе и возвращаются на место.
Пример промо-сайтаБеговой кроссовок раскладывается по слоям: подошва, амортизирующая пена, стелька и шнурки.
Пример лендинга кроссовокИнгредиенты по очереди ложатся друг на друга и собираются в бургер, сыр тает последним.
Пример сайта бургернойКамера пролетает над жилым комплексом на закате и опускается на террасу пентхауса.
Пример лендинга ЖКТурбокомпрессор разбирается по оси, выноски с оборотами и давлением наддува идут за прокруткой. Вертикальное видео под телефон.
Пример сайта с анимациейОткуда берутся кадры, сколько весит страница и почему секвенция кадров дешевле 3D-сцены.
Технология и ценыСделаю сайт вашего бренда. Расскажите о продукте или коллекции и покажите, что уже есть: фотографии, 3D-модель, логотип. В ответ скажу, какой формат нужен — лендинг или магазин, — откуда взять кадры и во что это обойдётся вместе с материалом.
Смотрите также: Интернет-магазин под ключ · Лендинг под ключ · Логотип · Иммерсивные сайты · Цены