Дизайн карточки товара: примеры по категориям и правило миниатюры

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

Правило миниатюры: карточку смотрят размером с почтовую марку

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

Что должно читаться в миниатюре:

• сам товар — крупно, без лишнего воздуха по краям;
• одна-две плашки с ключевой выгодой;
• цифры — они цепляют взгляд быстрее слов.

Что не читается никогда: длинные фразы, мелкие иконки, слишком тонкий или мелкий шрифт, водяные знаки. Если выгоду нельзя показать двумя словами и цифрой — ей не место на главном фото, для этого есть остальные слайды и описание.

Одежда: минимум плашек, максимум фактуры

Худи на светлом фоне: плашка «3 цвета» с образцами и состав — больше ничего. Визуализация: нейросеть.

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

Электроника: тёмный фон и решающие цифры

Тёмный фон, крупно — часы работы и версия Bluetooth. Визуализация: нейросеть.

Покупатель техники сравнивает цифры, поэтому две-три решающие характеристики выносятся крупно: время работы, версия протокола, мощность. Тёмный фон с подсветкой — визуальный код «премиума» в категории, на нём техника выглядит дороже. Важно не увлечься: пять и больше выносок превращают карточку в датащит, который в миниатюре сливается в шум.

Косметика: воздух, пастель и одно действующее вещество

Пастельная палитра, много воздуха, акцент на действующем веществе. Визуализация: нейросеть.

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

Детские товары: яркость и цифры для родителя

Жёлтый фон, крупно количество деталей и возраст. Визуализация: нейросеть.

Здесь двойная аудитория: картинка должна нравиться ребёнку (яркие чистые цвета, игровое настроение), а плашки отвечают родителю — количество деталей, материал, возрастная маркировка. Возраст на карточке обязателен: родители фильтруют товары по нему в первую очередь, и карточка без маркировки теряет клики тех, кто не готов открывать описание ради одной цифры.

Таблица выбора: категория → стиль

Это ориентиры, а не догма: если вся выдача категории залита белым фоном, аккуратный цветной может наоборот выделить карточку. Проверяется одним способом — открыть поиск по своему запросу и посмотреть, среди чего карточка будет стоять. Товары для дома — единственная категория из таблицы, где на первое фото чаще ставят не студийную съёмку, а lifestyle-сцену: уют здесь продаёт контекст.

Ошибки, которые убивают клик

• Дизайн ради дизайна. Красивый коллаж, который в миниатюре превращается в пятно. Цена ошибки — показы есть, кликов нет.
• Лозунги вместо фактов. «Хит продаж», «супер качество», «выгодно» не говорят ничего. «40 часов работы» — говорит.
• Копия лидера один в один. Карточка сливается с выдачей и отдаёт клики оригиналу, у которого больше отзывов.
• Чужой код категории. Кислотные плашки на уходовой косметике, каталожная скука на детской игрушке — покупатель не узнаёт «своё» и проходит мимо.
• Мелкий текст. Всё, что не читается с экрана телефона в сетке выдачи, — балласт.

Какая из этих ошибок касается вашей карточки, видно по воронке: бесплатный экспресс-аудит ТоварПилота смотрит её по официальному API Wildberries и показывает, на каком шаге теряются показы, клики и корзины — до того, как вы потратитесь на переделку дизайна.

О том, как оформлять выгоды на слайдах, у нас есть отдельный разбор с примерами «до/после» — инфографика для карточки товара, а про выбор подложки под товар — фон для карточки товара. Если хочется собрать варианты быстро и без дизайнера, посмотрите как нейросети генерируют карточки.

Красивая карточка ≠ найденная карточка

Дизайн отвечает за клик, когда карточку уже показали. А показывает её алгоритм — по заголовку, характеристикам и описанию. Если семантика собрана мимо реальных запросов, лучший в категории первый слайд никто не увидит, потому что карточка не попадёт в выдачу. Поэтому порядок работ такой: сначала текстовая часть под поисковую воронку, потом визуал.

Дизайн вы можете сделать сами или заказать у дизайнера, а текстовую часть ТоварПилот берёт на себя: SEO карточек по реальным поисковым запросам Wildberries, контроль изменений замерами «до/после» и еженедельный отчёт простым языком. Тариф один — 9 990 ₽ в месяц, это 330 ₽ в день; первые 7 дней бесплатно, карта не нужна. Начать проще всего с бесплатного экспресс-аудита: покажем, теряет ли карточка показы из-за текста ещё до того, как вы вложитесь в дизайн.