Сайт для компании Plex

15.12.2023
Логотип Plex - Агентство FOURO

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

перейти на сайт
Лаборатория Plex - Агентство FOURO

Задача:

  • Редизайн сайта компании Plex, создание адаптивного дизайна для мобильных устройств
  • Внедрение в карточку товара возможность выбора объема, фасовки и вида тары
  • Создание удобной навигации по сайту
  • Разработка новых блоков и страниц
  • Связка сайта с системой 1с - пользователь имеет возможность купить товар на сайте: то есть создание полноценного интернет магазина. 
01

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

Разработана удобная система навигации по сайту.

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

Переработаны и добавлены блоки с преимуществами компании, новостной блок, информация о компании.

Главная страница сайта Plex на ноутбуке - Агентство FOURO
Главная страница сайта Plex на планшете - Агентство FOURO
Главная страница сайта Plex на мобильном устройстве - Агентство FOURO
02

Каталог

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

На сайте Plex пользователь сам определяет количество выводимой информации: по 12, 24, 32 товаров на странице.

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

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

Каталог товаров сайта Plex на ноутбуке - Агентство FOURO
Каталог товаров сайта Plex на планшете - Агентство FOURO
Каталог товаров сайта Plex на мобильном устройстве - Агентство FOURO
03

Карточка товара

В карточку товара добавлена возможность выбора объема, фасовки и вида тары.

Вся дополнительная информация о товаре разбита по вкладкам (Описание, Применение, Меры предосторожности и т.д.) в целях удобства и экономии места на странице.

Добавлена возможность заказа товара через маркетплейсы.

Также на страницу карточки товара добавлены необходимые логические блоки для удобства навигации пользователя.

Карточка товара сайта Plex на ноутбуке - Агентство FOURO
Карточка товара сайта Plex на планшете - Агентство FOURO
Карточка товара сайта Plex на мобильном устройстве - Агентство FOURO
04

Личный кабинет

Для удобства пользователя на сайте был пересобран личный кабинет.

Зарегистрироваться в личном кабинете можно как: Частное лицо, Организация, Индивидуальный предприниматель.

В ЛК есть возможность посмотреть предыдущие заказы, добавить нового пользователя / организацию.

Личный кабинет пользователя сайта Plex на ноутбуке - Агентство FOURO
Личный кабинет пользователя сайта Plex на планшете - Агентство FOURO
Личный кабинет пользователя сайта Plex на мобильном устройстве - Агентство FOURO | фото 1
Личный кабинет пользователя сайта Plex на мобильном устройстве - Агентство FOURO | фото 2

UI kit

Color

#002246
#193C57
#008BD2
#41C0EB
#6294AB
#CBD4DB
#FF5C64

Button / Hover

Default Купить Элемент дизайна на сайте Plex - Агентство FOURO | фото 1
Hover Купить Элемент дизайна на сайте Plex - Агентство FOURO | фото 2
Pressed Купить Элемент дизайна на сайте Plex - Агентство FOURO | фото 3

montserrat

montserrat

montserrat

montserrat

montserrat

montserrat

montserrat

Heading large

  • *
  • *
  • *
  • *
  • *

36

Heading meduim

  • *
  • *
  • *
  • *
  • *

30

Heading small

  • *
  • *
  • *
  • *
  • *

24

Large

  • *
  • *
  • *
  • *
  • *

18

Base

  • *
  • *
  • *
  • *
  • *

16

Small 1

  • *
  • *
  • *
  • *
  • *

14

Small 2

  • *
  • *
  • *
  • *
  • *

12

montserrat

montserrat

montserrat

montserrat

montserrat

montserrat

montserrat

grid

grid

grid

grid

grid

grid

grid

grid

grid

grid

grid

grid

Макет сайта Plex с сеткой grid - Агентство FOURO

Результат

Мы воплотили в новом сайте Plex ключевые идеи создателей марки: адаптивный дизайн для мобильных устройств; внедрение в карточку товара возможность выбора объема, фасовки и вида тары; актуальная информация о наличии товаров, удобная навигация по сайту, подробное описание товара и бренда


Появились вопросы?
Хочу консультацию