✔ З першого екрана представити YERO COLORS як виробника барвників і кондитерського декору
✔ Провести оптового покупця дев’ятьма категоріями продукції до потрібного товару
✔ Показати склад, фасування, термін придатності й сфери застосування кожного продукту
✔ Розповісти про сертифікацію ISO 22000, власне виробництво й експорт
✔ Збирати запити зразків, заявки на дзвінок і підписників розсилки
✔ Запропонувати випуск продукції під власною маркою клієнта
YERO COLORS — торговельна марка одеської компанії, яка з 2019 року сама виробляє гелеві, сухі блискучі й жиророзчинні барвники, барвники для аерографа, ароматизатори, цукрову пудру, мастику та айсинг. Продукція сертифікована за ISO 22000, а покупці — реселери, кондитерські виробництва, магазини й кондитерські школи в Україні та за кордоном. Бренду потрібен був сайт, який покаже весь асортимент і приведе оптового клієнта до запиту.
Я розклав інформацію за розділами так, як її шукає закупівельник: на головній — переваги й новинки, у «Компанії» — профіль, виробництво, сертифікація та експорт на вкладках, у каталозі — дев’ять категорій і детальна картка продукту, окремо — умови співпраці з бонусною сіткою.
Вийшов двомовний сайт із перемикачем УКР/ENG, адаптивною версією для смартфонів від 320 пікселів, вкладками, слайдерами, спливним вікном «Замовити дзвінок» з екраном подяки, бічною кнопкою запиту зразків, завантаженням каталогу й формою підписки на кожній сторінці.
Сайт, на якому оптовий покупець знаходить продукт, перевіряє склад і сертифікати та одразу запитує зразки.
Категорії перемикаються вкладками: барвники, пудра й айсинги, мастика, посипки, фасування під замовлення
Опис, склад, термін придатності, фасування, сфери застосування й кнопка «Завантажити каталог»
Розробка продукту під замовлення й випуск під маркою клієнта на потужностях компанії
Профіль, власне виробництво, сертифікація ISO 22000 та експорт — без зайвих переходів
Бічна кнопка запиту зразків, вікно «Замовити дзвінок» з подякою й підписка зі згодою
Перемикач УКР/ENG і адаптивна верстка від 320 пікселів із випадним меню
Оптовий клієнт бачить увесь асортимент, перевіряє склад і сертифікати та зв’язується з компанією, не залишаючи сторінки.
Сайт розв’язує кілька основних завдань:
Відповідь гарантовано протягом 24 годин.
Перша консультація безкоштовна й ні до чого не зобов’язує.
Сайт виробника працює водночас як каталог, презентація й відділ продажів: закупівельник має швидко знайти продукт, переконатися в якості й зрозуміти умови. На прикладі YERO COLORS розповідаю, як я зробив сайт із каталогом харчових барвників, детальними картками, блоком private label, розділом про компанію та формами для оптових клієнтів.
YERO COLORS — торговельна марка компанії, заснованої в Одесі 14 лютого 2019 року. Вона сама виробляє гелеві водорозчинні барвники — класичні, блискучі й на натуральній основі, — барвники для аерографа, сухі блискучі та жиророзчинні барвники в дропсах на какао-маслі, ароматизатори, цукрову пудру преміумкласу, мастику для моделювання, айсинг і цукровий декор «Перлини». Продукція сертифікована за ISO 22000 і проходить лабораторний контроль, а з 2022 року компанія має власне виробництво й склад в Одесі та ще один склад у Чернівцях.
Покупці YERO COLORS — реселери, роздрібні магазини, кондитерські виробництва й навчальні заклади, а також закордонні дистриб’ютори. Їм потрібен був сайт, на якому видно весь асортимент, є характеристики кожного продукту, зрозумілі умови співпраці й простий спосіб запитати зразки. Я зробив цей сайт: зверстав усі сторінки, зібрав вкладки, слайдери, спливні вікна й форми та адаптував його під смартфони.
Меню повторює шлях оптового покупця — від знайомства з брендом до замовлення:
Шапка спільна для всіх сторінок: логотип, меню, перемикач мов УКР/ENG, іконки Facebook та Instagram і кнопка «Замовити дзвінок». Внутрішні сторінки починаються з хлібних крихт і великого заголовка, а внизу кожної сторінки — форма підписки та підвал із меню, адресою, телефоном і поштою.
Перший екран — великий заголовок «Натуральні барвники для промисловості», ряд флаконів гелевих барвників на синій плашці й фото десертів, забарвлених продукцією бренду. Підказка «гортай вниз» веде до блоку переваг.
Переваги зібрані в список із роздільниками — кожна відповідає на запитання закупівельника:
Нижче — блок «Новинки»: три великі картки, наприклад нові відтінки гелевих барвників і лінійка GEM YERO COLORS з дев’ятьма «коштовними» кольорами від аметиста до бронзи. Під час наведення курсора назва картки й стрілка підсвічуються фірмовим синім. Під картками — широка кнопка «Перейти до каталогу». Головна має кілька станів: звичайний, з відкритим вікном «Замовити дзвінок» (ім’я та телефон) і з екраном подяки після надсилання.
Каталог — головна робоча сторінка сайту. Дев’ять категорій — гелеві й жиророзчинні барвники, цукрова пудра та айсинги, кондитерські інгредієнти й сировина, ароматизатори, мастика, сухі блискучі барвники, цукрові посипки й фасування під замовлення — перемикаються вкладками, без перезавантаження сторінки.
Картка продукту збирає все, що закупівельник зазвичай уточнює в менеджера. На прикладі AIRBRUSH SPARKLE — рідких блискучих барвників для аерографа:
Праворуч на каталозі закріплена яскрава вертикальна кнопка «Запит зразків продукції»: вона лишається на екрані під час прокручування, тож попросити зразок можна будь-коли, не втрачаючи картку з поля зору.
Для великих клієнтів YERO COLORS має окрему пропозицію — випуск продукції під власною маркою. На сайті їй відведено блок Private Label із двома напрямами: розробка власного продукту під замовлення та випуск продукції під маркою клієнта на потужностях компанії. Кожен напрям оформлено рядком зі стрілкою, а поруч — фото пакування: цукрові перлини, мастика в коробках, гелевий барвник. Так клієнт одразу бачить, який вигляд може мати його власна лінійка.
Сайт зверстано адаптивно, починаючи з екранів завширшки 320 пікселів. На смартфоні меню ховається у випадну панель із перемикачем мов і контактами, картки новинок і категорій шикуються в одну колонку, вкладки каталогу й розділу «Компанія» лишаються зручними для пальця, а форми підписки й замовлення дзвінка — на своїх місцях.
Зовні сайт стриманий: біле тло, чорні рублені заголовки, фірмовий синій і соковиті кольори самої продукції — фіолетовий, м’ятний, рожевий, золотий. Контурні написи ™ YERO COLORS і стрілки-вказівники повторюються на всіх сторінках, тому під час верстки я зібрав повторювані елементи — шапку, вкладки, списки з маркерами, картки, форми — як спільні блоки.
Оптовий покупець обирає постачальника не за картинками, а за складом, документами й умовами. Сайт виробника має відповідати на ці запитання раніше, ніж закупівельник візьметься за телефон. Створюючи такий сайт, я спираюся на кілька принципів:
Якщо вам потрібен сайт для виробничої компанії, дистриб’ютора чи бренду харчових інгредієнтів, я допоможу зібрати його повністю — від структури каталогу до карток продукції, форм заявок і мобільної версії.
