Как сделать продающую карточку товара для интернет-магазина
Сразу предупреждаем — это статья не о том, что на карточке товара нужно использовать красную кнопку ”добавить в корзину”, которая поднимет конверсию на 20% и не о том, что размер фотографии товара должен быть 500 на 500 пикселей и это поднимет конверсию ещё на 10%, а размер заголовка должен быть набран 10 кеглем, именно тогда ваши товары будут продаваться. В ней нет простых рецептов и секретов. В ней есть правда. А правда в том, что недостаточно прочитать статью про кнопки и цвета, чтобы создать продающую страницу с товаром. Чтобы создать действительно продающую страницу нужно приложить немало усилий и в меньшей степени эти усилия связаны с выбором цветов, шрифтов и кнопок.
Необходимо понять, что главное на странице карточки товара — это контент. И пусть на ней все элементы расположены по феншую, а цвета психологически способствуют покупке (о чем говорят многочисленные исследования), она не будет продавать, если на ней нет контента: фотографий товара, описания, условий доставки и т.д. Поэтому в статье речь пойдет о том, какой контент должен быть на карточке товара.
Фотографии товаров
Сейчас уже трудно представить интернет-магазин без фотографий товаров, но тем менее такие магазины встречаются, особенно их много в регионах. Вот несколько примеров:
Изображений нет как в каталоге.
Так и на карточке товара. Если гвозди или шурупы ещё можно купить не увидев, как они выглядят, то со светильником вряд ли такое возможно.
Фотография товара — это обязательный элемент на карточке товара, пока её нет, даже не думайте о другом контенте. Это основа.
Если магазин небольшой, то вы самостоятельно можете сделать фотографии. Всегда есть вариант взять изображения из каталогов или с сайта производителя, но это крайние варианты. Лучше всего будет создать контент самостоятельно.
Загрузили пару изображений товара? Хорошо. Вот несколько рекомендаций по фотографиям товаров интернет-магазинов:
- Показывайте фотографии с разных ракурсов. Для большинства товаров недостаточно одной фотографии. Сделайте фото с разных сторон, или, например, в 3D-режиме.
- Показывайте товар в использовании. Если это одежда, то сделайте фотографии на человеке. Если вы продаете кухонную посуду, то сделайте пару фотографий в красиво украшенном кухонном интерьере. Для продавцов украшений, часов, бижутерии важно показать товары на человеке, чтобы пользователь видел какого размера часы относительно руки или насколько большие серьги. Мало кто смотрит на описание размера товара в характеристиках и мало кто будет подставлять линейку к своей руке, чтобы понять размер часов. В итоге клиент либо закажет и останется недоволен товаром и вернет его, либо уйдет с сайта.
- Снимайте видео о товаре. Если вы думаете, что снимать видео о товаре слишком дорого, то подумайте вот о чем: во сколько вам обойдется съемка одного видеобзора товара? Насколько это повысит ценность вашего интернет-магазина в глазах клиента и конверсию на вашем сайте? Да, вы можете не снимать видео о товаре, а потратить эти деньги на рекламный бюджет, чтобы привлекать всё больше и больше трафика, но на самом деле нужно работать с контентом и товаром, чтобы повысить его ценность. Вот несколько примеров интернет-магазинов, которые используют видео на карточке товаров. Интернет-магазин 6pm.com снимает видеообзоры о товарах. Это можно сравнить с личной продажей, так как с одной стороны товар показывается в видео, а с другой есть человек, который рассказывает о товаре и его преимуществах фактически продает товар.
Интернет-магазин 6pm.com создает видеообзоры товаров не от большой любви к съемкам и массе свободного времени и денег.
Они прекрасно понимают, что такие обзоры повышают конверсию сайта, уменьшают количество возвратов товаров (особенно это касается одежды, на фотографиях она может смотреться совсем по-другому, нежели, чем на вас).
Вот ещё один пример использования видео на товарных карточках в интернет-магазине asos.com:
При обработке фотографий товаров всегда несколько изменяется цвет, поэтому на видео можно увидеть ещё и реальный цвет товара.
Описание товара
Все выбирают товары по-разному. Для кого-то важны и понятны технические характеристики, кому-то важно то, как выглядит товар, для третьего важна цена. Ваша задача — ответить на вопросы всех посетителей сайта.
Возьмем 2 примера описания однотипного товара, например, мужской кошелек.
В интернет-магазине www.bagandwallet.ru помимо фото и видео о товаре есть хорошее, понятное описание.
Сколько карточек помещается в кошелек? 6-12. Сколько отделений? 2. Какие купюры помещаются? Любые. В описании товара только действительно важная и нужная информация для принятия решения о покупке, никакой ”воды”.
Возьмем другой пример товарной карточки кошелька и его описание:
Замечательный кошелек с застежкой на кнопке с логотипом бренда. Есть отделения для монет, кредитных карт и купюр. Прекрасно. Сколько карт помещается? Какие купюры?
Ниже на странице конечно же есть информация о том, какого размера кошелек, но чтобы понять какие купюры в него поместятся, клиенту нужно измерить купюры. Согласитесь, это не очень удобно.
Размещайте в описании товара только важную и полезную информацию, избегайте качественных прилагательных ”замечательный”, ”прекрасный”, ”бесподобный”, ”отличный”. Указывайте в описании товара только понятные характеристики, а не абстрактные.
Характеристики товара
Как мы уже писали выше пользователи выбирают товар по-разному, поэтому важно предоставлять все характеристики товара на карточке.
У интернет-магазинов бытовой техники обычно с этим проблем нет.
Но встречаются и такие товарные карточки:
Если нет описания товара, то лучше не размещать товар на сайте вовсе, а потратить немного времени на создание минимально необходимого контента для карточки товара.
Отзывы о товаре
О том, что к отзывам других людей прислушиваются и что они влияют на конверсию сказано уже не мало. Мы лишь напомним о том, что это обязательный элемент карточки товара. Но во многих интернет-магазинах отзывы, если они вообще предусмотрены, выглядят так: 
Поэтому мы дадим несколько советов о том, как можно спрашивать отзывы у покупателей:
- После покупки товара связывайтесь с клиентом, с просьбой о том, чтобы он оставил отзыв о конкретном товаре и магазине в целом;
- Не удаляйте негативные отзывы о товаре. Если в ваш интернет-магазин поступают негативные отзывы о товарах, то это не повод удалять такие отзывы — это повод задуматься о качестве товаров, которые вы продаете и пересмотреть продуктовую линейку;
- Благодарите своих клиентов за отзывы — это может быть простое ”спасибо”, а может быть и подарок. Решать вам;
- Если у вас небольшой магазин, то вы можете общаться с клиентом лично, чтобы получить отзыв. Это отличная практика и для того, чтобы понять какие стороны вашего обслуживания нуждаются в доработках.
Отзывы могут быть смешными и запоминающимися
Вот отзыв из интернет-магазина amazon.com о телевизоре за 199.999.99$ 
«I was able to purchase this amazing television with an FHA loan (30 year fixed-rate w/ 4.25% APR) and only 3.5% down. This is, hands down, the best decision I’ve ever made. And the box it came in is incredibly roomy too, which is a huge bonus, because I live in it now.»
”Мне удалось купить этот телевизор благодаря 30-летнему кредиту под 4.25% годовых с первым взносом в 3,5%. Это, безусловно лучшее решение в моей жизни. А ещё вместе с этим телевизором идет большая коробка, в которой я теперь и буду жить”.
А вот ещё один отзыв на дорогой телевизор.
«Purchased this TV for my island retreat. Use it to primarily watch comedies like „The Shrinking Middle Class“, „Income Inequality“ and „The Ever Widening Wage Gap.Have to say, wow what a picture! Watching the 99% struggle with this level of clarity is amazing.“
”Купил этот телек на свой остров. В основном смотрю комедии типа „исчезающий средний класс“, „неравенство доходов“ и т.п. Надо сказать картинка — просто восторг. Смотреть как 99% населения пытаются выжить в UHD-качестве — непередаваемо!»
И последний отзыв из Амазона на шубу за $5,999.95
“I wore this and got shot in the ass by some passing British Earl. To be fair it wasn’t his fault — I did look like a Black Fox. A super fly, gorgeous fox albeit.
The doctors say I’ll never walk again. but then, when you look this good (see photo of guy), who cares.”
”Получил заряд дроби пониже спины от проходящего мима британского эрла. Винить его не приходится, я и правда выглядел черным лисом. Доктора говорят, что я никогда не встану на ноги, но когда у тебя такая шикарная шуба — это не имеет значения.”
Гарантии, доставка, возврат, оплата
Карточка товара — это по сути целевая страница для пользователя, который пришел за покупкой конкретного товара. Именно поэтому она должна давать всю необходимую информацию для принятия решения о покупке.
К такой информации относятся:
- условия и стоимость доставки товара;
- гарантия на товар;
- условия возврата товара;
- варианты оплаты.
Информация о гарантиях, доставке, возврате денег расположена под шапкой сайта, в виде иконок со ссылками на страницы с подробной информацией. Кроме того, ниже на карточке есть вкладки ”доставка”, ”оплата”, ”гарантия”. Те посетители, которым не нужна подробная информация об условиях доставки положат товар в корзину и перейдут к оформлению заказа. А те пользователи, которые досконально изучают все условия интернет-магазина перед покупкой сначала посетят страницы с этой информацией, а потом вернутся на товарную карточку, если все условия покупки окажутся для них приемлемыми.
Товарные рекомендации и товары для upsell
Ещё один важный элемент на карточке товара — это товарные рекомендации. Позаботитесь о том, чтобы пользователь не думал о том, какие дополнительные аксессуары нужны к купленному товару.
- пленка;
- чехол;
- дополнительный аккумулятор.
Аудитория, которая приходит на карточку товара вашего интернет-магазина из поиска или по рекламе, может приходить за покупкой определенного товара, а может находиться на этапе выбора между несколькими товарами, поэтому на товарной карточке необходимо предоставить товары-заменители или товары для up-sell.
Вот пример реализации блока рекомендуемых товаров в интернет-магазине ASOS:
Для тех посетителей, которые не уверены в правильности выбора текущего товара есть альтернатива — посмотреть похожие товары справа.
Сухой остаток
Итого, для продающей товарной карточки на ней должен быть следующий контент.
- качественное описание товара, без ”воды”, с описанием полезных свойств товара;
- фотографии товара хорошего качества с нескольких ракурсов;
- видеобзоры товары. Не обязательно, но может значительно повысить конверсию и снизить издержки на возврат товара;
- технические характеристики товара;
- отзывы;
- информация о доставке, оплате, гарантиях;
- ссылки на похожие и рекомендуемые товары;
- ссылки на товары, которые дополняют товар.
Несколько дополнительных фишек на карточке товара
Существуют ещё несколько дополнительных фишек для страницы товарной карточки.
Итак, очень часто бывает так, что товар распродан, а товарная карточка остается в поисковой выдаче. В итоге посетитель заходит на страницу, а товара нет в наличии. На таких страницах можно сделать кнопку ”Сообщить о поступлении в продажу”. Вот пример реализации такой фишки в интернет-магазине Mango: 
Такой сервис подходит только для магазинов, у которых есть возвраты товаров и поступления новых товаров, которые ранее не были в наличии.
Сообщить о снижении цены
Ещё один сервис, который можно реализовать на карточке товара — это информирование пользователя о снижении стоимости товара. Не все посетители, приходящие на ваш сайт готовы покупать товар по полной стоимости. Особенно это касается продажи одежды, поскольку большинство ритейлеров устраивают сезонные распродажи и посетители об этом знают. Поэтому, чтобы не терять контакт с посетителем, вы можете уведомить его о снижении стоимости на товар, которым он интересовался.
Вот пример реализации такого сервиса:
Добавить в избранное
Довольно распространенный сервис, но мы всё равно скажем о нем несколько слов. Покупка товара может быть импульсивной, а может обдумываться несколько дней или даже несколько недель. Поэтому важно предоставить возможность сохранить товар, который понравился пользователю.
В списке сохраненных товаров можно использовать ещё 2 фишки:
- показывать уведомления о том, что выбранных товаров осталось мало в наличии;
- показывать скидки на сохраненный товар.
Это удобно как для пользователя, можно увидеть на какие товары снизилась цена и купить их. А для интернет-магазина — это дополнительный инструмент убеждения в покупке.
Сравнение товаров
Чем сложнее товар по техническим характеристикам, тем сложнее его выбрать. Особенно в условиях, когда есть много схожих товаров с небольшим отличием в цене. В этом случае необходимо реализовывать функцию сравнения товаров. Посмотрите как это реализовано в интернет-магазине mvideo.ru 
Все отличия характеристик товаров подсвечиваются, что значительно облегчает выбор конкретного товара пользователем.
Важно помнить, что такая функция нужна для интернет-магазинов с большим товарным ассортиментом, для небольших интернет-магазинов она не принесет пользы.
А какой контент важнее всего для вас и какой вы видите идеальную карточку товара?
Создаем визитку в Adobe Photoshop по шагам
5.0 Оценок: 2 (Ваша: )
Узнайте в статье, как сделать визитку в Фотошопе, а также о быстром и удобном альтернативном способе самостоятельно создать стильную карточку:
Photoshop – главный инструмент всех профессиональных фотографов и дизайнеров. Эта программа включает в себя максимально широкий функционал для работы с любой растровой графикой. Его используют для ретуши фотографий, создания иллюстраций, дизайна сайтов и полиграфии.
Чтобы создать визитку в фотошопе можно обратиться к профессиональному графическому дизайнеру или создать ее самостоятельно. Первый вариант значительно дороже, для второго потребуется скачать Photoshop, что тоже не бесплатно: надо будет оформить платную подписку по истечении пробного периода. Но будьте готовы к тому, что этот софт рассчитан на профи: вряд ли удастся разобраться в его функционале без учебников и туториалов, поэтому процесс разработки дизайна визитки может затянуться на долгое время.
Если вы сомневаетесь в своих силах или вам необходим срочный результат, то воспользуйтесь специальной программой для создания визиток Мастер Визиток. В нем вы можете воспользоваться базой готовых шаблонов или изготовить свой дизайн с нуля. Программа на русском языке и вы потратите не более 5 минут.
Делаем визитку в Фотошопе
Как сделать визитку в фотошопе? Обычно процесс создания любого макета в фотошопе разделяют на 2 части: подготовка страницы и сам дизайн, расстановка его элементов. Предлагаем пошаговую инструкцию этого процесса:
Шаг 1. Устанавливаем программу
Установите фотошоп на компьютер. Безопаснее и удобнее скачивать лицензионную версию CC с сайта разработчика (если у вас уже есть прежние версии, например, CS6, то они тоже подойдут для визитки). Не спешите использовать только что установленный софт, он будет доступен только после регистрации или авторизации в Adobe Creative Cloud. Напоминаем, что программа имеет 7-дневный пробный период, по его окончании программа будет работать только при условии подписки на выбранные пакеты. Стоимость начинается от 589,80 рублей для частных лиц и варьируется в зависимости от содержания выбранного пакета и ваших целей.
Шаг 2. Задаем параметры страницы
Создадим новый документ. Нажмите на верхней панели Файл, а затем Создать. Появится окно параметров новой страницы, которые нам предстоит задать.
Существует общепринятый размер визитных карточек 9х5 см. Они помещаются в кошельки и бумажники, их легко хранить. Поэтому введем эти значения для Ширины и Высоты в открывшемся окне. Выбираем прозрачное содержимое фона. Разрешение должно составлять 300 пикселей на дюйм. Остальные пункты оставляем неизменными.
Шаг 3. Настраиваем поля карточки
Из-за технических особенностей процесса печати нам нужно установить поля под обрез. Это делается для типографий, чтобы не получить незаполненных цветом полос по краю карточки, если нож попадет не ровно в начертанную границу.
Сделаем отступы по 2,5 мм: нажмите Просмотр на верхней панели инструментов и включите Линейки. Они отобразятся на рабочей области. Нажмите на линейку левой кнопкой мыши и удерживая ее протяните вниз, за курсором потянется направляющая. Таким же образом протяните их для всех сторон.
Шаг 4. Наполняем карточку графическими элементами
Рекомендуется не переполнять визитку информацией. Эффективнее всего будет минималистичный дизайн с самой основной информацией. При желании увеличить место для текста можно оформить двухстороннюю карточку. В любом случае, стоит добавить изображение, которое точно опишет вашу профессиональную деятельность и при первом же взгляде даст понять человеку, какие услуги вы ему предлагаете. Так для ремонта домов может быть изображен домик, для электрика лампочка, а для репетитора книга. Для примера мы возьмем цветочный магазин.
Заранее подберите изображение и сохраните его на компьютере. Чтобы загрузить его в наш проект, нажмите Файл и Открыть. Выберете нужную картинку и нажмите ОК. Она появится на странице. Вы можете увеличить или уменьшить его, повернуть или обрезать инструментами в левой панели.
Не забывайте, что каждое действие лучше совершать на новом слое, чтобы все элементы можно было редактировать по отдельности и не начинать работу с нуля из-за небольшого недочета.
Для заливки фона кликните соответствующий значок на левой панели и выберете цвет на палитре, которая откроется при нажатии на иконку с двумя квадратиками с нижнем левом углу. Текст возможно ввести после нажатия на кнопку Т.
Визитка готова. Чтобы сохранить ее нажмите на Файл и Сохранить как. В появившемся окне вы можете выбрать формат для будущего файла. Для печати можно использовать PNG или JPG. Рекомендуем сохранить проект еще раз с разрешением PSD. Это формат Photoshop. Это делается для того, чтобы иметь возможность редактировать по необходимости файл, а не создавать его заново.
Делаем визитку в Мастере Визиток
Мастер Визиток – это специальная программа, предназначенная для создания визитных карточек. Пользоваться ею не составляет труда благодаря русскоязычному интуитивно понятному интерфейсу. С Мастером визиток вы сэкономите деньги на услуги дизайнера и время на самостоятельное изготовление макета. Софт имеет базу с более 500 готовых шаблонов на различные тематики. Вы можете выбрать за основу любой понравившийся.
Для удобства вы можете включить сетку, по которой будет проще выравнивать объекты. В нижней части рабочей области заполните контактные данные.
Импортируйте новое изображение из каталога программы или с компьютера, нажав на иконку с картинкой в верхней панели. При желании подберите цвет фона из палитры во вкладке Фон.
Поздравляем! Ваш уникальный макет визитки готов. Вы можете распечатать его прямо через программу. Настройте расположение карточек на листе и другие параметры печати. Если вы хотите отдать макет на печать в специализированные центры, то сохраните его кнопкой «Сохранить макет в файл».
Посмотрите наш видео-урок на Ютубе о том, как создать двухстороннюю карточку в Мастере Визиток и убедитесь, как это просто:
Выводы
Фотошоп замечательная программа с очень широким функционалом для всех видов графических работ. В ней можно самостоятельно создать иллюстрацию, уникальное дизайнерское решение и наработать собственное портфолио. Это незаменимый софт для профессионалов. Он подходит для начинающих дизайнеров, которые планируют развивать свои навыки в графике.
Если вам нужна визитка быстро и вы не обладаете художественными и техническими навыками, то сэкономьте время для своей деятельности, то скачайте Мастер Визиток, который поможет сделать привлекательную визитку за считанные минуты!
Создаем в Photoshop тему магазина для товаров ручной работы
В этой статье мы будем создавать макет сайта магазина товаров ручной работы. Я объясню, как подбираются шрифты, цвета, пропорции и так далее:
Что вам понадобится
Чтобы следовать за моими действиями, вам понадобятся некоторые ресурсы:
- Фотографии с Unsplash ;
- Фотографии с StockSnap.io ;
- Шрифт Source Sans Pro ;
- Шрифт Source Serif Pro .
Определение бизнес-целей
Сначала необходимо определить, в чем заключаются бизнес-цели этой работы. Начните со следующих вопросов:
- Что мы продаем?
- Кто может быть заинтересован в покупке нашей продукции?
- Почему потенциальные клиенты должны купить это у нас?
Для этого руководства по созданию psd макетов сайтов я решил сосредоточиться на имидже и активном использовании незаполненного пространства, чтобы создать ощущение свободы и ясности. Я хочу, чтобы дизайн выглядел стильно и обращался к людям, которые заботятся о своем имидже.
Подготовка
Перед тем как перейти в Adobe Photoshop и начать создавать визуальные элементы, давайте определимся с основными цветами, стилями и общим направлением.
Шаг 1
Начните со сбора изображений, которые вы хотите разместить на своем эскизе, и определения цветовой палитры:
Шаг 2
Далее сформируем цветовую схему дизайна для макета сайта в Фотошопе . Она должна иметь отношение к вашему бренду и обращаться к целевой аудитории. Для этого можно использовать генератор цветовой палитры, такой как Adobe Color CC ( бывший Kuler ). Это поможет сэкономить время при выборе цветов.
Загрузите изображение со своего черновика и посмотрите, какие цвета для него будут сгенерированы. Настройте палитру и сохраните цвета для дальнейшего использования:
Выбор шрифтов
Мы останавливаем свой выбор на семействе шрифтов Source Pro , включая версии шрифта sans и serif . Их сочетание обеспечит ощущение сбалансированности и выразительность заголовков.
Подготовка документа
Перед тем, как перейти к дизайну макета сайта, разберёмся с некоторыми техническими вопросами, касающимися Adobe Photoshop .
Шаг 1
Откройте Adobe Photoshop и создайте новый документ ( Ctrl + N ). Определите размеры документа, которые будут соответствовать вашим потребностям. В моем случае это 1400 на 3564 px .
Шаг 2
После этого установите направляющие так, чтобы макет имел достаточно свободного пространства и выглядел сбалансированным. Установка направляющих обеспечит аккуратность и поможет определить ширину сайта. Перейдите в Просмотр> Новая направляющая… и установите направляющую. Обычно в качестве отправной точки я выбираю 1000 пикселей и добавляю несколько направляющих перпендикулярно ей, чтобы на холсте было достаточно свободного пространства.
Примечание: В этом руководстве использованы следующие вертикальные направляющие: 200 , 500 , 550 , 700 , 850 , 900 и 1200 px .
Приветствие новых клиентов
Мы начнем разработку дизайна макета сайта магазина с создания верхней области, которая будет обращать на себя внимание посетителей и давать им краткое представление, о чем этот сайт.
Шаг 1
Создайте новую группу слоев под названием « Navigation » и установите новую горизонтальную направляющую на уровне 130 px . Здесь будет размещаться логотип, а также ссылки навигации и панель поиска. Разместите логотип слева. Если у вас нет логотипа, создайте фигуру прямоугольника и поместите в ней текст:
Шаг 2
Теперь разместите элементы навигации, как простой текст. На этапе планирования необходимо определить, что нужно включить в панель навигации. С помощью инструмента « Горизонтальный текст » ( T ) добавьте заголовки ссылок и разместите их рядом с логотипом, оставив достаточно пространства между ними:
Шаг 3
В макете сайта панель поиска должна быть заметной и доступной, поэтому разместите ее справа в главной верхней панели навигации. Для ее создания используйте инструменты « Прямоугольник » ( U ) и « Горизонтальный текст » ( T ). Обратите внимание на то, какие цвета на основе изображения мы подобрали в Adobe Color CC :
Шаг 4
Теперь пришло время добавить выразительное изображение, которое должно приковывать к себе внимание посетителя. Чаще всего для этого используются изображения высокого качества с четким фокусом. Что позволяет наложить на них текст и элементы интерфейса. Мы поступим также.
С помощью инструмента « Прямоугольник » ( U ) создайте прямоугольник размером 1400 на 700 px ( любого цвета ) и поместите его прямо под верхней панелью навигации. Помните горизонтальную направляющую на отметке в 130 пикселей ? Она для этой фигуры. Затем перетащите выбранное изображение и поместите его над слоем прямоугольника.
После этого, удерживая нажатыми клавишу Alt и кнопку мыши, наведите курсор на слой изображения, пока не появится маленькая стрелка, указывающая вниз. Затем отпустите левую кнопку мыши, чтобы создать обтравочную маску. Изображение в макете сайта будет видно только в пределах прямоугольника.
Нажмите Ctrl + T , чтобы изменить размер фотографии. Удерживая нажатой клавишу Shift , измените ее размер пропорционально:
Шаг 5
Чтобы привлечь внимание пользователя к горизонтальной центральной части фото, добавим градиент от прозрачного к черному в нижней части. Выберите инструмент « Градиент » ( G ) и задайте переход от черного #000000 к прозрачному. После этого, удерживая нажатой клавишу Shift , проведите мышью от нижней части изображения почти до середины.
Затем сделайте это для обтравочной маски и уменьшите непрозрачность до 50% , чтобы эффект не был таким интенсивным. Переименуйте слой в “ Shadow ”, чтобы его было легко идентифицировать:
Шаг 6
Пришло время создать для дизайна макета сайта броский заголовок. Используйте большой и жирный шрифт Source Sans Pro и напишите короткий заголовок. Я использовал Source Sans Pro ( черный цвет ), размер — 70 , трекинг — 160 :
Шаг 7
Вы привлекли внимание пользователя, теперь нужно добавить второе послание и призыв к действию. Чтобы сохранить последовательность дизайна, я использовал для подзаголовка и для второй кнопки поиска шрифт Source Serif Pro ( обычный ), размер 28 .
Обратите внимание на отступ, который я использовал. Всегда оставляйте достаточно места вокруг элементов, чтобы они лучше воспринимались и выглядели более организованными. Если присмотреться внимательнее, то можно увидеть, что текстовые слои расположены ближе друг к другу. Это обусловлено законом распределения Гештальта .
Формирование доверия
Мы создали « приветствие новых клиентов » или область заголовка. После того, как мы привлекли внимание посетителей и заинтересовали их, пришло время показать им еще несколько преимуществ, которые может предложить наш магазин.
Шаг 1
Так как верхняя область нашего сайта выполнена в минималистичном стиле, мы сохраним ту же четкость и эстетику простоты для остальной части макета.
Ниже мы разместим заголовок, который должен заинтересовать посетителей, и краткое описание, которое еще больше будет стимулировать их. Я использовал шрифт Source Sans Pro ( полужирный ), размером 24 темно-серого цвета #282723 . Не забудьте оставить достаточно свободного места над заголовком, чтобы это соответствовало верхней области.
Визуально описание должно быть менее насыщенным и сразу восприниматься как вторичный элемент. В макете сайта я использовал шрифт Source Serif Pro ( обычный ), размером 16 серого цвета #adadad :
Шаг 2
Одним из эффективных способов формирования доверия является использование привлекательных изображений высокого качества. Уделите время тому, чтобы сделать хорошие фотографии своих товаров.
Выберите инструмент « Прямоугольник » ( U ) и нарисуйте фигуру. После этого перетащите фото товара в Photoshop , разместите его на прямоугольнике и создайте обтравочную маску. Измените размер изображения, если это необходимо, нажав Ctrl + T :
Шаг 3
Для простоты в HTML макете сайта мы будем предоставлять только основную информацию о товаре, включающую в себя название и цену.
Выберите шрифт Source Serif Pro , который использовался для раздела заголовка, и введите название более темным серым цветом. После этого используйте светло-серый оттенок для цены, так как она является вторичной информацией и для нее не требуется слишком сильный визуальный акцент. Не забывайте, что такие элементы магазина, как заголовки, кнопки призыва к действию и блоки описаний, должны быть выровнены по центру:
Шаг 4
Теперь поместите все слои товара в одну группу и продублируйте их, нажав Ctrl + J . Поместите копии между ранее определенными вертикальными направляющими, оставляя между ними свободное пространство:
Шаг 5
Мы закончили с разделом “ Trending ”, в котором представлены три товара. Теперь создадим небольшой разделитель, чтобы разбить макет на разделы. Я использовал инструмент « Линия » ( U ), ширина — 1 px , цвет — светло-серый #E6E6E6 , чтобы линия не была слишком насыщенной.
Подсказка: Удерживая нажатой клавишу Shift , можно легко нарисовать идеально горизонтальную линию.
Шаг 6
Теперь создадим еще один раздел макета сайта, в котором будет представлено больше продуктов, и назовем его “ Popular ”. Люди всегда ищут популярные товары, которыми пользовались другие.
Продублируйте слой ( CTRL+ J ) и измените заголовок, описание и товары раздела “ Trending ”. Создайте дополнительные копии слоев товаров и составьте решетку 3 на 2 из популярных товаров:
Захват лидов
После создания большинства элементов визуального воздействия пришло время собрать информацию о посетителях на случай, если они не готовы купить что-то прямо сейчас. Чтобы можно было предложить им что-то позже.
Шаг 1
Мы создадим простой раздел блога, используя тот же заголовок и формат описания. А также несколько выдержек из записей блога для перенаправления пользователей на контент, который может их заинтересовать.
Выберите инструмент « Прямоугольник » ( U ) и нарисуйте огромный прямоугольник, который будет служить фоном для нового раздела. Используйте светло-серый цвет, чтобы отделить блог от раздела товаров. Я использовал цвет #fbfafa . Теперь продублируйте название и описание предыдущего раздела и поместите их поверх нового фона:
Шаг 2
Для дальнейшего создания макета сайта в Фотошопе выберите инструмент « Горизонтальный текст » ( T ) и введите заголовок, дату и короткую выдержку из записи в блоге. Я снова использую шрифт Source Serif Pro для заголовка, а для описания и даты — Source Sans Pro .
В блоке блога должна прослеживаться четкая визуальная иерархия: название — тёмное и самое большое, другие элементы — меньше и светлее. Всегда используйте визуальную иерархию для создания логической последовательности:
Шаг 3
Теперь поместите все слои записей блога в группу и продублируйте ее дважды ( Ctrl + J ). Разместите копии между вертикальными направляющими, оставляя между блоками промежутки, как мы делали для товаров:
Шаг 4
После вывода нескольких крутых продуктов и ценных записей блога пришло время немного подтолкнуть посетителя и предоставить ему форму с четким призывом к действию — подписке.
Еще раз выберите инструмент « Прямоугольник » ( U ), задайте более темный цвет, например, #282723 , и нарисуйте фон для формы подписки в макете сайта. Более темный фон создаст контраст, который будет привлекать внимание посетителей:
Шаг 5
Теперь напишите короткую аннотацию, объясняющую, почему люди должны подписаться; опишите преимущества, которые дает подписка. После этого перейдите к разделу навигации и продублируйте поле поиска.
Перетащите дублированные слои и поместите их поверх только что созданного фона, затем отредактируйте поле ввода запроса и кнопку призыва к действию:
Шаг 6
Каждый макет сайта в Фотошопе должен содержать подвал, чтобы люди могли найти там ссылки на ключевые страницы: поддержка клиентов, контактная информация, социальные медиа и многое другое.
Продублируйте текстовые слои записей блога и отредактируйте их, чтобы они соответствовали ссылкам. Разделите различные группы ссылок на столбцы, которые будут равномерно распределены.
Последний штрих: добавьте строку копирайта в самом низу макета.
Поздравляю!
Мы завершили создание дизайна магазина. Теперь просмотрите слои документа, удалите ненужные и передайте макет сайта веб-разработчику. Или, еще лучше, напишите код сами!
Пожалуйста, опубликуйте свои мнения по текущей теме статьи. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!
Как сделать фото для «Wildberries», чтобы карточка продавала: 14 советов и 5 распространенных ошибок
Товар в интернете продает именно фото: раз уж изделие нельзя пощупать и потрогать, нужно дать покупателю возможность рассмотреть его во всех деталях. Но выполнить технические требования к разрешению, фону, освещению — далеко не все. Собрали 14 практических советов и 5 распространенных ошибок, которых нет ни в одной инструкции. Поехали!
Коротко о технических требованиях к фото для «Wildberries»
В разделе «Веб-спецификация» в кабинете продавца Wildberries указано, что маркетплейс убрал лишние проверки изображений в карточке товара. Однако это не значит, что можно загружать что попало. Ключевые требования остались неизменными.
Разрешение — не менее 450 х 450 пикселей, максимальный размер стороны — 8 тысяч пикселей.
Соотношение сторон — 3 на 4.
Формат изображения — строго вертикальный.
Допустимые форматы — любые.
Если съемка проводится внутри интерьера, он должен иметь презентабельный вид.
Изображения не должны нарушать авторские и смежные права.
Нельзя использовать противозаконные материалы: порнографию, сцены насилия, употребления наркотиков и так далее;
Запрещена съемка в офисах, квартирах.
Татуировки и пирсинг на фотомоделях также под запретом.
Изображения не должны содержать логотипы других брендов.
Фотография должна давать исчерпывающее представление о товаре, передавать цвет и другие детали
Если продукт идет в комплекте с дополнением (упаковка, аксессуар), оно тоже размещается на фото.
Объект съемки должен занимать основную часть изображения.
Совет 1: воруйте как художник
Использовать неуникальные (уже размещенные на маркетплейсе другими продавцами) фото запрещено правилами площадки. За это могут оштрафовать, заблокировать карточку товара или аккаунт продавца. А вот вдохновляться фотографиями товара конкурентов можно и нужно.
Посмотрите карточки аналогичных товаров у конкурентов, которые находятся в топе выдачи маркетплейса. Они туда попали, а значит, чем-то зацепили покупателей. Референсы можно искать не только на самом Wildberries, но и на таких ресурсах, как Pinterest, «Яндекс.Картинки» и даже каталог IKEA.
Совет 2: фотографируйте в студии
Это быстрее, качественнее и часто дешевле, чем оборудовать домашнюю студию для съемки пары артикулов. К тому же там можно найти подходящие интерьеры и предметы обстановки. Например, фото модели, сидящей на горящем камине в вашем свитере с оленями точно взорвет маркетплейс в новогодние праздники. Дома такое не организуешь, если вы живете не в средневековом замке.
В таких интерьерах и снимать приятно
Совет 3: играйте с эмоциями
Показывает не просто фото человека с товаром, а фото ДОВОЛЬНОГО человека с товаром. Его лицо должно светиться счастьем от обладания таким замечательным изделием.
Совет 4: используйте осветительную технику
Главное в съемке освещение, это вам скажет любой фотограф. Естественный свет или свет комнатной лампы не годятся в подавляющем большинстве случаев. Проблему можно решить за пару тысяч рублей и три минуты на AliЕxpress.
На AliЕxpress светотехнику можно купить на несколько сотен рублей
Для съемки товаров небольшого размера можно приобрести лайтбокс, для интерьерной съемки — специальную насадку-рассеиватель на светильник, для съемки лица крупным планом — световое кольцо для селфи.
Совет 5: играйте с дополнительными предметами
Пример: вы фотографируете коробку новогодних конфет. Одно дело сделать снимок на сером фоне и совсем другое — добавить к фото чашечку кофе, свечи, насыпать кофейные зерна, орехи и сухофрукты. Такой снимок передаст атмосферу праздника и зайдет куда лучше.
Совет 6: используйте инфографику
Wildberries разрешает добавлять описание прямо в фото товара, причем на всех снимках. Этот инструмент повышает конверсию, выделяет вас на фоне конкурентов и повышает продажи. Но есть несколько правил, которые следует соблюдать:
Не размещайте на фото больше трех блоков инфографики (на экране смартфона все это будет мельчить)
На первом фото инфографика должна содержать оффер — уникальное торговое предложение.
Инфографика не должна закрывать товар или его части.
Фото товара с инфографикой
Совет 7: приглашайте профессиональных моделей
Если снимаете одежду, обувь или аксессуары. Мы не сомневаемся, что у вас есть знакомая с данными Анджелины Джоли, но дело не только во внешности. Модели умеют принять правильную позу, чтобы подчеркнуть достоинства товара, сделать нужное выражение лица, они более свободны и раскованы.
То же самое касается макияжа, прически, маникюра и так далее.
Совет 8: приглашайте фотографов, которые специализируются на фото для маркетплейсов
Подход «У меня есть знакомая, которая снимает свадьбы, попрошу ее» не прокатит, здесь абсолютно другая специфика работы. На рынке услуг давно появились узкие специалисты, предметно занимающиеся фото для маркетплейсов, и лучше обратиться к ним.
Совет 9: составляйте подробное ТЗ для фотографа
Подробно опишите задачу: что снимаем, на каком фоне, в каких ракурсах, стиле, интерьерах, в каком количестве и так далее. Если объяснять на словах, результат может оказаться совсем не таким, каким вы его ожидали. Все, что может быть понято неправильно, будет понято неправильно.
И не забудьте показать фотографу результат, к которому нужно стремиться (помним про фото конкурентов).
Совет 10: придерживайтесь принципа золотого сечения и правила третей
Товар должен быть на фото в таком месте, куда в первую очередь падает взгляд человека (как ни странно, это не центр снимка). Точка определяется по принципу золотого сечения или правилу третей.
Принцип золотого сечения (правило третей)
Совет 11: показывайте, что внутри
Если фотографируете коробку конфет, не пожалейте одну: распакуйте ее, сделайте фото каждой конфетки в отдельности. Клиент должен понимать, что находится внутри упаковки. Это касается любых похожих товаров.
Совет 12: для съемки одежды обратитесь в агентство
Коммерческая съемка одежды — это искусство. Поверьте, отснять самостоятельно предметы гардероба так, чтобы фото транслировало нужные смыслы, практически невозможно. Нужно правильно подобрать модель, ее наряд, аксессуары, позы, ракурсы, макияж и так далее.
Ювелирное изделие можно положить в лайтбокс и сделать снимок на приличный фотоаппарат, этого будет вполне достаточно. С одеждой так не выйдет, а убытки от того, что ваша карточка никого не заинтересует, многократно превысят расходы на съемку в агентстве.
Совет 13: при работе с подрядчиками спрашивайте портфолио
Коммерческая съемка товаров сейчас на подъеме, и многие хотят на этом заработать. Вчерашние свадебщики ринулись снимать для маркетплейсов, уверяя, что умеют это делать. На самом деле далеко не все понимают специфику.
Чтобы выбрать хорошего подрядчика, попросите его показать портфолио с отзывами: кому и что снимал, как продает карточка, какая конверсия и так далее. Можно сравнить его работы с фото конкурентов из топа, товары которых продаются хорошо.
Совет 14: как можно меньше воздуха
Смысл коммерческого фото не в том, чтобы в кадр попала модель в полный рост, фонтан и вон та церковь на холме. Здесь совсем другие посылы. На фото должно быть как можно меньше свободного пространства, или, как говорят специалисты, «воздуха». Поэтому на фото для маркетплейсов без зазрения совести «обрезают» руки, ноги и даже головы,чтобы показать товар как можно крупнее.
На фото для маркетплейсов без зазрения совести «обрезают» руки, ноги и даже головы,чтобы показать товар как можно крупнее
Это все основные советы, как делать фото для карточки товара на «Вайлдберриз». Теперь перейдем к распространенным ошибкам, которые могут допустить начинающие селлеры.
Ошибка 1: не делать акцент на товаре
Представьте: на фото сидит модель, одетая в костюм, с шарфом на шее, диадемой на голове и сумкой в руках. Образ смотрится хорошо и целостно, только с первого взгляда непонятно, что мы вообще продаем: сумку, шарф или костюм.
Угадайте, что здесь продается: сумка, юбка или блузка
На продукте нужно сделать главный акцент, чтобы сразу становилось ясно, где объект продажи.
Вот так гораздо лучше. Многовато свободного пространства слева, сюда можно вставить инфографику
Ошибка 2: использовать готовые фото
Мы уже говорили, что на «Вайлдберриз» нельзя использовать фото других продавцов. А вот брать картинки со сторонних источников (если это не нарушает авторских прав) можно. Но мы не советуем этого делать.
Во-первых, примерно то же самое могут сделать конкуренты, и изображения все же окажутся неуникальными (вы узнаете об этом только когда карточку заблокируют). Во-вторых (этим часто грешат продавцы китайских товаров, которые берут фото прямо с AliЕxpress) одинаковые фото говорят об одинаковом товаре, и придется конкурировать по цене. Отсняли сами — вроде и товар уникальный.
Ошибка 3: заказывать фото в службе «Вайлдберриз»
За определенную плату служба маркетплейса отснимет товар за вас, а в случае обезлички (если на склад WB пришел неидентифицированный товар) это сделают в любом случае. Не то, чтобы этот вариант сильно плох, просто мы не стали бы рекомендовать его всем подряд.
Вы не контролируете процесс: как сделают, так и сделают. Реализовать свои идеи, что-то поменять, убрать или добавить нельзя.
Фотографии, отснятые в «Вайлдберриз», нельзя использовать на других маркетплейсах.
Заказать карточку стандартного ширпотреба еще нормально, но если у вас уникальный, авторский продукт, лучше сделайте фото самостоятельно.
Ошибка 4: не обрабатывать фото
Это вам кажется, что исходник прекрасен. Любой человек, разбирающийся в фото, увидит разницу между обработанным и необработанным снимками. Для обработки фото можно использовать Photoshop и его бесплатные аналоги: GIMP, Paint Net, Photo Pos Pro и другие.
Обработанное (слева) и необработанное (справа) фотографии. Разница налицо!
Ошибка 5: не учитывать целевую аудиторию
Если ваша одежда рассчитана на аудиторию 35+, а на фото в карточке товара красуется 18-летняя модель, покупатель неверно поймет посыл и, скорее всего, на автомате закроет страницу. Всегда учитывайте особенности ЦА, на которую рассчитан продукт.
Итак, теперь вы знаете о том, как сделать классные снимки для карточки товара на Wildberries. А выйти на маркетплейсы и продавать там с одного склада из единого личного кабинета поможет Кактус.