Дизайн карточек товаров для маркетплейсов: 12 примеров оформления

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

Обычно на одном слайде карточки товара размещают 3-5 пунктов списка. Именно такое число элементов я использую и на слайдах в примерах этой заметке.

Все слайды сделаны в редакторе Figma (Фигма). Мне очень нравится эта программа, в ней есть всё необходимое для создания дизайна (в том числе карточек товаров), который соответствует современным трендам.

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

Также, я применила к слайдам разные цветовые схемы. Это поможет получить представление о том, как такие слайды будут смотреться в разных цветовых решениях. Для удобства я добавила коды цветов, чтобы их легко можно было скопировать.

Общее о примерах оформления слайдов

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

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

Пример 1

В первом примере слайд из 4-х основных областей, в которые можно поместить, например: 

• изображения товара,
• варианты расцветок,
• шаги применения по порядку,
• фотографии мест, где может понадобиться товар (дома, на даче, в путешествии и т.п.).

Числа от 1 до 4 показывают последовательность перемещения внимания. Так мы можем за доли секунды передать логику информации на слайде: что смотреть вначале, что вторым и так далее.

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

Изображение товара, как на 1-м слайде (обложке карточки), в данном случае отсутствует. Следовательно логично максимальный акцент сделать на заголовке. Например, таком:

• область применения,
• где применяется,
• с чем носят,
• варианты расцветок.

Коды цветов, которые использованы на слайде:

5B5B5B - плашка для заголовка,

C9C19F - прямоугольники,

7D7C7A - кружки,

EDF7B5 - фон.

Пример 2

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

В правой части слайда есть пространство для небольшого количества текста. Это могут быть как списки из 1-2 слов в каждом пункте, так и короткие предложения.

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

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

Коды цветов: FEFEA4, FFDC76, 773838, 4A2C2C.

Пример 3

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

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

Как показано на примере, можно добавить и нумерацию. Это понадобится в тех случаях, когда речь идет о последовательности шагов, когда элемент под пунктом 2 является продолжением элемента под пунктом 1 и так далее.

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

Коды цветов: E5E3DA, BDBBB4, 81BD4A, 323642.

Пример 4

Большие прямоугольники слайда подойдут для короткого и в то же время емкого описания товара. На верхней строке привлекающий внимание крупный заголовок и далее расположен основной текст.

Не все слайды карточек товара требуют написания общего заголовка, точнее это не всегда обязательно делать. И как раз на этом примере показан такой вариант дизайна.

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

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

Коды цветов: F6F7CD, DDDEA2, 9DB33E, 264E2C.

Пример 5

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

Даже если поменять оттенок, то желательно, чтобы он был нежным, пастельным. Хотя, конечно, это зависит от товара, его характеристик - хорошо могут смотреться и более темные, плотные цвета, смотря как их подать.

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

Коды цветов: FEE9EE, F9A1C5, FB779F, 1D5462.

Пример 6

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

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

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

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

Коды цветов: FDEAC8, DD2255, CB0037, 44000A.

Пример 7

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

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

Коды цветов: C6DDE3, C8BDAA, 676664.

Пример 8

Здесь идет сочетание прямоугольных и квадратных форм. Это простой, привычный и почти универсальный пример подачи информации, в том числе списков.

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

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

Коды цветов: F2E8FF, F9B8C3, ADAABF, 4E454B.

Коды цветов: F2E8FF, E8373A, ADAABF, 4E454B.  

Коды цветов: F2E8FF, C453DB, ADAABF, 4E454B.    

Пример 9

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

Внизу находится область с 3-мя иконками и коротким текстом к ним. Данную группу можно разместить в любой из 4-х частей слайда, где сейчас находятся прямоугольники.

А если сделать серию из таких слайдов, то можно получить эффект передвижения прямоугольников. Для этого надо будет от слайда к слайду перемещать область с иконками последовательно по часовой или против часовой стрелки.

Коды цветов: F5E6E8, D789AE, 191D32.

Пример 10

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

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

Коды цветов: F8F1E5, EA8F79, A47E60.

Пример 11

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

• игрушки,
• детская одежда,
• товары для творчества.

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

Коды цветов: F5FFC6, C1FF9B, AB87FF, 674EA0.

Пример 12

Благодаря простым прямоугольным формам этот пример можно отнести к универсальному шаблону, который подойдет для оформления карточек большинства видов товаров.

Заголовок и подзаголовок расположены на правой стороне слайда, а яркие элементы плашек на левой, что уравновешивает композицию и она выглядит устойчиво и гармонично.

Коды цветов: F8F1EB, E9D4C7, BE8476, 3E3D26.

Основные выводы

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

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

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

А на этом сегодня всё. Интересен ли вам такой формат, нужны ли ещё примеры оформления карточек товаров для маркетплейсов?