Кейс по созданию сайта-каталога для высоковольтного оборудования
Разработка удобного сайта-каталога высоковольтного оборудования в стиле минимализм. Сайт светлый с красными элементами, передающие направленность компании. Добавление корзины с возможностью оформления заказа.
Мы создали сайт с каталогом оборудования для продажи и аренды, учитывая анализ ниши и особенности месторасположения компании. Поработали над высокой скоростью загрузки сайта.
Продажа и аренда высоковольтного оборудования.
- 2 недели – дизайн
- 1 месяц – разработка
- 1 месяц – заполнение
Краткий бриф на разработку сайта
WordPressВыбор цветовой палитры, шрифтов и визуального контента
Полезный и для пользователя, и для бизнеса функционал
Хедер сайта не загружен информацией: в нём представлены логотип, полный адрес, почта, выделен телефон и добавлены логотипы мессенджеров для связи. Также в хедере располагается меню, которое позволяет переместиться на любую внутреннюю страницу сайта. Справа разместили кнопка обратной связи и корзина, на которой расположен счётчик количества товаров в ней.
Слайдер на первом экране показывает категории товаров компании. Слайды автоматически сменяют друг друга каждые 5 секунд. Также можно полистать слайды, нажимая на стрелки в виде молнии. Интерактивность добавляют летающие элементы около заголовков.
Форма обратной связи
На сайте разработана форма обратной связи с масками для быстрого ориентира и заполнения. Также предусмотрена возможность написать комментарий / сообщение, чтобы описать свой запрос или пожелание.
Страница оборудования
Карточка товара представлена описанием, таблицей характеристик, слайдером товара, позволяющим показать его с разных сторон и с комплектующими. Красная линия слева перемещается вместе со скроллом страницы, что добавляет сайту интерактивности.
На главную вынесены три популярные категории оборудования: система определения местоположения повреждения кабеля, диэлектрические испытания, фургоны для испытания кабелей. Они выполнены в виде карточек с фигурными изображениями оборудования.
Блок с преимуществами позволяет узнать об уникальном торговом предложении компании. В данном случае преимуществ три, но именно они определяют профессионализм компании.
Каталог
В каталоге размещён небольшой фильтр по подкатегориям товаров. Также есть сортировка и показатель количества товаров. Дополнительно есть блок, благодаря которому можно перейти на каталог оборудования, доступного в аренду.
На странице товаров для оборудования, доступного в аренду, есть блок, который на это указывает, с возможность, нажав на кнопку, приобрести оборудование в аренду.
Хедер сайта не загружен информацией: в нём представлены логотип, полный адрес, почта, выделен телефон и добавлены логотипы мессенджеров для связи. Также в хедере располагается меню, которое позволяет переместиться на любую внутреннюю страницу сайта. Справа разместили кнопка обратной связи и корзина, на которой расположен счётчик количества товаров в ней.
Слайдер на первом экране показывает категории товаров компании. Слайды автоматически сменяют друг друга каждые 5 секунд. Также можно полистать слайды, нажимая на стрелки в виде молнии. Интерактивность добавляют летающие элементы около заголовков.
На главную вынесены три популярные категории оборудования: система определения местоположения повреждения кабеля, диэлектрические испытания, фургоны для испытания кабелей. Они выполнены в виде карточек с фигурными изображениями оборудования.
Блок с преимуществами позволяет узнать об уникальном торговом предложении компании. В данном случае преимуществ три, но именно они определяют профессионализм компании.
Форма обратной связи
На сайте разработана форма обратной связи с масками для быстрого ориентира и заполнения. Также предусмотрена возможность написать комментарий / сообщение, чтобы описать свой запрос или пожелание.
Каталог
В каталоге размещён небольшой фильтр по подкатегориям товаров. Также есть сортировка и показатель количества товаров. Дополнительно есть блок, благодаря которому можно перейти на каталог оборудования, доступного в аренду.
Страница оборудования
Карточка товара представлена описанием, таблицей характеристик, слайдером товара, позволяющим показать его с разных сторон и с комплектующими. Красная линия слева перемещается вместе со скроллом страницы, что добавляет сайту интерактивности.
На странице товаров для оборудования, доступного в аренду, есть блок, который на это указывает, с возможность, нажав на кнопку, приобрести оборудование в аренду.
Корзина с оборудованием
На сайте-каталоге реализован функционал корзины. Он представлен в виде всплывающего окна, которое можно открыть при нажатии на иконку корзины в хедере. На иконке есть динамичный счётчик товаров, которые расположены в корзине. В самой корзине можно посмотреть, какое оборудование добавлено, в каком количестве, на какую сумму (если цена не по запросу). Можно изменить количество товаров или вовсе убрать оборудование из корзины. Для оформления заказа необходимо написать контактные данные и отправить запрос.
Какие инструменты и технологии мы использовали
Скорость загрузки сайта
Google PageSpeed Insights
Для каждого проекта мы добиваемся очень высоких показателей скорости загрузки сайта. Данный сайт быстро загружается, весь контент отображается сразу: 97 баллов на десктопных устройствах и 94 балла на мобильных является крайне высоким показателем (возможны более низкие результаты из-за месторасположения пользователя, медленного интернета, сильной нагрузки на устройства). У целевой аудитории компании нет свободного времени для ожидания загрузки контента на сайте, поэтому такая высокая скорость крайне положительно повлияет на поведение пользователей на сайте.
Результаты по проекту
Благодаря отлично налаженной коммуникации с клиентом, мы учли все пожелания и разработали сайт согласно первоначальным требованиям. Тестирование дизайна сайта и его функционала на целевой аудитории, находящейся в Майами, дало положительные результаты. Быстрая загрузка сайта и качественная адаптивность на всех устройствах послужили еще большему удовлетворению от работы с нашим агентством.
Давайте обсудим проект!
