Как сделать дизайн карточки товара (инфографику) для маркетплейсов вб и озон в фигме

Размеры фреймов для дизайна карточек товара на маркетплейсах вайлдберриз и озон

Инфографика для вайлдберриз (вб) имеет стандартный размер с шириной 900 и высотой 1200 пикселей. Стоит отметить, что это довольно крупный размер, колторый делается с запасом. Но сами карточки могут показываться в уменьшенном масштабе. Поэтому дизайн важно проверять на размере мобильного телефона: все шрифты и важные элементы должны быть хорошо различимы в этом масштабе.

На озоне для товаров в категориях одежда, обувь и аксессуары размер будет таким же, как и на вб — 900х1200px. Но во всех других категориях требуется формат квадрата. Формально подходят даже карточки с размером 200 на 200 пикс, но лучше конечно делать их в более высоком разрешении, например 1080 на 1080. Как и в случае с вайлдберриз, нужно будет проверить читаемость шрифтов на масштабе мобильного телефона.

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

Инфографика и дизайн карточек товаров для маркетплейсов — это одно и то же, или нет?

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

Что касается дизайна карточек товаров для маркетплейсов, формально они далеко не всегда являются инфографикой. Иногда на них нет ничего, кроме фотографий товара, иногда присутствует только самая минимальная информация, которая при этом никак не оформлена графически, а просто написана текстом.

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

Особенности дизайна инфографики для маркетплейсов вб и озон

Как и любой другой дизайн, инфографика для маркетплейсов подчиняется основным принципам дизайна. И всё же некоторые особенности существуют.

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

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

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

Как делать карточки товаров — пошаговая инструкция для обучения

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

Домашнее задание по дизайну карточек товаров

Вы можете самостоятельно выбрать уровень сложности задания в соответствии со своим опытом и имеющимися на данный момент навыками. Новичкам рекомендуется начинать с легкого или среднего уровня. Студенты с опытом дизайна в фигме могут сразу переходить к высокому уровню.

Легкий уровень сложности: пошагово повторить пример карточки товара из видеоурока.

Средний уровень сложности: нарисовать в фигме одну или несколько карточек такого плана:

По желанию можно внести в дизайн этих карточек свои изменения.

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

Дополнительное задание (по желанию): сделать дизайн нескольких слайдов с разной информацией об одном и том же товаре.