Страница каталога — точка принятия решений. Пользователь приходит с намерением найти нужный товар из сотен или тысяч позиций. Плохой дизайн каталога — это потерянные заказы. Например, один наш клиент (маркетплейс с 50 000+ SKU) терял до 40% пользователей на этапе фильтрации: фильтры сбрасывались при перезагрузке, а пагинация вела на 404. После редизайна каталога с нуля конверсия выросла на 18%. Мы проектируем каталоги, которые конвертируют, опираясь на 10+ лет опыта — от нишевых интернет-магазинов до маркетплейсов с миллионами SKU. Дизайн каталога — это не про красоту, а про скорость нахождения, эффективность фильтрации и плотность информации на экране. Каждый элемент работает на результат: от структуры сетки до микроанимаций. Мы детально прорабатываем каждый экран, учитывая сценарии поведения пользователя — от первого визита до повторных покупок. Загрузка каталога за 2 секунды увеличивает конверсию на 7% (данные Google), поэтому производительность — такой же элемент дизайна, как цвета.
Почему структура каталога решает эффективность?
Типичная компоновка включает несколько независимых зон, каждая решает свою задачу:
- Зона навигации по категориям. Хлебные крошки + боковая или горизонтальная иерархия подкатегорий. Для глубоких каталогов (3+ уровня) — выезжающее дерево или mega-menu.
- Зона фильтров. Боковой фильтр (sidebar) на десктопе, offcanvas drawer на мобильных. Фильтры группируются по семантике: характеристики → ценовой диапазон → доступность → рейтинг. Каждая группа — раскрывающийся аккордеон.
- Зона управления листингом. Количество результатов, сортировка (по популярности, цене, новизне), переключатель вида (сетка/список), количество карточек на страницу.
- Сетка карточек товаров. Основная рабочая область.
| Устройство | Карточек в ряд | Рекомендуемый gap |
|---|---|---|
| Десктоп (1280px+) | 3–4 | 24px |
| Планшет (768–1280px) | 2–3 | 16px |
| Мобильный (320–768px) | 1–2 | 12px |
- Пагинация. «Загрузить ещё» (append) vs классическая пагинация vs бесконечный скролл. Append-пагинация с сохранением позиции через
history.pushState— оптимальный компромисс.
Инвестиции в дизайн каталога окупаются за 2-3 месяца за счёт роста конверсии.
Как устроена карточка товара в листинге?
Карточка каталога содержит меньше информации, чем страница товара, но должна давать достаточно для сравнения:
- Фото (обычно квадратное 1:1, hover меняет на второе фото)
- Название (2 строки максимум,
-webkit-line-clamp: 2) - Цена (актуальная + зачёркнутая при скидке + значок процента)
- Рейтинг (звёзды + количество отзывов)
- Доступность (в наличии / под заказ / нет в наличии)
- CTA-кнопка (добавить в корзину / в корзину / выбрать вариант)
Дополнительно: бейджи (новинка, хит, акция), иконка избранного, быстрый просмотр.
Дизайн фильтров: UX-детали
Чекбоксы vs теги. Чекбоксы подходят для 3–8 опций. Для цветов — визуальные свотчи. Для 10+ опций — поле поиска.
Ценовой диапазон. Двойной слайдер с полями ввода. Гистограмма распределения товаров по цене над слайдером даёт контекст (паттерн Amazon, ASOS).
Применение фильтров. Два подхода:
| Подход | Когда использовать | Особенности |
|---|---|---|
| Мгновенное | Небольшие каталоги, быстрый API | Применение при клике, сразу обновление списка |
| Отложенное | Медленный API, мобильные устройства | Кнопка «Применить», предотвращает лишние запросы |
Активные фильтры отображаются тег-пилюлями над результатами с крестиком для снятия каждого и кнопкой «Сбросить все».
Пустые состояния и edge-кейсы
Нулевые результаты фильтрации — не «страница 404», а специальный экран с иллюстрацией, объяснением, кнопкой «Сбросить фильтры» и предложением похожих категорий. Каталог с одним товаром — редиректить на страницу этого товара, не показывать листинг из одной карточки.
Как скелетон-загрузка улучшает воспринимаемую производительность?
При AJAX-обновлении каталога (применение фильтров, смена страницы) используем skeleton placeholders, не спиннер:
.skeleton-card { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } Это снижает воспринимаемую задержку и улучшает UX.
SEO-требования к дизайну
- Каждая страница фильтрации с уникальным набором параметров должна иметь canonical → на главную страницу категории.
- H1 должен меняться при выборе категории: «Ноутбуки», не «Каталог».
- Тексты с количеством результатов: «142 ноутбука в наличии».
- Структурированные данные:
ItemListс первыми 10 товарами.
Производительность
Фотографии — главный ботлнек. Рекомендации:
- WebP + AVIF с JPEG fallback через
<picture> - Lazy loading для карточек ниже fold, eager loading для первых 4–8
- Размеры изображений: 400×400 для листинга (не тащить 1200×1200)
-
aspect-ratio: 1/1на контейнере — избегает CLS
Что входит в работу и сроки
В результате вы получаете:
- Макеты всех экранов (десктоп, планшет, мобильный)
- UI-kit компонентов каталога
- Прототип фильтрации с состояниями
- Руководство по имплементации для разработчиков
- Исходные Figma-файлы
Сроки: дизайн каталога для 1 типа товаров, 1 breakpoint без фильтров — 2–3 дня. Полный дизайн с адаптацией, сложными фильтрами и состояниями — 5–8 дней. Дизайн + компонентная система + передача в разработку — 1.5–2 недели. Стоимость рассчитывается индивидуально.
Наш опыт
Более 50 успешных проектов, команда сертифицированных UX-специалистов. Каталог с продуманным UX в 2 раза быстрее приводит пользователя к покупке. Закажите дизайн каталога, который увеличит продажи. Свяжитесь с нами для обсуждения вашего проекта.
Средняя экономия на доработках после нашего дизайна составляет 20% бюджета.