Разработка корпоративного сайта и комплекта этикеток для компании «Барвекс»

Изготовлено:12 нояб. 2016 г.
Сделать корпоративный сайт с возможностью его дальнейшего самостоятельного администрирования. Разработать этикетки для различной продукции, производимой компанией «Барвекс». Каждая этикетка должна быть выполнена в едином стиле, но с использованием отличительных цветов, характерных для той или иной линейки (например, шампуни, автокосметика и т.д.).

«Барвекс» — это российская компания, которая занимается производством профессиональной автокосметики и имеет свыше 10 региональных представительств на территории России.

В рамках работы над проектом были разработаны свыше 20 различных этикеток для всей продукции компании. Подготовлены более 70 рекламных фото автошампуней и автокосметики с новыми этикетками. Также были свёрстаны рекламные материалы — листовка и буклет. Создан адаптивный сайт под ключ с простой системой управления и подробными видеоинструкциями по его администрированию.

Перед началом работ был проведён анализ всей продукции и выделены 3 основные категории: автошампуни, автокосметика и детейлинг. Компания выполняет фасовку в канистры объёмом 0.5, 1, 5 и 20 литров. Соответственно при размещение текста и изображений, необходимо учитывать то факт, что на таре объёмом 1 литр, этикетка состоит из двух частей, размещённых на соседних гранях. А для ёмкостей объёмом 0.5 литра важно соблюсти условие читаемости текста, так как данная канистра имеет цилиндрическую форму.

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

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

Этикетка для тары 5 и 20 литров имеет один размер, что делает её универсальной.

Универсальная этикетка для разных канистр
Универсальная этикетка для разных канистр

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

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

Часть продукции реализуется через автомойки. Для этого были подготовлены раздаточные материалы — это традиционный буклет с двумя параллельными фальцами и обычная листовка.

Рекламный буклет формата А4
Рекламный буклет формата А4

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

Совместно с представителем от «Барвекс» было решено разработать простой сайт, где главная страница будет выступать в качестве каталога. Все остальные страницы, будут посвящены подробному описанию каждого продукта компании.

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

Пролистывание продукции
Пролистывание продукции

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

При первичном посещении сайта выводится модальное окно с аукционным предложением.

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

Сайт работает на системе управления контентом (content management system, далее CMS), что позволяет редактировать его содержимое, не работая напрямую с программным кодом. Клиент администрирует сайт самостоятельно. Поэтому были подготовлены подробные видеоинструкции, где освещены основные принципы работы с CMS. Полный список видеоиструкций доступен по ссылке.

На сайте используются 4 основных цвета, а также различные варианты с их прозрачностью.

#643C87
#EBD9FF
#00B159
#000000
Основные цвета

В качестве основной была выбрана гарнитура без засечек Lato с начертанием Regular. В качестве дополнительной используется та же гарнитура, но уже с начертанием Black.

Данная гарнитура используется для основного текста
Данная гарнитура используется для основного текста
Данная гарнитура используется для дополнительного текста (заголовки, кнопки и т.д.)
Данная гарнитура используется для дополнительного текста (заголовки, кнопки и т.д.)

Сайт готов и передан клиенту.