Прототипирование: зачем нужен этап до дизайна
Многие проекты начинаются с фразы «давайте сразу нарисуем дизайн». Выглядит логично: заказчик хочет увидеть картинку, дизайнер хочет показать, на что…
В интернет-магазине покупатель не может взять товар в руки, поэтому фотография заменяет ему и прилавок, и консультанта. Снимки решают, поверит ли человек описанию, добавит ли товар в корзину и не вернёт ли его после получения. Разбираем требования к фотографиям, технические параметры, приёмы съёмки и подготовку изображений к публикации на сайте.
Для большинства покупателей изображение — главный источник информации о товаре. Они смотрят на снимки раньше, чем читают описание, а часто вообще не читают его, если фото убедило. Качественные фотографии снижают неопределённость: человек видит цвет, фактуру, размер, детали, и ему проще принять решение. Плохие снимки вызывают подозрения, особенно если они тёмные, размытые, снятые на фоне чьей-то кухни или «украденные» из каталога производителя.
Важна и обратная сторона: фотографии влияют на возвраты. Если на фото платье выглядит тёмно-синим, а в реальности оказывается чёрным, или мебель кажется компактнее, чем есть, недовольство неизбежно. Честные, точные снимки уменьшают число таких ситуаций и экономят деньги на обратной логистике. Отдельный бонус — поиск по картинкам и выдача в поиске: хорошо подписанные уникальные изображения приводят дополнительный трафик.
Один снимок на товар — это минимум, который почти всегда недостаточен. Лучше продумать набор кадров, который отвечает на типичные вопросы покупателя.
Товар целиком на чистом фоне, в лучшем ракурсе. Именно оно появляется в каталоге, поиске и корзине.
Вид сбоку, сзади, сверху, снизу. Покупатель должен увидеть товар так, как осмотрел бы в магазине.
Крупным планом материал, швы, фурнитура, разъёмы, этикетка, упаковка. Здесь видно качество.
Фото рядом с привычным предметом или в руке помогает понять реальный размер.
Одежда на модели, мебель в интерьере, прибор в работе. Показывает товар в жизни.
Все предметы, которые приходят в коробке, разложенные на одном кадре.
Количество снимков зависит от категории. Для простых и недорогих товаров хватает трёх-четырёх кадров. Для сложной техники, мебели, обуви и одежды разумно показывать от пяти до десяти. Чем дороже товар и чем выше риск разочарования, тем подробнее должен быть набор.
Исходники лучше снимать с запасом разрешения, чтобы можно было обрезать кадр и увеличивать фото при просмотре. Для карточки обычно достаточно стороны в районе тысячи-полутора тысяч пикселей, а для зума — больше. Но главное — единые пропорции. Если одни фото квадратные, другие горизонтальные, а третьи вертикальные, сетка каталога превращается в мозаику с разными высотами карточек. Выберите один формат, например квадрат или соотношение четыре к пяти, и придерживайтесь его для всего каталога.
Для фотографий подходят форматы с эффективным сжатием, которые поддерживает большинство браузеров. Современные форматы дают заметно меньший размер при том же качестве. Для изображений с прозрачным фоном нужен формат с поддержкой прозрачности. Простое правило: на сайте не должно быть файлов, которые весят несколько мегабайт, ведь они замедляют страницу и бьют по конверсии, особенно на мобильных.
Ориентир для картинки в каталоге — до двухсот килобайт, а для крупного снимка в карточке — до пятисот. Достичь этого помогает правильное сжатие без заметной потери качества, генерация нескольких размеров под разные экраны и отложенная загрузка изображений ниже первой видимой области.
Белый или светло-серый фон — стандарт для большинства каталогов, и он требуется многими площадками. Он не отвлекает и делает каталог единым. Фон должен быть однородным, без теней-пятен и складок. Если используется цветной фон или студийная сцена, придерживайтесь выбранного решения во всей категории.
| Параметр | Рекомендация | Почему важно |
|---|---|---|
| Пропорции | Один формат для всего каталога | Ровная сетка карточек без прыжков высоты |
| Сторона изображения | От одной до полутора тысяч пикселей, с запасом для увеличения | Чёткость на больших и экранах высокой плотности |
| Вес файла | Ориентир до нескольких сотен килобайт | Быстрая загрузка на мобильных сетях |
| Фон | Однородный светлый | Единый вид каталога, соответствие требованиям площадок |
| Отступы вокруг товара | Одинаковые поля со всех сторон | Товары выглядят сопоставимо по размеру |
| Название файла | Понятное, латиницей, с описанием товара | Удобство работы и польза для поиска по картинкам |
Качественные фотографии можно сделать и без профессионального оборудования. Нужны понимание света, аккуратность и последовательность.
Самый частый источник проблем — свет. Жёсткая вспышка в лоб даёт блики и резкие тени, а смешанное освещение от окна и ламп создаёт грязные цветовые оттенки. Лучший вариант для начинающих — мягкий рассеянный свет. Его создают либо большие окна в пасмурный день, либо осветители с рассеивателями. Свет с двух сторон под углом смягчает тени, а белый лист или отражатель сбоку подсвечивает затенённую часть.
Для небольших предметов хорошо подходит так называемый лайтбокс или бесшовный фон: лист плотной бумаги, плавно изогнутый от стола к стене, без линии горизонта. Для крупных предметов, например мебели, используют ровную стену и чистый пол. Стекло и глянцевые поверхности лучше снимать с поляризацией или под таким углом, чтобы отражения не показывали фотографа и комнату.
Современные смартфоны вполне справляются с каталожной съёмкой. Главное — штатив или опора, чтобы кадры получались одинаково выстроенными, а картинка была чёткой. Камеру выставляйте на уровне центра предмета, чтобы избежать искажений перспективы. Не используйте цифровое приближение: лучше подойти ближе или обрезать кадр позже.
Цвет — один из главных источников возвратов. Настройте баланс белого по нейтральной серой или белой карте и держите одинаковые настройки в серии. Если есть возможность, периодически сравнивайте снимок с реальным предметом на откалиброванном мониторе. Не перенасыщайте цвета при обработке ради «сочности»: покупатель получит товар скромнее картинки.
Обработка должна исправлять технические недочёты, а не менять товар. Допустимые операции: выравнивание горизонта, обрезка, коррекция экспозиции и баланса белого, удаление пыли и мелких дефектов фона, лёгкое повышение резкости. Недопустимо ретушировать сам товар так, чтобы он выглядел лучше, чем на самом деле: убирать царапины, менять оттенок или форму. Это прямой путь к жалобам и возвратам.
Если нужно заменить фон на белый, делайте это аккуратно, сохраняя естественную тень под предметом. Предмет без тени «парит» в воздухе и выглядит неестественно. При массовой обработке удобно использовать заранее созданные пресеты и пакетную обработку, чтобы результат был единообразным.
Сделайте с запасом, затем выберите лучшие кадры по резкости, цвету и композиции.
Скорректируйте экспозицию и цвет, обрежьте по единому формату, уберите дефекты.
Экспортируйте в подходящий формат, добейтесь разумного веса без заметной потери качества.
Дайте понятные имена латиницей: тип товара, модель, номер ракурса.
Посмотрите карточки на телефоне и компьютере, проверьте порядок снимков и зум.
У каждого изображения должен быть альтернативный текст, короткое описание того, что на нём изображено. Он помогает людям с нарушениями зрения, показывается при сбое загрузки и используется поисковыми системами. Пишите по существу: «Кроссовки женские белые, вид сбоку», а не набор ключевых слов. Для главного снимка включайте название товара, для остальных — ракурс или деталь.
Изображения могут приводить трафик из поиска по картинкам и повышать привлекательность сниппетов. Для этого используйте уникальные снимки, а не копии с сайта производителя: одинаковые картинки у десятков магазинов не дают преимущества. Давайте файлам понятные названия, заполняйте альтернативные тексты и следите за скоростью загрузки. Для крупных каталогов полезна отложенная загрузка, но первое изображение в карточке стоит подгружать сразу. Общие подходы к видимости магазина в поиске мы описываем в разделе интернет-магазины.
Для сложных товаров фото иногда недостаточно. Короткое видео показывает, как работает механизм, как сидит одежда в движении, как раскладывается диван. Вращение на 360 градусов позволяет осмотреть предмет со всех сторон без десятка отдельных кадров. Эти форматы помогают, но они тяжелее, поэтому нужны не всем. Применяйте их для дорогих товаров с высоким риском сомнений, а базовый набор качественных фото оставляйте обязательным.
Покупатели хотят видеть изделие на модели и отдельно, ткань вблизи, фасон спереди и сзади. Укажите рост модели и размер, который на ней надет. Это снижает вероятность неверного выбора.
Важны размеры в контексте. Снимок в интерьере показывает масштаб и стиль, а чистый студийный кадр помогает оценить форму. Покажите механизмы трансформации, ящики, фурнитуру.
Нужны порты, разъёмы, кнопки, комплектность. Снимки интерфейса или экрана включённого устройства добавляют ясности. Блики на глянце необходимо убирать.
Здесь важны упаковка с читаемым составом, срок годности, объём и внешний вид самого продукта. Аппетитная подача допустима, но без введения в заблуждение относительно порции.
Требуются макросъёмка, аккуратный свет без бликов и фото на руке или шее для масштаба. Мельчайшие дефекты на крупном плане видны, поэтому съёмка должна быть безупречной.
Для простых товаров хватает трёх-четырёх, для дорогих и сложных лучше пять-десять. Ориентируйтесь на вопросы, которые чаще всего задают покупатели.
Часто можно, но только с его разрешения. При этом такие снимки неуникальны и не выделяют магазин. Лучше постепенно заменять их собственными, начиная с самых продаваемых позиций.
Небольшой знак в углу допустим, если вы опасаетесь копирования. Крупная надпись поверх товара ухудшает впечатление и раздражает покупателей.
Хорошие фотографии товаров — одна из самых окупаемых вложений в интернет-магазин. Продумайте набор кадров, задайте единые технические параметры, снимайте при мягком свете, аккуратно обрабатывайте и сжимайте изображения, не обманывая покупателя в цвете и размерах. Зафиксируйте правила в короткой инструкции и проверяйте карточки на телефоне. Тогда каталог будет выглядеть цельно, загружаться быстро и убеждать посетителей так, как это делает хороший продавец в магазине.
Многие проекты начинаются с фразы «давайте сразу нарисуем дизайн». Выглядит логично: заказчик хочет увидеть картинку, дизайнер хочет показать, на что…
Слова «дизайн-система» и «UI-kit» ассоциируются с крупными продуктами и командами из десятков дизайнеров. Но потребность в единых правилах оформления…
Доступный сайт — это сайт, которым может пользоваться любой человек: с плохим зрением, с травмой руки, с устаревшим телефоном, на ярком солнце или в…