Главная › Новости

Чек-лист приёмки дизайна карточки перед публикацией

Опубликовано: 21.06.2026

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

Ниже — структурированный чек-лист, который помогает не упустить критичные моменты на этапе приёмки.

Соответствие техническим требованиям площадки

Каждая платформа диктует свои ограничения. То, что проходит на одном маркетплейсе, может быть отклонено на соседнем. На этом этапе проверяются не художественные качества, а формальные соответствия.

• Размеры и пропорции. Основное изображение чаще всего требует формата 1:1, дополнительные слайды могут быть вертикальными (2:3 или 3:4). Нарушение пропорций приведёт к обрезке или появлению белых полей.
• Объём файла. Площадки ограничивают вес: от 1 до 10 МБ на слайд. Файл тяжелее — система просто не примет загрузку.
• Формат. чаще всего используется JPEG, но некоторые платформы допускают PNG для инфографики. TIFF и PSD не принимаются нигде.
• Безопасная зона. Края изображения могут перекрываться интерфейсом: иконками корзины, индикаторами скидки, рейтингом. Критический контент — текст, ключевые элементы продукта — должен находиться с отступом не менее 5–10% от каждого края.

Типичная ошибка — сверять макет только по размеру пикселей, игнорируя безопасные зоны. Визуально всё помещается, но после наложения UI площадки половина заголовка оказывается под иконкой «в корзину».

Читаемость текстовых элементов

Текст на карточке выполняет иную функцию, чем текст в статье. Его не читают — его сканируют. Покупатель тратит на карточку 2–4 секунды, и за это время должен понять, что перед ним и чем оно полезно.

Кегль и контраст

Минимальный размер шрифта на основном слайде — 14 px при разрешении 900×900. Для инфографики на дополнительных слайдах допустимо 12 px, но только для пояснений к мелким деталям. Основные тезисы, характеристики, цена — крупнее.

Контраст проверяется не «на глаз», а по стандарту WCAG. Светло-серый текст на белом фоне может казаться приемлемым на калиброванном мониторе дизайнера, но на экране смартфона под солнцем сольётся полностью.

Объём и иерархия

• На главном слайде — название и одна ключевая выгода. Максимум две строки текста.
• На инфографике — не более 5–7 блоков информации. Каждый блок — заголовок + одно предложение пояснения.
• Цена, если она вынесена на дизайн, должна быть самым крупным текстовым элементом после названия.

Если текст не помещается и приходится уменьшать кегль ниже 12 px — значит, нужно сокращать содержание, а не жать верстку.

Качество визуальных компонентов

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

Отдельный момент — ретушь. Удаление мелких дефектов допустимо. Удаление существенных элементов конструкции (швы, крепления, кнопки) создаёт ожидание, которое не совпадёт с реальным товаром. Это прямой путь к возвратам и негативным отзывам.

Соответствие содержимого заявленным характеристикам

Дизайн не существует в вакууме — он транслирует конкретные свойства товара. На этапе приёмки сверяется не только визуал, но и смысл.

1. Состав комплекта. Если на инфографике изображено шесть предметов, а в характеристиках указано четыре — возникает противоречие. Покупатель поверит картинке.
2. Размеры и масштаб. Линейки с габаритами должны соответствовать реальным. Частая проблема — линейка нарисована «на глаз», и товар на фото выглядит крупнее или меньше фактического.
3. Цвет товара. Если в названии указан «тёмно-синий», а на фото — визуально чёрный или графитовый, это вызовет вопросы. Не всегда виноват монитор — иногда виноват сам исходник.
4. Сертификаты и знаки. Если указан ГОСТ, ЕАС или другой знак соответствия — он должен быть воспроизведён корректно, с правильными пропорциями и текстом внутри.

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

Около 70–80% просмотров карточек приходится на мобильные устройства. Макет, сверстанный на 27-дюймовом мониторе, нужно проверить в условиях, приближенных к реальности.

Практический способ: открыть файл на телефоне, отмасштабировать до размеров экрана и посмотреть 3–4 секунды — ровно столько, сколько даёт себе покупатель. Что считывается? Что сливается? Что выглядит как пятно?

Частые проблемы, выявляемые только на мобильной проверке:

• Текст, который читается на десктопе, превращается в неразличимую строку пикселей.
• Мелкие детали инфографики (тонкие линии, маленькие иконки) пропадают.
• Общая композиция кажется пустой, потому что элементы, уравновешивающие её по краям, обрезались экраном.

Финальный контроль перед загрузкой

Последний этап — формальная свёрка файла. Здесь не нужно дизайнерское чутьё, только внимательность.

• Файл назван по правилам площадки (если они есть) или хотя бы понятным кодом: артикул-номер-слайда.
• Цветовой профиль — sRGB. Adobe RGB или P3 дадут непредсказуемый сдвиг цветов после конвертации платформой.
• Нет скрытых слоёв, путевых точек, масок, которые могут отобразиться некорректно при растрировании.
• Экспорт проведён без дополнительных артефактов сжатия: муара на текстуре, ступенчатых градиентов, шумных теней.

Проверка по такому чек-листу занимает 10–15 минут на одну карточку. Это немного по сравнению с последствиями пропущенной ошибки: отклонённая модерацией загрузка, потерянные продажи из-за нечитаемого преимущества, возвраты из-за завышенных ожиданий. Системная приёмка превращает дизайн из «похожего на правильный» в действительно рабочий.