О компании: ООО «ОгнеборСервис» – поставщик комплексных систем безопасности, в том числе пожарного и охранного оборудования. Компания продает оборудование, проектирует, производит монтаж и техническое обслуживание. Компания располагает необходимыми разрешительными документами, кадрами и оборудованием для оказания всего спектра услуг в сфере слаботочных систем и систем безопасности.
Основные цели: Разработать сайт-каталог в стиле Hi-Tech с использованием фирменной палитры цветов. Предоставить удобную и понятную структуру каталога и категорий товаров. Обеспечить высокую скорость загрузки сайта.
| Краткий бриф на разработку сайта | |
| Наименование компании | ООО «ОгнеборСервис» |
| Сфера деятельности | Поставки комплексных систем безопасности |
| Страна, на которую рассчитан сайт | Беларусь |
| Основные товары и услуги | Видеонаблюдение, охранно-пожарная сигнализация, пожаротушение и огнезащита, кабели и провода и т.д. |
| Домен сайта | ognebor.pro |
| Целевая аудитория | Мелкий и крупный бизнес, производственные организации, а также физические лица мужского пола 30-60 лет |
| Задачи сайта | Представление информации о доступных товарах и о самой компании, привлечение новых клиентов |
| Тип сайта | Сайт-каталог |
| Тариф | Индивидуальное решение |
| CMS | WordPress |
| Хостинг | HB.BY |
| Пожелания заказчика | Стиль Hi-Tech (геометрические линии, современный дизайн, яркая картинка), фирменные цвета, строгие шрифты, наличие поиска |
Обращение
Клиент обратился в наше агентство с целью обновления своего старого сайта: на момент обращения он не соответствовал многим параметрам usability. В ходе брифинга мы выявили предпочтения клиента по стилю нового сайта, его структуре, отображаемым категориям. Дизайн сайта должен отличаться от сайтов конкурентов на белорусском и зарубежном рынках.
Фирменная палитра и шрифты
В начале работы мы отрисовали готовый логотип компании в векторном формате, так как ранее у клиента был только jpg формат логотипа, в то время как для сайта желателен формат svg или png. Проблем с выбором цветов для сайт не возникло – взяли фирменную палитру компании: оранжевый и темно-серый цвета, а также градиент, взятый с логотипа.
Насчет шрифтовой пары мы с клиентом тоже быстро пришли к согласию: гротескный шрифт Tektur идеально подходит под сферу деятельности компании за счет своих острых изгибов, а Fira Sans, шрифт для основного текста, отлично сочетается с заглавным шрифтом и немного сглаживает строгость всего сайта.
Цвета
Процесс разработки
Первое, на что обращает внимание посетитель на сайте, – это шапка. Несмотря на простоту структуры хедера в данном проекте, элемент выглядит уникально за счет обыгрывания стиля Hi Tech в виде линий. Сама шапка сайта состоит из двух частей: верхняя содержит контактную информацию о компании, авторежим работы и поиск по названию или артикулу; нижняя указывает на важные внутренние страницы сайта.
Главная страница является своеобразной карточкой компании, по которой складывается общее мнение об имидже и ценностях организации и её отношение к клиентам. Поэтому важно добавлять такие блоки, как преимущества, причины обратиться, этапы работы, о компании в цифрах, которые транслируют сильные стороны организации и их направленность.
Блок с этапами взаимодействия с клиентами является важным разделом, потому что таким образом пользователи понимают, как с ними будут работать при обращении, как будет выстроен процесс коммуникации. На первом этапе можно быстро оставить заявку, нажав на кнопку и оставив свои контактные данные.
В данном проекте примечателен каталог, содержащий большое количество подкатегорий, ссылки на которые желательно было разместить вместе на одной странице. Поэтому мы пришли к решению под изображениями категорий разместить ссылки на подкатегории, и когда их количество становится больше шести, то они скрываются с возможностью их развернуть вручную и так же снова скрыть.
В каталоге присутствует фильтр по двум важным для клиентов параметрам: тип оборудования и цена. Фильтр обусловлен достаточно обширным каталогом оборудования, в котором без фильтрации пришлось долго искать необходимый товар.
Первый параметр отвечает за более подробный подбор нужного оборудования с возможностью заранее посмотреть, сколько товаров внутри подкатегории представлено. Второй параметр позволяет настроить ползунок от минимально до максимально доступной цены на оборудование.
Также встроена возможность сортировки оборудования по различным параметрам и изменение количества показываемых товаров в пределах одной страницы.
Дополнительные модификации
Description-миниатюра
В качестве дополнительного элемента была отрисована и установлена description-миниатюра с указанием контактной информации и деятельности. Такая миниатюра отображается в социальных сетях и мессенджерах при размещении ссылки на сайт.
Авторежим работы
На сайте реализован функционал автоматического отображения текущего дня и времени работы компании для удобства просмотра актуального режима, если клиент собирается позвонить или посетить офис и хочет быть уверен, что попадет в рабочее время.
Построение маршрута
Для удобства нахождения офиса компании на странице “Контакты” разместилась интерактивная карта с возможностью построения маршрута в Яндекс и Google картах. Маршрут можно строить как от текущего месторасположения пользователя, так и любого другого адреса, введенного вручную.
Навигационный меню-бар
Функционал инновационного меню-бара закрепляется внизу сайта на мобильных устройствах. У пользователей есть быстрый доступ к важным страницам сайта, а также возможность перейти на любую страницу внутри каталога благодаря раскрывающемуся меню со скроллингом, что позволяет вынести большое количество страниц в него.
Скорость загрузки
Наши специалисты без препятствий оптимизировали скорость загрузки сайта, чтобы было удобнее и быстрее перемещаться по нему. Более подробно о том, почему так важна высокая скорость загрузки сайта, можно почитать в нашей статье. Для текущего проекта были достигнуты следующие значения: 95 баллов на декстопных устройствах и 94 балла на мобильных (возможны более низкие результаты из-за медленного интернета или сильной нагрузки на устройства).
Google PageSpeed Insights
Результаты
На всём протяжении работы над сайтом не возникало трудностей ни в процессе согласования, ни в процессе разработки, так как клиент высказывал свои предложения и выслушивал наши. Таким образом, мы приходили к общим решениям, которые по итогу позволили воплотить в жизнь уникальный, креативный и стильный сайт с удобным функционалом и проработанной структурой. Сайт очень быстро загружает размещенный контент и имеет проработанные адаптивы под все устройства.
