Лендинг для оптовых клиентов цветочной компании «Азалия»

Мы сделали для цветочной компании «Азалия» одностраничный сайт для оптовых покупателей. Человек заходит, смотрит ассортимент, оставляет телефон и получает оптовый прайс-лист. Такой сайт называют лендингом. Мы подготовили схему страницы, выбрали стиль, нарисовали дизайн с анимацией и мобильную версию, вставили фотографии и товары клиента, а потом подключили отправку заявок на почту. Страница работает: azaliaopt.ru.

Кто клиент

«Азалия» торгует цветами в Барнауле. На оптовой странице компания называется «Сады Азалии». Для розничных покупателей у неё есть интернет-магазин azalia22.ru. Его мы ведём с 2024 года, об этом у нас отдельный кейс про техническую поддержку. Оптовый лендинг делали отдельно: у оптовика другая задача, чем у человека, который покупает один букет.

В чём была задача

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

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

Как шла работа

Шаг 1. Схема страницы из блоков

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

Шаг 2. Четыре доски настроения и выбор стиля

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

Для первого экрана дизайнер нашёл на бесплатных стоках несколько видеороликов с цветами. Из них можно склеить один ролик и поставить на главный баннер. На живой странице первый экран устроен именно так: видео с букетом, поверх него заголовок «Цветы оптом по выгодным ценам».

Шаг 3. Цвет кнопок и логотип

Для кнопок выбрали красный цвет, но клиент попросил именно такой оттенок, какой он прислал. Логотип тоже нужен был в другом цвете, по образцу клиента. Мы поменяли оба. Оттенок кнопок сделали чуть ярче образца: на фотографиях исходный цвет терялся, а кнопка должна быть видна с первого взгляда. На готовой странице кнопки «Получить прайс-лист» красные.

Шаг 4. Как сделать страницу заметной

Страница получалась простой: первый экран, о компании, ассортимент, условия. Дмитрий Рогачев, руководитель La Chatte, спросил дизайнера, можно ли добавить что-то необычное. Дизайнер предложил два приёма и нарисовал оба рядом с основным макетом.

• Блок с текстом, который проявляется на глазах, и «трассер из цветов»: цветы (розы или сам цветок азалии) идут вслед за текстом. На живой странице в этом блоке крупная фраза о миссии компании, а под ней идёт лента фотографий букетов.
• Блок, где фотография увеличивается.

Идеи согласовали 26 августа. Дальше нарисовали мобильную версию.

Шаг 5. Версия для телефона

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

Шаг 6. Фотографии клиента: белый фон и серый

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

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

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

Шаг 7. Товары, адрес и контакты

Потом клиент прислал таблицу с товарами и описаниями, а также адрес, телефоны, Telegram, WhatsApp и почту. Мы вставили в макет все цветы. Новые контакты и адрес поставили в подвал страницы и вставили нужную карту. Кнопки Telegram и WhatsApp добавили и под первым экраном, и в подвале.

У каждого товара в карточке есть рост, цвет, страна и количество в упаковке. Для оптовика этого достаточно, чтобы понять, что предлагают. Товары разложены по вкладкам: «Розы», «Кенийские розы», «Гвоздики» и другие.

Шаг 8. Что делать с длинным списком товаров

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

Дизайнер добавил на карточке кнопку «Смотреть». Она вела в обычный магазин «Азалии», на карточку товара. Дмитрий спросил, зачем она нужна, и мы её убрали. Цель страницы: чтобы человек оставил заявку, а не ушёл на розничный сайт. Поэтому на каждой карточке кнопка «Получить прайс».

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

Шаг 9. Отправка заявок на почту

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

Что получилось

Страница работает на azaliaopt.ru. Что на ней есть сейчас:

• Первый экран с видео и пятью кнопками связи: «Получить прайс-лист», «Как доехать», «Написать», «Телеграм» и WhatsApp. Телефон стоит в шапке.
• Блок «О нас» с двумя карточками: «В цифрах» и «В цветах».
• Ассортимент по вкладкам. У каждого цветка свои параметры и кнопка «Получить прайс».
• Блок «Получите прайс в два клика»: человек вводит телефон и нажимает одну кнопку.
• Два варианта сотрудничества: мелкий и средний опт и крупный опт. В каждом своя кнопка «Получить оптовый прайс-лист».
• Карта и контакты в подвале.

Всё, что описано выше, можно проверить на живой странице.

Что из этого проекта можно взять себе

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

Частые вопросы

Сколько стоит такой лендинг?

Лендинг под ключ у нас стоит от 150 000 ₽. Точная цена зависит от числа блоков, анимации и материалов клиента. Подробности на странице создание лендинга.

Сколько шла работа над этим лендингом?

Задача шла с 31 июля 2024 года по 3 марта 2025 года. Основная работа по дизайну пришлась на август и декабрь 2024 года: в августе рисовали макет и мобильную версию, в декабре вставляли фотографии и товары клиента. В январе 2025 года подключили отправку форм.

Делаете ли вы лендинги для других отраслей?

Да. Например, мы сделали лендинг электропечи для производителя банного оборудования: кейс «ФутуРус».

Чем лендинг для опта отличается от интернет-магазина?

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

Для технических специалистов

• Прототип, доски настроения, макет для компьютера и мобильная версия нарисованы в Figma. Анимационные приёмы (проявление текста, «трассер из цветов», увеличение фото) нарисованы там же рядом с основным макетом.
• Для фото на белом фоне цветок получен через параметры наложения слоя, без ручной вырезки. Для серого фона решали отдельно: либо вырезка, либо вставка как есть.
• Отправка форм: страница уже стояла на хостинге клиента, отправку настроили через SMTP почтового сервера хостинга. Письма уходят с технического ящика сайта на почту клиента.