Хороший сайт производителя начинается не с лозунга «мы инновационны», а с ответов на простые вопросы: что это, из чего сделано и как заказать. Для бренда ECODDC из Быдгоща (Bydgoszcz) мы подготовили такой сайт: ecoddc.pl. Это корпоративный сайт производителя экологичных настольных органайзеров из гофрокартона, где продукт, материал и контакт находятся в одном клике друг от друга. В этом кейсе мы показываем, как спроектировали его для бизнес-клиентов.
Коротко: корпоративный сайт производителя экологичных офисных органайзеров
- Клиент: ECODDC, производитель настольных органайзеров из гофрокартона BC, Быдгощ
- Отрасль: офисные товары, экологичный дизайн, продажи компаниям
- Объём работ: графический проект, многостраничный сайт (главная страница, две карточки продуктов, о нас, контакты), форма запросов, баннер cookies, юридические страницы
- Технологии: HTML5, CSS3, JavaScript, PHP (обработка формы)
- Адрес сайта: ecoddc.pl
Задача: объяснить необычный материал и показать продукт для компаний
Органайзер из картона многим кажется временным решением. Однако, согласно описанию на странице О нас, бренд хочет показать, что гофрокартон BC может быть прочным, эстетичным элементом рабочего места. Поэтому сайт должен был сделать две вещи одновременно: вызвать доверие к материалу и показать продукт так, чтобы его можно было представить на собственном столе.
К этому добавлялись особенности, которые в коммуникации легко размываются: обработка на станках с ЧПУ (CNC), философия Zero Waste, возможность переработки и цветовая персонализация. Если бы всё это оказалось на одной странице без порядка, посетитель не отличил бы продукт от лозунгов бренда. Из брифа вытекали четыре требования:
- чёткое разделение бренда и двух продуктов: EcoStack и StarLinkPanel,
- конкретные технические данные вместо общих слов,
- простой путь к запросу о продукте или персонализации,
- лёгкий, быстрый сайт, который хорошо выглядит на телефоне и компьютере.
Это не типичный сервисный сайт. ECODDC продаёт физические товары, поэтому всю структуру сайта мы подчинили презентации продукта, а не каталогу услуг.
Как мы работали над проектом
Мы начали с упорядочивания материалов клиента: описаний продуктов, фотографий и параметров. Из них сложилась структура информации, в которой главная страница объясняет идею бренда, а каждый продукт получает собственную подстраницу со спецификацией и галереей. Затем мы подготовили графический проект, основанный на спокойном зелёном цвете и натуральных оттенках картона, внедрили его в коде и протестировали при разной ширине экрана. В конце мы проверили форму, баннер cookies и юридические подстраницы.
Решение: сайт, который продаёт продукт через объяснение
Сайт состоит из главной страницы, карточек продуктов EcoStack и StarLinkPanel, подстраницы О нас и контактов. Меню короткое, а кнопка контакта выделена в шапке, поэтому посетителю не нужно искать, как связаться.
Главная страница: три опоры бренда и два продукта
Первый экран показывает продукт в реальной обстановке и две кнопки, ведущие к карточкам продуктов. Ниже сайт представляет три опоры бренда: технологию CNC, Zero Waste и переработку. Они поданы кратко, в трёх плитках, и только после них следуют продукты. Поэтому посетитель сначала понимает идею, а затем видит, как она воплощается в конкретных изделиях.
Схема Zero Waste вместо длинного описания
Вместо абзаца о сокращении отходов мы подготовили простую схему: на входе лист картона BC, на выходе панель StarLinkPanel и три дополнительных органайзера (для планшета или телефона, для кабелей и для ручек). Согласно сайту, эти дополнительные продукты изготавливаются из свободных участков листа. Такая визуализация объясняет концепцию за несколько секунд.
Карточки продуктов со спецификацией и галереей
У каждого продукта есть собственная подстраница с описанием, списком характеристик, таблицей технических данных и галереей фотографий, увеличиваемых в лёгком лайтбоксе. В карточке EcoStack указано, например, что модуль для принадлежностей имеет 25 слоёв картона, а модуль для проводов — 6 слоёв, и что модули можно ставить друг на друга или рядом. Всё дополняет процесс «Как это работает?» в три шага: выбор модулей, выбор цвета и расстановка по потребностям.
Форма запросов с выбором продукта
На странице контактов находится форма: имя, адрес электронной почты, необязательно телефон и компания, список продуктов (EcoStack, StarLinkPanel, оба, персонализация или другой запрос) и сообщение. Рядом — контактные данные компании и карта. Форма отправляется без перезагрузки страницы, а пользователь сразу видит подтверждение или сообщение об ошибке.
Цветовая персонализация как часть предложения
Согласно сайту, изделия облицовываются бумагой выбранного цвета, а на главной странице показана палитра: крафт, синий, терракотовый, зелёный, фиолетовый, розовый, графитовый, соломенный и бежевый. Под палитрой размещён призыв запросить другой цвет. Это простой способ показать возможность подбора продукта под фирменный стиль компании без создания конфигуратора.
Подстраница О нас: философия бренда в одном месте
Материалы о ценностях бренда не были разбросаны по всему сайту. На странице О нас мы собрали философию компании, описание материала BC и список того, что, по мнению бренда, его отличает: авторский метод перекрёстной склейки, соединители в форме звезды в StarLinkPanel, персонализацию и замкнутый цикл материалов. Благодаря этому главная страница и карточки продуктов остаются лаконичными, а тому, кто хочет узнать больше, есть куда пойти.
Адаптивность и доступность
Макет подстраивается под ширину экрана благодаря набору CSS-правил для телефонов и планшетов. Фотографии в нижних разделах загружаются лениво, поэтому первый экран не ждёт всей галереи, а пользователи, отключившие анимацию в системе, не видят движущихся эффектов. У кнопок лайтбокса есть описания для программ чтения с экрана, а у полей формы — подписи.
SEO, GDPR (RODO) и безопасность
У каждой подстраницы есть собственный заголовок и мета-описание, у главной страницы — канонический адрес и разметка Open Graph, благодаря чему ссылка хорошо выглядит при публикации. Мы не обещаем позиций в Google, поскольку они зависят от многих факторов вне кода, но контент упорядочен и описан так, чтобы поисковая система могла его понять.
- GDPR (RODO): форма требует согласия на обработку данных с целью ответа на запрос; на сайте есть политика конфиденциальности и правила пользования.
- Cookies: баннер с вариантами «Принимаю все», «Только необходимые» и «Управлять настройками», а также ссылка для изменения предпочтений в подвале.
- Форма: проверка на стороне сервера, скрытое поле против ботов и отклонение символов новой строки в полях, попадающих в заголовки сообщений.
Технологии
Сайт не использует WordPress. Это статические подстраницы HTML5 со стилями CSS, одним файлом JavaScript (анимация появления разделов, лайтбокс, отправка формы и обработка cookies) и PHP-скриптом, который принимает форму и отправляет сообщение на почтовый ящик компании. Карта контактов загружается лениво, а шрифты берутся из Google Fonts. Такой выбор оправдан при нескольких постоянных подстраницах: это быстро, просто и недорого в обслуживании.
Почему собственный сайт, а не только каталог продуктов
Производитель, который описывает свои продукты исключительно в предложениях на порталах, отдаёт контроль над тем, как они представлены, и конкурирует ценой с похожими позициями. Собственный сайт позволяет рассказать историю материала и процесса, показать технические данные в том формате, который выбирает бренд, и принимать запросы напрямую, без посредника. В случае ECODDC это особенно важно, поскольку ценность продукта заключается в способе его изготовления, а это трудно уместить в стандартное описание на маркетплейсе.
Результат
Клиент получил сайт, который чётко разделяет бренд и два продукта, объясняет необычный материал и ведёт к запросу. Мы не приводим цифры продаж и посещаемости, поскольку не публикуем их. Качественный эффект виден в самой структуре: у каждой информации есть своё место, а путь от фотографии продукта до формы занимает несколько кликов. Заявления об экологичности и переработке принадлежат бренду, и мы представляем их именно так. Сайт готов к расширению: новые продукты можно добавлять как новые карточки в той же структуре, без перестройки всего сайта.
Для кого подходит такое решение
Такой подход подойдёт производителям и небольшим мануфактурам, у которых от одного до нескольких продуктов, которые продают компаниям и которым нужен сайт, объясняющий технологию или материал. Если продукт требует согласования перед покупкой, например цвета, размеров или количества, форма запросов лучше корзины. Посмотрите также наши услуги.
Сайт производителя для компаний: как показать материал и побудить к запросу
ECODDC — это, согласно описанию, бренд из Быдгоща, который продаёт органайзеры из гофрокартона компаниям. Такому предложению нужен сайт, который объясняет материал, показывает технические данные и собирает запросы, а не имитирует магазин. Здесь работает определённая последовательность: сначала идея бренда, затем продукты и, наконец, форма с выбором продукта и персонализации. При B2B-продажах клиенту часто требуется согласование перед покупкой, например цвета или количества, поэтому запрос бывает лучше корзины.
Этот сайт статичный, без WordPress, и это разумный выбор при нескольких постоянных подстраницах: он быстрый и простой в обслуживании. О том, как скорость влияет на восприятие сайта, рассказывает статья об оптимизации скорости сайтов на WordPress. О презентации продукта на экранах разного размера мы пишем в тексте о проектировании сайтов. Похожую философию лёгкого сайта-визитки вы найдёте в проекте сайт производителя соков Sokoniada.
Хотите узнать, сколько стоит такой сайт? Воспользуйтесь калькулятором стоимости, ознакомьтесь с услугами или свяжитесь с нами.
FAQ
Обязательно ли сайту производителя товаров для компаний иметь интернет-магазин?
Не всегда. ECODDC показывает продукты, параметры и возможность персонализации, а заказ начинается с запроса из формы. Для продуктов, подбираемых под компанию, например по цвету, такая модель бывает удобнее корзины, потому что сначала нужно согласовать детали.
Почему этот сайт не работает на WordPress?
У сайта несколько постоянных подстраниц и немного контента, меняющегося со временем, поэтому статического HTML с одним PHP-скриптом для формы вполне достаточно. Он быстрый, простой в обслуживании и имеет меньшую поверхность атаки, чем развитая CMS. Когда контента станет больше, его можно перенести на WordPress.
Как описывать экологичный продукт, чтобы не переборщить с заявлениями?
Стоит придерживаться того, что производитель может обосновать: материал, способ производства, возможность переработки. Лозунги вроде «100% экологично» на сайте ECODDC — это заявления бренда, и мы относимся к ним именно так. За достоверность утверждений отвечает компания, а мы заботимся об их понятной подаче.
Что даёт форма запроса вместо простого адреса электронной почты?
Форма сразу собирает необходимую информацию: контактные данные, компанию и продукт, которого касается вопрос. Благодаря этому первый ответ может быть конкретным. Дополнительно работают проверка на стороне сервера, согласие GDPR (RODO) и скрытое поле против ботов.
Сколько времени занимает подготовка такого сайта-визитки для производителя?
Срок зависит от количества продуктов, готовности фотографий и текстов, а также от того, нужна ли дополнительная функция. Поэтому мы не называем жёстких сроков без разговора. После короткого брифа мы можем определить объём и график для конкретной компании.
Ищете сайт для производителя или продуктового бренда? Посмотрите наши услуги, изучите другие проекты или напишите нам, и мы подготовим предложение, адаптированное к вашей компании.
