СнабПроект — интернет-магазин стройматериалов
СнабПроект — cпециализированный оптово-розничный интернет-магазин сторительных и отделочных материалов.
Задача
Разработать удобный и функциональный интернет-магазин для продажи строительных и отделочных материалов с разными шаблонами карточек товаров и интеграция с 1С.
Инструменты
Интернет-магазин был разработан на CMS Opencart.
Дизайн
Любой дизайн начинается с прототипирования нетипичных страниц, и для СнабПроекта наш дизайнер разработал прототипы для страниц:
- Главная;
- Каталог;
- Страница товара;
- Корзина;
- Оформление заказа;
- Контакты.
По утверждённым прототипам дизайнер нарисовал макеты будущих страниц. Дизайн сайта для компании реализован в яркой и контрастной цветовой гамме, где основной акцент сделан на сочетание оранжевого и черного цветов. Оранжевый (как акцентный цвет) создает позитивную атмосферу при выборе строительных материалов, а черный придает дизайну премиальность, что подчеркивает профессионализм компании, оттенки серого используются для дополнительных элементов.
Главная страница сайта имеет функциональную шапку в фирменном оранжево-черном стиле. Категории каталога представлены двумя способами: в виде удобного списка и в формате плитки с превью продукции. В верхней части размещен слайдер баннеров с актуальными предложениями, затем идут блоки карточек товаров с новинками, скидками, хитами продаж. Также здесь находится форма обратной связи и блок с главными преимуществами компании. Завершает страницу функциональный подвал с реквизитами, элементами навигации по сайту, контактными данными и способами оплаты.
Страница каталога представляет собой удобный инструмент для пользователей, позволяющий фильтровать товары по категориям и различным параметрам, таким как цена, коллекции, производитель, цвета и другие. Это даёт возможность клиентам легко находить нужные товары, сравнивать их между собой и делать выбор на основе своих предпочтений и бюджета. Сортировка товаров по популярности, возрастанию или убыванию цены, рейтингу и дате поступления, упрощает процесс поиска и позволяет пользователям видеть самые востребованные товары, недавно добавленные в каталог или товары с высоким рейтингом от других покупателей.
Страница товара включает фотографии товара, демонстрирующее его внешний вид и детали, информирует о наличии на складе, показывает основные характеристики и особенности материала, коллекцию, производителя, имеет кнопки для добавления товара в список покупок и для сохранения товара в списке избранных для последующего просмотра и покупки. А также подробное описание свойств и применения материала, информацию с условиями доставки и оплаты.
Корзина содержит удобные кнопки управления товарами, динамическое обновление суммы заказа и плавные переходы при изменении количества продукции. Это позволяет пользователям легко контролировать свои покупки и просматривать общую стоимость заказа в режиме реального времени.
Оформление заказа происходит путем заполнения формы с полями для ввода данных о покупателе и способах связи. В ней также предлагается выбор способа доставки и оплаты, что делает процесс оформления заказа быстрым и удобным для клиента. Простой и понятный процесс оформления заказа снижает количество отказов на финальном этапе покупки.
Сайт выполнен с использованием адаптивной вёрстки, которая обеспечивает корректное отображение интерфейса на любых устройствах. При клике на бургер открывается навигационное меню, которое удобно расположено и интуитивно понятно. Размер кнопок и кликабельных элементов достаточно большой, чтобы пользователи могли легко нажимать на них.
Весь контент был перераспределен, отдельно был отрисован мобильный фильтр и выпадающий список категорий, перегруппирована вся информация с учетом разрешения мобильного экрана, подобран подходящий размер шрифта, оптимизированы карточки товаров.
