13
лет в электронной коммерции
8 800 3020 886
ГлавнаяПортфолиоHerbaria: дизайн интернет-магазина натуральной косметики

Дизайн интернет-магазина · 2024

Herbaria

Магазин натурального мыла и косметики ручной работы из Сент-Луиса. Нарисовали новый дизайн всего пути покупателя, от главной до оформления заказа, и перенесли его в тему UniTheme2 вместе с обновлением CS-Cart до версии 4.18.

Клиент
Herbaria, натуральная косметика
Задача
Новый дизайн при обновлении CS-Cart
Платформа
CS-Cart 4.18, тема UniTheme2
Макеты
13 экранов десктопа, 7 мобильных
Год
2024
herbariasoap.com
Главная страница Herbaria, макет

Задача

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

Клиент попросил сохранить фирменные цвета, дать на главной широкие фотографии и обойтись без всплывающих окон. Дизайн мы построили на теме UniTheme2: часть задач закрыли её готовые функции, и доработок понадобилось меньше.

Было и стало

Первый экран на мониторе 1280 пикселей: сайт до редизайна (снимок из веб-архива) и новый макет главной. Потяните разделитель.

Макет Было · июнь 2024 Было · июнь 2024 Макет

Главная

  • Первый экран — широкая фотография продукции в природных декорациях и поиск, без всплывающих окон.
  • Лента летних предложений листается вбок, товар кладётся в корзину прямо из ленты.
  • Акция «Купи 6, седьмой бесплатно» встроена в главную и в карточку товара.
  • Условия доставки по штатам собраны рядом с акцией бесплатной доставки от $55.
1920 × 4873 · Главная

Путь покупателя

Наведите на экран, чтобы пролистать его, или откройте во весь размер.

1920 × 2691 · Каталог

Каталог

Подкатегории плитками над списком, дерево разделов слева, «Показать ещё» вместе с пагинацией.

1920 × 5327 · Карточка товара

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

Акция рядом с кнопкой покупки, состав списком, ароматы с образцами цвета, отзывы внизу.

1920 × 3232 · Оформление заказа

Оформление заказа

Одна страница: состав заказа, доставка UPS, FedEx, USPS или самовывоз, оплата картой или по телефону.

Мобильная версия

Мобильную версию нарисовали отдельно, под ширину 393 пикселя: главная, каталог, карточка, корзина, оформление заказа, вход и регистрация.

Главная
393 × 4778 · Главная
Каталог
393 × 2128 · Каталог
Карточка
393 × 1895 · Карточка
Корзина
393 × 1261 · Корзина

Вариант первого экрана

Тот же экран на фотографиях клиента: упаковка ручной работы на первом плане, категории — с реальными товарами.

1937 × 940 · Вариант первого экрана

Поиск стиля

До финала показали клиенту несколько концептов главной. В макет пошли оливково-кремовая гамма и съёмка продукции в природных декорациях.

1920 × 3530 · Концепт 2
1920 × 1085 · Концепт 3, меню каталога

Цвета макета

  • #323C36Шапка и подвал
  • #283802Акционные ленты
  • #3D991EЦены и доставка
  • #FCF4E8Фон страниц
  • #FFFFFFКарточки

Подробнее

Консультация по интернет-магазину на CS-Cart

Найдем решения
для каждого!

Получите консультацию специалиста по вашему проекту

Пришлём гайд на вашу почту
Пришлём чек-лист на вашу почту
Чек-лист будет отправлен на указанный Вами e-mail
Пожалуйста, заполните форму