О проекте
Эксперт Спецодежда

Один из крупнейших производитель летней и зимней спецодежды и спецобуви в России, странах СНГ и ближнего зарубежья.

Задачи

Cделать адаптивную верстку на всем сайте
и натянуть ее на имеющийся бэк.
Изменить работу корзины: реализовать
корректное определение типа цены
и учет скидок. Обновить
платформу 1С-Bitrix до
последней версии.

Структура главной страницы Структура На примере Главной страницы рассмотрим, как происходит «сложение» десктопной версии в мобильную.
Горизонтальное меню в планшетной и мобильной версии сворачивается в «гамбургер».
В мобильной версии список разделов каталога превращается в кнопку со всплывающим подменю.
В десктопном варианте разделы каталога представлены в виде иконок, при нажатии на кнопку «Показать все категории» открываются подразделы каталога.
Слайдер карточек товаров в зависимости от разрешения экрана пользователя может содержать 2, 3 или 4 карточки в видимой области. Размеры самих карточек в слайдере не изменяется и соответствует размерам карточек в каталоге.
Подписка на рассылку выделена отдельной строкой, что акцентирует внимание пользователя на этой возможности.
Новости и пресс-релизы при переходе из десктопного варианта в мобильный меняют ориентацию с горизонтальной на вертикальную.
При адаптации подвала скрываются наименее значимые его области.
Адаптивные дизайн и верстка Сделан адаптивный дизайн на 2 разрешения: планшет и мобильная версия, десктоп остался неизменным по желанию Заказчика. Реализована адаптивная верстка сайта (3 разрешения + респонсив между ними) с использованием flex-технологий.
Модульная сетка
Компьютер 1920 px
Ноутбук 1800 px
Планшет 760 px
Телефон
320 px
Элементы интерфейса
Корзина и оформление заказа На сайте существует 3 типа цен (розничная, оптовая и акционная), а также действует политика скидок, зависящая от суммы единовременной покупки пользователя. Нами была настроена корректная работа корзины и механизмов подсчета цен и скидок.
Шрифт и колорит
Типографика и цвет Придерживаясь фирменного стиля и сохраняя корпоративный дух, команда Solar Group разработала компоновку шрифтов, интерактивных и других элементов на страницах для удобства использования сайта на мобильной и планшетной версии.
Solomon Sans
  • black (italic)
  • bold (italic)
  • semibold (italic)
  • normal (italic)
  • book (italic)
  • light (italic)
  • thin (italic)
R 75
G 32
B 104
#4b2068
#4b2068
R 0
G 0
B 0
#000000
R 146
G 146
B 146
#929292
R 255
G 242
B 0
#fff200
Грамотное решение задачи
Теперь Ваши покупки возможны с мобильного устройства!