Информационная архитектура
Проектирую структуру категорий и подкатегорий по логике покупателя, а не по внутреннему складу. Товар находится за 2–3 клика.
E-commerce · Каталог товаров
Проектирование каталога товаров
Каталог — это место, где покупатель либо находит товар, либо уходит. Проектирую структуру, live-фильтры и навигацию, которые ведут к товару за 2–3 клика. Не «нарисовать сетку», а спроектировать логику поиска нужного в большом ассортименте.
Live-фильтры и сортировка
Фильтры без перезагрузки, счётчики товаров, понятная сортировка. Пользователь видит, как меняется выбор после каждого клика.
Mobile-first каталог
Фильтры в выдвижной шторке, карточки в 2 колонки, sticky-панель сортировки. 60–80% покупок — со смартфона.
Handoff в разработку
Спецификация: состояния фильтров, поведение при взаимодействии, адаптивные правила, интеграция с CMS. Не пропадаю после макетов.
02 / Value
Что вы получаете
Что вы получаете
в цифрах.
Каталог — это воронка в миниатюре: пользователь входит на категорию, ищет, фильтрует, доходит до товара. Если на любом шаге спотыкается — уходит. Вот что меняется, когда каталог спроектирован как продукт.
Кликов до товара
Логичная ИА и понятные фильтры сокращают путь до нужной позиции в разы по сравнению с запутанной структурой.
Конверсия из каталога
Когда фильтры работают мгновенно, а карточки читаются — пользователи чаще доходят до карточки товара и до корзины.
Отказов в листингах
Правильные состояния фильтров, счётчики и «пустой результат» с подсказками снижают уход из категорий.
Недели на дизайн
Прототип с ИА — 3–5 дней. Полный UI-дизайн каталога с мобильной версией и состояниями — 2–4 недели.
Показатели — обезличенные данные по завершённым проектам под NDA. Конкретный результат зависит от исходных данных и задач бизнеса.
03 / Deliverables
Что входит
Что входит
в решение.
Полный цикл проектирования каталога — от анализа ассортимента до макетов, готовых к разработке.
Анализ ассортимента
Какие категории реально нужны, что ищут покупатели, какие характеристики важны для навигации. Структура строится на данных, а не на «вроде логично».
Информационная архитектура
Иерархия категорий и подкатегорий, перелинковка, точки входа. Документ, по которому видно путь пользователя от входа до товара.
Логика фильтров и сортировки
Какие фильтры показывать, в каком порядке, как работают счётчики товаров, что происходит при пустом результате. Live-фильтры без перезагрузки.
Прототип с логикой
Кликабельный прототип: переходы по категориям, применение фильтров, сортировка, состояния. Спорные места решаем до дизайна, а не после.
UI-дизайн каталога
Список товаров, сетка карточек, панель фильтров, сортировка, хлебные крошки, пагинация или бесконечный скролл, состояния загрузки.
Мобильная версия
Mobile-first: шторка фильтров, карточки в 2 колонки, sticky-панель сортировки, крупные тач-элементы. Отдельно проектирую поведение на маленьком экране.
04 / Catalog logic
Логика каталога
Логика каталога
до дизайна.
Каталог кажется простым — пока не начинаешь решать, какие категории выделить, как связать фильтры, что делать, когда после фильтрации ничего не найдено. Эти вопросы — на прототипе, не на финальных макетах.
Что даёт проработка логики каталога
-
Понятно, как устроена структура. Какие категории существуют, как связаны, где пользователь входит и куда идёт. Не «свалка разделов», а карта пути.
-
Продуманы состояния фильтров. Выбрано, недоступно, доступно после снятия другого, счётчик товаров. Каждый фильтр ведёт себя предсказуемо.
-
Пустой результат — не тупик. Если по фильтрам ничего нет — показываем, какой фильтр снять, и предлагаем похожие товары. Пользователь остаётся в каталоге.
-
Меньше правок в дизайне. Спорные места — порядок фильтров, пагинация vs скролл, поведение мобильной шторки — обсуждаем на прототипе, а не на финальных экранах.
Пример из практики: интернет-магазин инструментов. Каталог был построен по внутреннему складу — пользователи не находили товар, потому что не знали «правильного» названия категории. На прототипе пересобрали ИА: категории назвали так, как их ищут люди, добавили теги-синонимы и live-фильтры со счётчиками. Глубина навигации сократилась, отказы из листингов снизились.
05 / How I work
От анализа
От анализа
до передачи.
Прозрачный процесс проектирования каталога с понятными этапами и 2 кругами правок на каждом шаге.
01
Анализ
Ассортимент, категории, поисковая аналитика. Понимаю, что ищут покупатели и где сейчас теряются в каталоге.
02
ИА и прототип
Структура категорий, логика фильтров, сортировка, состояния. Согласовываем до дизайна.
03
UI и адаптив
Дизайн листинга, карточек, панели фильтров, мобильной шторки. Компоненты и состояния в UI Kit.
04
Передача и поддержка
Спецификация, состояния, интеграция с CMS и аналитикой. Созвоны с разработкой. Не пропадаю после сдачи.
06 / Cases
Результаты
Результаты
в цифрах.
Обезличенные кейсы по проектированию каталогов. Названия компаний под NDA, логика задачи и результат — реальные.
Магазин инструментов
−0
%
кликов до товара
Задача: каталог был построен по внутреннему складу, покупатели не находили товар. Решение: пересобрали ИА, добавили теги-синонимы и live-фильтры со счётчиками. Результат: путь до товара сократился почти вдвое, отказы из листингов снизились.
B2B-поставщик
×0
быстрее сборка заказа
Задача: снабженцы работали с большими партиями, каталог не поддерживал массовый сценарий. Решение: добавили поиск по артикулу, фильтры по партиям, массовое добавление в корзину. Результат: сборка заказа ускорилась вдвое.
Магазин одежды
+0
%
конверсия из каталога
Задача: на мобильном каталог был неудобным, фильтры не открывались, карточки не читались. Решение: переделали мобильную шторку фильтров, карточки в 2 колонки, sticky-сортировку. Результат: конверсия из каталога выросла на пятую часть.
07 / Self-service
Что подготовить
Что подготовить
для старта.
Минимум, чтобы начать работу над каталогом. Если чего-то нет — разберёмся вместе на этапе анализа.
Структура каталога
Список категорий и подкатегорий — из CMS, Excel или текущего сайта. Даже черновая структура подойдёт для старта.
Характеристики товаров
Какие атрибуты есть у товаров (бренд, размер, цвет, материал). От этого зависят фильтры и сортировка.
Данные аналитики
Тепловые карты, воронка, поисковая аналитика. Показывают, где пользователь тормозит и какие категории пустуют.
Примеры, что нравится
2–3 каталога конкурентов, которые считаете сильными. Помогают понять уровень и направление.
Часто бывает
- Ассортимент большой, но структура нелогичная — начнём с ИА, потом фильтры и дизайн
- Фильтры есть, но ими не пользуются — разберём по данным, что не так со счётчиками и порядком
- Есть B2B-сценарии (артикул, партии) — предусмотрим отдельно от розничного каталога
Нет структурированной ИА и аналитики? Это нормально. Пришлите список категорий и ссылку на текущий каталог — логику и приоритеты соберём вместе. У большинства клиентов понятная структура складывается уже на этапе прототипа.
Обсудить проект
08 / FAQ
Частые вопросы
Частые вопросы
про каталог.
Стоимость, сроки, информационная архитектура, live-фильтры, пустые результаты, B2B-сценарии и handoff.
Что входит в проектирование каталога товаров?
Анализ ассортимента и сценариев, информационная архитектура, многоуровневая структура категорий, live-фильтры, сортировка, хлебные крошки, состояния пустых результатов, UI-дизайн и handoff в разработку.
Сколько стоит проектирование каталога для интернет-магазина?
Цена зависит от количества категорий, сложности фильтрации и сценариев. Базовый каталог — от 60 000 ₽, крупный многоуровневый каталог с live-фильтрами — от 120 000 ₽. Точную цену после брифа.
Как долго создаётся дизайн каталога?
Прототип с информационной архитектурой — 3–5 дней. Полный UI-дизайн каталога (главная, категории, подкатегории, листинги, мобильная версия) — от 2 до 4 недель.
Что такое информационная архитектура и зачем она нужна?
Это логика структуры каталога: какие категории и подкатегории существуют, как связаны между собой, какие атрибуты важны для навигации. Хорошая ИА позволяет пользователю находить товар за 2–3 клика.
Как работают live-фильтры в каталоге?
Live-фильтры обновляют список товаров без перезагрузки страницы. Пользователь сразу видит счётчики товаров и понимает, какой фильтр сужает выбор. Это ускоряет навигацию и снижает отказы.
Что происходит, когда по фильтрам ничего не найдено?
Проектирую отдельное состояние: показываю, какой фильтр снять, чтобы вернуть результаты, и предлагаю похожие товары. Пустой результат — не тупик, а точка возврата в навигацию.
Как каталог адаптируется под мобильные устройства?
Mobile-first: фильтры в выдвижной шторке, карточки в 2 колонки, sticky-панель сортировки, крупные тач-элементы. 60–80% покупок в E-commerce идут со смартфона.
Работаете ли вы с B2B-каталогами?
Да. В B2B-каталогах важны сценарии по артикулу, массовое добавление в корзину, работа с партиями, отдельные условия для оптовиков. Проектирую такие сценарии отдельно от розничных.
Вы делаете только дизайн или также вёрстку?
Проектирую в Figma: прототип, UI, состояния, спецификацию. Реализацию выполняют разработчики — предоставляю handoff с логикой поведения. При необходимости верстаю на Tilda или Webflow.
Что такое handoff и что в него входит?
Handoff — передача макетов в разработку с описанием логики. В него входят: состояния фильтров, поведение при взаимодействии, адаптивные правила, спецификация компонентов, интеграция с CMS.
Что нужно подготовить для старта?
Структуру текущего каталога (или выгрузку из CMS), список категорий и характеристик, доступ к аналитике (если есть), примеры конкурентов с сильными каталогами. Этого достаточно, чтобы начать.
09 / Related
Что заказывают
Что заказывают
вместе.
Дизайн, который часто идёт в связке с проектированием каталога. Можно взять как отдельные услуги или комбинировать.
E-commerce
Дизайн интернет-магазинов
Каталоги, корзины, checkout с фокусом на конверсию.
Дизайн e-commerce магазинов
UI/UX Design
UI/UX дизайн интерфейсов
Проектирование интерфейсов порталов и систем.
UI/UX дизайн интерфейсов
UI/UX Audit
UI/UX аудит магазина
Анализ каталога и воронки с планом улучшений.
UI/UX аудит магазина
Redesign
Редизайн сайтов
Обновление дизайна и UX без потери наработок.
Редизайн сайтов
10 / Why me
Почему выбирают
Почему выбирают
меня.
Не потому что «быстро и недорого» — это есть у всех. А потому что с первого созвона понятно: я думаю про структуру и сценарии навигации, а не про «нарисовать сетку».
Типичный исполнитель
- Рисует сетку карточек по шаблону
- Не смотрит на структуру и сценарии
- Не думает про пустые результаты
- Сдал макеты — пропал
- Ведёт 5+ проектов одновременно
Продуктовый UX/UI дизайнер
- Проектирую ИА и логику фильтров
- Продумываю состояния и пустые результаты
- Учитываю B2B-сценарии (артикул, партии)
- Прототип до дизайна — логика кликается
- Веду 2–3 проекта за раз, не больше
Let's talk
Нужен удобный
Нужен удобный
каталог?
Разберёмся с ассортиментом и сценариями навигации — и спроектируем каталог, где покупатель находит товар за 2–3 клика, а не уходит к конкурентам.
11 / Related queries
Другие направления
Другие направления
E-commerce.
Часто ищут в E-commerce — соседние услуги и направления. Переходите, чтобы посмотреть детали и примеры.
дизайн интернет-магазина
ui ux дизайн ecommerce
дизайн карточки товара
дизайн корзины и оформление заказа
дизайн каталога товаров
фильтрация и поиск в интернет-магазине
адаптивный дизайн для ecommerce
редизайн интернет-магазина
дизайн личного кабинета покупателя
no-code ecommerce mvp
дизайн маркетплейса
презентация для ecommerce
Проектирование каталога товаров для интернет-магазина
Каталог — сердце интернет-магазина. Здесь пользователь либо находит товар, либо уходит. Если структура построена по внутреннему складу, фильтры не показывают счётчики, а карточки перегружены — покупатель теряется и закрывает вкладку. Проектирую каталог как продуктовый интерфейс, который ведёт пользователя к товару за 2–3 клика.
Работа начинается с анализа ассортимента и сценариев: какие категории реально нужны, что ищут покупатели, какие характеристики важны для навигации. Затем — информационная архитектура и прототип: логика фильтров, счётчики товаров, сортировка, состояния пустых результатов. Только после согласования логики — UI-дизайн с карточками, панелью фильтров и мобильной версией.
Отдельно прорабатываю B2B-сценарии: поиск по артикулу, фильтры по партиям, массовое добавление в корзину, отдельные условия для оптовиков. Для B2B-магазинов это критично — снабженцы заказывают партиями, а не по одному товару.
Хотите, чтобы каталог конвертировал лучше? Давайте разберём вашу структуру и фильтры по данным — переходите на страницу контактов.
Информация на странице носит справочный характер
Цены, сроки и объёмы работ, указанные на этой странице, являются ориентировочными и не являются публичной офертой, определяемой положениями статьи 437 Гражданского кодекса РФ. Точные условия по конкретному проекту фиксируются в договоре или счёте после обсуждения задачи. Показатели в блоках результатов — обезличенные данные по завершённым проектам под NDA, конкретный результат зависит от исходных данных и задач бизнеса.