Дизайн интернет-магазина: карточка товара и каталог

Особенности дизайна интернет-магазина

Дизайн интернет-магазина отличается от корпоративного сайта: здесь пользователь принимает решение о покупке, а не просто знакомится с компанией. Каждый элемент — каталог, карточка товара, корзина, чекаут — влияет на продажи. Ошибка в дизайне карточки товара может стоить сотни упущенных заказов.

Дизайн каталога

Сетка товаров

Стандарт: 3–4 карточки в ряд на десктопе, 2 на планшете, 1–2 на мобильном. Единый размер карточек, единые пропорции фото. Хаотичная сетка с разной высотой карточек — визуальный хаос.

Фильтры и сортировка

Левая боковая панель для фильтров на десктопе, выдвижная панель на мобильных. Обязательные фильтры: цена, категория, наличие. Сортировка: по цене, популярности, новизне. Результат фильтрации обновляется без перезагрузки страницы.

Карточка товара в каталоге

Минимум информации для принятия решения: фото, название, цена, кнопка «В корзину». Дополнительно: рейтинг, старая цена (если скидка), бейдж «Хит»/«Новинка». Hover-эффект: показать второе фото или кнопку быстрого просмотра — это эффективное микровзаимодействие.

Дизайн карточки товара

Фотографии

Главный фактор принятия решения. Минимум 3–5 фото с разных ракурсов. Зум по клику или наведению. Единый фон (белый — стандарт). Для одежды — фото на модели. Для техники — фото в контексте использования.

Информация

Иерархия: название → цена → краткое описание → CTA → характеристики → подробное описание → отзывы. Цена — крупно, заметно. Если есть скидка — старая цена зачёркнута, новая выделена акцентным цветом.

CTA-кнопка

«Добавить в корзину» — крупная, контрастная, на виду. На мобильных — фиксированная внизу экрана (sticky). После добавления — анимация подтверждения и предложение перейти в корзину или продолжить покупки.

Доверие

Наличие на складе, сроки доставки, гарантия, условия возврата — сразу на карточке. Иконки доставки, возврата, гарантии рядом с кнопкой покупки. Отзывы покупателей с рейтингом — мощный конверсионный элемент.

Дизайн корзины

• Мини-корзина (dropdown) при добавлении товара — не уводит со страницы каталога
• Полная страница корзины: фото + название + цена + количество + итого
• Кнопка «Оформить заказ» — крупная, сверху и снизу списка
• Указание стоимости доставки до оформления заказа
• Блок «С этим товаром покупают» — upsell без навязчивости

Чекаут (оформление заказа)

Самый критичный этап — 70% корзин бросают на чекауте. Правила:

• Минимум полей — UX-правила форм здесь критичны
• Пошаговый процесс с прогресс-баром: Корзина → Доставка → Оплата → Подтверждение
• Гостевой чекаут (без регистрации) — регистрация убивает конверсию
• Итоговая сумма всегда видна (sticky sidebar)
• Логотипы платёжных систем — визуальное подтверждение безопасности

Навигация в интернет-магазине

Мега-меню с категориями — стандарт для магазинов с большим ассортиментом. Хлебные крошки — обязательны для товарных страниц. Поиск с автоподсказками — для магазинов с 100+ товарами. Фиксированная корзина в шапке с счётчиком товаров.

Нужен дизайн интернет-магазина? Свяжитесь с нами — спроектируем магазин, который удобен покупателям и увеличивает продажи.