Дизайн карточек для маркетплейсов: нейросеть и силуэт
Дизайн карточек для маркетплейсов: нейросеть поможет обдумать подачу. Сравни три композиции и сохрани узнаваемый товар, прежде чем добавлять фон и надписи.
Евгений
Дизайнер-партнёр LibraChat
8 мин чтения
«Это фартук или полотенце?» — спросила продавец, посмотрев мой макет. На нём были хлеб, мука на столе и очень приятный серый лён. Фартук тоже был. Просто его оказалось трудно узнать. С тех пор в дизайне карточек для маркетплейсов я сначала добиваюсь ясного силуэта. Нейросеть подключаю к сравнению замыслов, а красивое окружение добавляю, когда уже понятно, что именно мы продаём.
Особенно обидно было за свет. Я долго подбирал тёплую полосу на ткани и оставил край деревянной доски в углу. Получилась хорошая картинка про утро на кухне. Продавцу нужна была карточка фартука. Разница уместилась в один её вопрос.
Дизайн карточек для маркетплейсов: нейросеть и потерявшийся предмет
У фартука был широкий нагрудник, большая петля и карман ниже талии. В натюрморте я подогнул нижний край, часть петли спрятал за доской, а сверху положил кухонное полотенце. Соседство тканей мне нравилось. У вещей почти совпадал цвет. Тем хуже.
Я уменьшил макет с 1080 до 180 пикселей по ширине, в 6 раз. Фактура стала серым пятном. Карман перестал читаться, петля исчезла. Все детали, по которым фартук отличался от сложенного полотенца, я сам убрал из кадра. И собирался ещё поставить поверх надпись.
Первым желанием было усилить контраст. Высветлить фон, сделать тень глубже, добавить тонкий контур. Я попробовал мысленно сохранить всю композицию и только «починить» предмет. Но так я защищал собственный натюрморт. Самое полезное решение требовало его разобрать.
Продавец прислала обычный снимок расправленного фартука на двери. Свет на нём был хуже. Зато сразу были видны крой и завязки. Я сохранил эту фотографию рядом с макетом как напоминание: технически скромный исходник может сообщать о вещи больше, чем тщательно оформленная сцена.
Вместо просьбы сделать карточку эффектнее я выписал критерии выбора:
видно, где заканчивается изделие и начинается фон;
нагрудник и поясные завязки не спрятаны;
окружение не выглядит частью продаваемого комплекта;
место для короткой надписи не приходится отнимать у вещи.
Такой список полезнее расплывчатого «выглядит дорого». По нему можно объяснить, почему один вариант подходит для обложки, а другой стоит оставить для дополнительного кадра.
Расправить, надеть или сложить
Я собрал три направления. Менял подачу, но сохранял один и тот же фартук: серый лён, заметный карман, широкая петля. Если одновременно изменить цвет изделия и его окружение, потом не поймёшь, что именно тебе понравилось.
Первый вариант — расправленный фартук на спокойном фоне. Завязки разложены так, чтобы не превращаться в случайный клубок. Петля видна полностью. Нагрудник не сливается с нижней частью. Это довольно сдержанная подача. Зато вещь можно рассмотреть.
Здесь я следил за расстоянием до краёв кадра. Если растянуть фартук почти на всю высоту, он станет крупнее, но длинные завязки начнут обрезаться. Если оставить слишком много пустоты, вернётся серое пятно. Мне нужен был размер, при котором сохраняется весь крой, а не максимальное заполнение прямоугольника.
Фон я сделал немного светлее ткани. Не белил сам фартук и не добавлял ему чёрную обводку. Иначе можно получить хорошо заметный контур вещи, которая уже не похожа на исходную. В первую очередь меня интересовала граница нагрудника: проходит ли она отдельно от фона, видна ли серая петля над ним. Когда эта часть стала различимой, потребность в яркой плашке сверху исчезла.
Для сравнения я привёл все три черновика к одинаковому размеру. Большой эффектный кадр рядом с маленьким спокойным почти неизбежно притягивал мой взгляд. Это мешало выбирать подачу. На одинаковых превью было легче увидеть, какая информация сохраняется после уменьшения. Вариант со сложенной тканью показывал приятную поверхность, но снова терял ответ на вопрос продавца.
Второй вариант — фартук на человеке, кадр от плеч до бёдер. Становится понятнее, как располагаются нагрудник и карман. Но появляется новая задача: одежда человека не должна перетягивать внимание. Я выбрал бы однотонную рубашку, без рисунка и броских пуговиц.
Лицо для такого кадра мне не нужно. Оно способно собрать внимание быстрее, чем форма фартука. Если человек нужен, чтобы показать посадку, кадр должен сохранять именно эту пользу. А не превращаться в портрет, в котором товар оказался случайно.
Третий вариант — аккуратно сложенный фартук, крупный план ткани и строчки. Тот самый, который я хотел защищать в начале. Его достоинство никуда не делось: он хорошо показывает материал. Просто по нему трудно определить полный крой. Я переставил его на другое место в серии.
Один ракурс не обязан делать всю работу
После сравнения я перестал искать победителя для всех изображений сразу. У расправленного изделия и крупного плана разные возможности. Оба могут пригодиться в одной карточке, если не заставлять их сообщать одно и то же.
Подача · Что различимо · Чем приходится пожертвовать · Когда я её выберу
Расправленный фартук — Полный силуэт и расположение деталей — Ощущение вещи на человеке — Когда покупатель впервые видит товар
Фартук на человеке — Посадка и положение кармана — Часть внимания уйдёт на фигуру и одежду — Когда нужно представить использование
Сложенная ткань крупно — Фактура и строчка — Полный крой почти не читается — Когда товар уже показан целиком
Самым трудным было не сделать первый вариант. Самым трудным было согласиться, что мой любимый кадр подходит для другой роли. Я не выкинул натюрморт. Убрал из него чужое полотенце, освободил петлю и перестал назначать его обложкой.
Здесь легко перепутать две оценки: «мне приятно смотреть» и «я понимаю, что передо мной». У дизайнера первая развивается быстро. Вторую приходится сознательно возвращать в работу. Особенно когда продаёшь знакомую себе вещь и уже не замечаешь, сколько сведений достраиваешь по памяти.
С другим товаром выбор будет другим. У знакомой кружки силуэт может читаться даже в небольшой сцене. У складной подставки положение шарнира способно оказаться важнее общей формы. Поэтому я не делаю из светлого фона универсальное решение. Сначала смотрю, какая деталь позволяет узнать именно этот предмет.
Какой дизайн карточек для маркетплейсов нейросеть поможет обдумать
В LibraChat можно обсудить текстовое описание и приложить фотографию товара. Я начинаю с того, что должно остаться различимым. Не прошу сразу рисовать красивую обложку: сначала хочу получить разные направления, которые смогу сравнить.
Для своего товара попробуй такое задание:
Помоги выбрать композицию главного изображения карточки товара. Продаётся серый льняной фартук с широким нагрудником, большой шейной петлёй и накладным карманом. Сравни три подачи: расправленное изделие, фартук на человеке и сложенный фартук крупным планом. Для каждой опиши расположение предмета и свободное место под короткий заголовок. Объясни, какие детали станут заметнее, а какие могут потеряться. Сохрани цвет и устройство одного и того же изделия. Пока нужны описания композиций, изображение не создавай.
Сравнить дизайн карточек для маркетплейсов нейросеть поможет, если объяснить, что для тебя важнее в каждом варианте. Я ищу различия между подачами. Если всё свелось к одному центральному предмету с другим фоном, задание ещё стоит уточнить. Например, попросить отдельно обдумать узнаваемость силуэта и показ фактуры. Это две разные причины выбрать ракурс.
Потом можно явно попросить LibraChat создать изображение или изменить присланное фото. Возможности работы с картинками и доступное качество зависят от тарифа; перед этой частью я сверяю их на странице тарифов. Но внешний вид конкретной вещи всё равно сравниваю с исходником. Убедительная складка не доказывает, что сохранились крой и длина завязок.
У меня работа теперь идёт в таком порядке:
Выбираю снимок, на котором товар узнаётся целиком.
Описываю несколько способов его показать, сохраняя исходные детали.
Сравниваю каждый вариант в небольшом размере.
Назначаю главным тот, который лучше объясняет вид вещи.
Разношу фактуру и использование по дополнительным кадрам.
Перед размещением остаётся проверить требования своей площадки к изображениям. А подпись и описание стоит согласовать с тем, что действительно видно в кадре. Тут пригодится материал о том, как написать карточку товара: текст не должен обещать другую комплектацию, чем показывает фотография.
На исправленной обложке моего фартука первым делом была видна петля. Потом нагрудник. Потом карман. Хлеб я убрал совсем, хотя свет на нём получался особенно хороший. Иногда после хорошей правки в кадре меньше того, чем дизайнер хотел похвастаться, и больше самой вещи. Для карточки товара меня это устраивает.
