Связаться

Бергауф - компания, активно развивающая направление разработки, производства и реализации строительных материалов.

bergauf.ru
01

Задача

Сделать редизайн с сохранением функциональных возможностей старого сайта.

02

Дизайн сайта

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

Главная страница

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

Новый сайт Bergauf
Старый сайт Bergauf

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

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

Каталог и карточка товара

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

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

Фронтенд разработка

Оптимизация медиаконтента

Стоит обратить внимание на видео с Главной страницы, которые были оптимизированы под веб. Каждое видео загружено в двух форматах в стандартном MP4 и в специальном WEBM. Благодаря такому решению страница сайта грузится быстро в самых популярных браузерах, так как отображается более легкий вариант видео - WEBM. Для остальных браузеров, которые не работают с данным форматом, отображается видео в формате MP4.

Оптимизация медиаконтента Bergauf

Адаптивность

Так как за последний год доля пользователей интернетом через мобильные устройства составила 51%, адаптивная верстка уже считается обязательным параметром для удобного пользования сайтом. Благодаря наличию адаптива потенциальные партнеры могут легко ознакомиться с ассортиментом Bergauf не только с компьютера, но и с телефона и планшета.

Адаптивность Bergauf

Кластеризации представительств на карте

Компания Бергауф - крупный поставщик строительных материалов со множеством представительств. Поэтому перед нами стояла задача, как их разместить на карте, чтобы пользователю было удобно ориентироваться и фильтровать представительства по типу. Для реализации задачи было решено использовать возможности API Яндекс Карт: если представительства располагаются рядом друг с другом, то в отдаленном варианте карты они объединяются в один кластер. При приближении карты - метки представительств разделаются для удобного просмотра. Несмотря на большое количество меток на карте фильтрация меток применяется быстро и почти незаметно для пользователя.

Кластеризации представительств на карте Bergauf

Адаптивность

Так как за последний год доля пользователей интернетом через мобильные устройства составила 51%, адаптивная верстка уже считается обязательным параметром для удобного пользования сайтом. Благодаря наличию адаптива потенциальные партнеры могут легко ознакомиться с ассортиментом Bergauf не только с компьютера, но и с телефона и планшета.

Адаптивность Bergauf
04

Программирование

Калькулятор расхода

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

Калькулятор расхода Bergauf

Интеграция с мобильным приложением

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

Помощь в выборе

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

Помощь в выборе Bergauf

Интеграция с мобильным приложением

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

05

Результат

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

Спасибо за просмотр bergauf.ru