Проектирование страницы товара (PDP)

Продуктовая логика

Проектирую сценарии выбора вариаций, состояния наличия и цены. PDP — не картинка, а интерфейс принятия решения.

Конверсия PDP

Приоритеты above-the-fold, заметный CTA, доверие, апселлы. Меньше отказов — больше добавлений в корзину.

Mobile-first

60–80% покупок — со смартфона. Галерея-свайп, крупная кнопка, sticky-CTA внизу экрана, читаемые характеристики.

Handoff в разработку

Спецификация: состояния, поведение при взаимодействии, правила адаптива, интеграция с CMS. Не пропадаю после макетов.

02 / Value

Что вы получаете
в цифрах.

PDP — последний шаг перед корзиной. Здесь пользователь решает: «подходит или нет». Если ответ неочевиден — уходит. Вот что меняется, когда страница товара спроектирована как продукт.

+0%

Конверсия в корзину

Когда ключевая информация видна сразу, а CTA не теряется — покупатель быстрее нажимает «В корзину».

−0%

Отказов на PDP

Понятная логика выбора, честные состояния наличия и доверие снижают уход со страницы товара.

+0%

Средний чек

Кросс-селлы и апселлы, встроенные в логику PDP, увеличивают корзину без давления на пользователя.

1–2

Недели на дизайн

Прототип с логикой — 2–3 дня. Полный UI-дизайн PDP с мобильной версией и состояниями — 1–2 недели.

Показатели — обезличенные данные по завершённым проектам под NDA. Конкретный результат зависит от исходных данных и задач бизнеса.

03 / Deliverables

Что входит
в решение.

Полный цикл проектирования страницы товара — от анализа сценариев до макетов, готовых к разработке.

01

Анализ товара и сценариев

Что покупатель хочет узнать в первую очередь, какие вопросы у него остаются без ответа. Смотрю на товар глазами пользователя, а не каталога.

02

Логика PDP и состояния

Как работает выбор вариаций, что происходит при отсутствии товара, как меняются фото и цена при переключении. Состояния проектируются заранее.

03

Прототип с логикой

Кликабельный прототип: сценарии выбора, добавление в корзину, переход к оформлению. Спорные места решаются до дизайна, а не после.

04

UI-дизайн PDP

Галерея с зумом, блок цены и наличия, селекторы вариаций, характеристики, отзывы, доставка, кросс-селлы, trust-сигналы.

05

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

Mobile-first: свайп-галерея, sticky-CTA, компактные характеристики, карусель отзывов. Отдельно проектирую поведение на маленьком экране.

06

Handoff разработчикам

Спецификация: состояния, поведение, адаптивные правила, интеграция с CMS и аналитикой. Готов созвониться с командой.

04 / PDP logic

Логика PDP
до дизайна.

Страница товара кажется простой — пока не начинаешь решать, что показать above-the-fold, как ведёт себя выбор вариаций и что делать, если товара нет в наличии. Эти вопросы — на прототипе, не на финальных макетах.

Что даёт проработка логики PDP

Понятно, что показать сразу. Галерея, цена, наличие и CTA — выше сгиба. Второстепенное — ниже, без конкуренции с ключевым.
Продуманы состояния. Нет в наличии, под заказ, распродажа, ограниченная партия — у каждого состояния свой сценарий, а не «ничего не найдено».
Меньше правок в дизайне. Спорные места — порядок блоков, поведение селекторов — обсуждаем на прототипе, а не на финальных экранах.
Ясно, что передавать в разработку. Разработчик получает не «набор макетов», а спецификацию: состояния, поведение при взаимодействии, интеграцию с CMS.

Пример из практики: интернет-магазин одежды. Пользователи не могли выбрать размер: селектор показывал только доступные значения, а при отсутствии нужного размера страница просто «замирала». На прототипе перепроектировали логику: недоступные размеры остаются видимыми, но зачёркнутыми, а под ними — предложение подписаться на поступление. Конверсия в корзину выросла, обращения в поддержку сократились.

Прототип 2–3 дня

Инструмент Figma Prototype

Покрытие PDP · Состояния · Мобильный

05 / How I work

От анализа
до передачи.

Прозрачный процесс проектирования PDP с понятными этапами и 2 кругами правок на каждом шаге.

01

Анализ

Товар, сценарии покупки, данные аналитики. Понимаю, что ищет покупатель и где сейчас теряется.

02

Прототип

Логика выбора вариаций, состояния, порядок блоков, поведение CTA. Согласовываем до дизайна.

03

UI и адаптив

Дизайн PDP, галерея, состояния, мобильная версия со sticky-CTA. Компоненты и состояния в UI Kit.

04

Передача и поддержка

Спецификация, состояния, интеграция с CMS и аналитикой. Созвоны с разработкой. Не пропадаю после сдачи.

06 / Cases

Результаты
в цифрах.

Обезличенные кейсы по проектированию PDP. Названия компаний под NDA, логика задачи и результат — реальные.

Магазин одежды NDA

+0 %

конверсия в корзину

Задача: покупатели не могли выбрать размер — селектор скрывал недоступные значения, страница «замирала». Решение: перепроектировали логику выбора вариаций: недоступные размеры видны, есть подписка на поступление. Результат: конверсия в корзину выросла на четверть, обращения в поддержку сократились.

PDP Вариативность Состояния

B2B-поставщик NDA

×0

быстрее оформление заказа

Задача: снабженцы работали с большими партиями, а PDP не поддерживала массовый сценарий. Решение: добавили поиск по артикулу прямо на PDP, быстрый выбор количества и массовое добавление. Результат: оформление партии ускорилось почти вдвое.

B2B-PDP Массовый заказ Артикул

Магазин электроники NDA

−0 %

отказов на мобильной PDP

Задача: на смартфоне карточка была неудобной — фото мелкие, кнопка «В корзину» далеко. Решение: переделали мобильную версию: свайп-галерея, sticky-CTA, характеристики списком. Результат: отказы на мобильной PDP снизились почти на треть.

Mobile-first Sticky-CTA Свайп-галерея

07 / Self-service

Что подготовить
для старта.

Минимум, чтобы начать работу над PDP. Если чего-то нет — разберёмся вместе на этапе анализа.

Ссылка на текущую PDP

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

Характеристики и вариации

Список параметров, размеров, комплектаций. Даже выгрузка из CMS или Excel — этого хватит для старта.

Данные аналитики

Тепловые карты, воронка, записи сессий, отзывы. Показывают, где пользователь тормозит и чего ему не хватает.

Примеры, что нравится

2–3 PDP конкурентов, которые считаете сильными. Помогают понять уровень и направление.

Часто бывает

Товар вариативный, но логика выбора не проработана — начнём со сценариев, потом дизайн
PDP неплохо выглядит, но конверсия низкая — разберём по данным, где теряется пользователь
Есть B2B-сценарии — предусмотрим отдельно от обычной розничной PDP

Нет аналитики и структурированных характеристик? Это нормально. Пришлите ссылку на текущую PDP и список товаров — логику и приоритеты соберём вместе. У большинства клиентов понятная структура складывается уже на этапе прототипа.

Обсудить проект

08 / FAQ

Частые вопросы
про PDP.

Стоимость, сроки, отличия от маркетплейсных карточек, вариативность, мобильный UX, handoff и что делать после сдачи.

Что входит в проектирование страницы товара (PDP)?

Анализ товара и сценариев покупки, проектирование логики выбора вариаций, состояний наличия и цены, блока доверия, кросс-селлов, мобильного sticky-CTA. Плюс прототип, UI-дизайн и handoff в разработку.

Чем PDP отличается от карточки на маркетплейсе?

Карточка на маркетплейсе — это визуальный слайд с инфографикой для чужой витрины. PDP — это продуктовый интерфейс вашего магазина с логикой выбора, состояниями, рекомендациями и интеграцией с CMS. Проектирую именно PDP.

Сколько стоит проектирование страницы товара?

Цена зависит от сценариев и сложности товара. Базовый дизайн PDP — от 25 000 ₽, расширенный с вариативностью, состояниями и кросс-селлами — от 50 000 ₽. Точную цену после брифа.

Как долго создаётся дизайн страницы товара?

Прототип с логикой — 2–3 дня. Полный UI-дизайн PDP (десктоп + мобильная версия + состояния) — от 1 до 2 недель.

Какие элементы PDP влияют на конверсию?

Выше сгиба: галерея с зумом, цена, наличие, кнопка «В корзину». Ниже: варианты товара, характеристики, отзывы и рейтинг, доставка и возврат, кросс-селлы, trust-сигналы. На мобильном — sticky-CTA.

Работаете ли вы с вариативным товаром?

Да. Проектирую селекторы размера, цвета, комплектации с состояниями: выбран, недоступен, под заказ. Продумываю, как меняются фото, цена и наличие при переключении.

Как PDP адаптируется под мобильные устройства?

Mobile-first: галерея на всю ширину со свайпом, крупная кнопка «В корзину», sticky-CTA внизу экрана, характеристики — списком, отзывы — каруселью. 60–80% покупок в E-commerce идут со смартфона.

Вы делаете только дизайн или также реализацию?

Проектирую в Figma: прототип, UI, состояния, спецификацию. Реализацию выполняют разработчики — предоставляю handoff с логикой поведения и гайдами. При необходимости верстаю на Tilda или Webflow.

Что такое handoff и что в него входит?

Handoff — это передача макетов в разработку с описанием логики. В него входят: состояния элементов, поведение при взаимодействии, адаптивные правила, спецификация отступов и компонентов, интеграция с CMS и аналитикой.

Анализируете ли вы данные перед проектированием?

Да, если есть доступ: тепловые карты, воронка, записи сессий, поисковая аналитика, отзывы покупателей. По данным видно, где пользователь тормозит и какие вопросы у него остаются без ответа на PDP.

Что нужно подготовить для старта?

Ссылку на текущую страницу товара, характеристики товара (вариации, комплектации), доступ к аналитике (если есть), примеры конкурентов с сильными PDP. Этого достаточно, чтобы начать.

09 / Related

Что заказывают
вместе.

Дизайн, который часто идёт в связке с проектированием PDP. Можно взять как отдельные услуги или комбинировать.

10 / Why me

Почему выбирают
меня.

Не потому что «быстро и недорого» — это есть у всех. А потому что с первого созвона понятно: я думаю про сценарии покупки и данные, а не про «нарисовать красиво».

Standard

Типичный исполнитель

Рисует «красивую карточку» без логики
Не смотрит аналитику и сценарии
Не продумывает состояния и вариации
Сдал макеты — пропал
Ведёт 5+ проектов одновременно

Premium

Продуктовый UX/UI дизайнер

Анализирую товар, сценарии и данные
Проектирую состояния и логику вариаций
Учитываю B2B-сценарии (артикул, партии)
Прототип до дизайна — логика кликается
Веду 2–3 проекта за раз, не больше

11 / Related queries

Другие направления
E-commerce.

Часто ищут в E-commerce — соседние услуги и направления. Переходите, чтобы посмотреть детали и примеры.

дизайн интернет-магазина ui ux дизайн ecommerce дизайн карточки товара дизайн корзины и оформление заказа дизайн каталога товаров фильтрация и поиск в интернет-магазине адаптивный дизайн для ecommerce редизайн интернет-магазина дизайн личного кабинета покупателя no-code ecommerce mvp дизайн маркетплейса презентация для ecommerce

Проектирование страницы товара (PDP) для интернет-магазина

Страница товара — последний шаг перед корзиной. Здесь покупатель окончательно решает: подходит или нет. Если ключевая информация спрятана, CTA теряется, а вариации выбираются нелогично — пользователь уходит, даже если товар ему интересен. Проектирую PDP как продуктовый интерфейс, который снимает вопросы и доводит до покупки.

Работа начинается с анализа: что покупатель хочет узнать в первую очередь, какие сценарии выбора вариаций существуют, где пользователь тормозит по данным аналитики. Затем — прототип: порядок блоков, состояния наличия и цены, логика селекторов, поведение CTA. Только после согласования логики — UI-дизайн с галереей, блоком доверия, кросс-селлами и мобильной версией.

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

Хотите, чтобы страница товара конвертировала лучше? Давайте разберём ваш PDP по данным и сценариям — переходите на страницу контактов.