Кейс по созданию сайта-каталога для поставщика систем безопасности

Разработать сайт-каталог в стиле Hi-Tech с использованием фирменной палитры цветов. Предоставить удобную и понятную структуру каталога и категорий товаров. Обеспечить высокую скорость загрузки сайта.
Создан сайт-каталог в стиле Hi-Tech, выполненный с использованием фирменной палитры цветов. Сайт предлагает удобную и понятную структуру категорий товаров, что позволяет пользователям легко находить необходимую информацию. Высокая скорость загрузки обеспечивает комфортное взаимодействие, а современный дизайн делает сайт привлекательным для посетителей.
Поставки комплексных систем безопасности
- 3 недели – дизайн
- 2 месяца – разработка
- 1 месяц – заполнение
Краткий бриф на разработку сайта
Выбор цветовой палитры, шрифтов и визуального контента


Полезный и для пользователя, и для бизнеса функционал
Первое, на что обращает внимание посетитель на сайте, – это шапка. Несмотря на простоту структуры хедера в данном проекте, элемент выглядит уникально за счет обыгрывания стиля Hi Tech в виде линий. Сама шапка сайта состоит из двух частей: верхняя содержит контактную информацию о компании, авторежим работы и поиск по названию или артикулу; нижняя указывает на важные внутренние страницы сайта.

Блок с этапами взаимодействия с клиентами является важным разделом, потому что таким образом пользователи понимают, как с ними будут работать при обращении, как будет выстроен процесс коммуникации. На первом этапе можно быстро оставить заявку, нажав на кнопку и оставив свои контактные данные.

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

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

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

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

Какие инструменты и технологии мы использовали
Скорость загрузки сайта
Google PageSpeed Insights

Наши специалисты без препятствий оптимизировали скорость загрузки сайта, чтобы было удобнее и быстрее перемещаться по нему. Более подробно о том, почему так важна высокая скорость загрузки сайта, можно почитать в нашей статье. Для текущего проекта были достигнуты следующие значения: 95 баллов на декстопных устройствах и 94 балла на мобильных (возможны более низкие результаты из-за медленного интернета или сильной нагрузки на устройства).
Результаты по проекту
На всём протяжении работы над сайтом не возникало трудностей ни в процессе согласования, ни в процессе разработки, так как клиент высказывал свои предложения и выслушивал наши. Таким образом, мы приходили к общим решениям, которые по итогу позволили воплотить в жизнь уникальный, креативный и стильный сайт с удобным функционалом и проработанной структурой. Сайт очень быстро загружает размещенный контент и имеет проработанные адаптивы под все устройства.
Давайте обсудим проект!