Дизайн — статьи о сайтах
В офлайн-магазине вещь берут в руки, смотрят на свет, прикладывают к себе. На сайте всё это делают фотографии. Если кадры идут случайно, цвет на снимках расходится, а страница долго грузится, человеку не хватает информации, и он уходит искать магазин, где вещь видно лучше. Ниже — как выстроить фото так, чтобы они отвечали на вопросы покупателя.
Какие кадры нужны в карточке одежды
У каждой группы товаров свой минимум. Для большинства вещей он складывается из задач, которые решает кадр:
- общий вид спереди — первое впечатление о крое и силуэте;
- вид сзади и сбоку — посадка, длина, разрезы, спинка;
- крупный план ткани — фактура, плотность, просвечивание;
- детали — воротник, молнии, пуговицы, швы, подкладка;
- вещь на модели с указанным ростом и размером;
- вещь без модели на ровном фоне, чтобы оценить цвет и форму.
Для обуви и аксессуаров набор другой: подошва, вид сверху, внутренняя часть, фурнитура. Составьте такой список для каждой категории и дайте его фотографу как техническое задание, тогда у всех товаров будет одинаковая полнота.
В каком порядке показывать снимки в галерее
Первый кадр виден в каталоге, в поиске по сайту и в превью при отправке ссылки в мессенджере. Он должен быть самым понятным: вещь целиком, без сложного фона. Дальше порядок лучше сделать одинаковым во всём каталоге: покупатель привыкает и знает, где искать деталь.
Условный пример карточки «Тренч женский, бежевый». Галерея: 1 — вид спереди на модели; 2 — вид сзади; 3 — воротник и пуговицы; 4 — ткань крупно; 5 — образ в движении; 6 — вещь на ровном фоне. Рядом с галереей — подпись «На модели размер S, рост 175 см», а не общая фраза «модель в размере S». Эту подпись удобно выводить отдельным полем карточки, чтобы менеджер не набирал её вручную каждый раз.
Как связать фото с цветами и размерами
Частая ошибка — одна галерея на все цвета. Человек выбирает чёрный вариант, а видит бежевый. Правильнее, чтобы выбор цвета переключал весь набор снимков, а не только первый кадр. Если на каждый цвет нет полной съёмки, решите заранее: либо показывать только имеющиеся кадры этого цвета, либо честно подписать, какие фото относятся к другому оттенку.
Маленькие образцы цвета (кружки или квадраты) стоит делать из реальных снимков ткани, а не подбирать «похожий» оттенок в редакторе. С размерами то же самое: таблица размеров и фото на модели должны ссылаться друг на друга, например «Как сидит на росте 165 см» рядом с кнопкой выбора размера.
Как выглядят превью в каталоге
В каталоге покупатель сравнивает десятки позиций, и разнобой мешает сравнению. Задайте единые пропорции превью, например вертикальные, и единый масштаб: вещь занимает примерно одинаковую часть кадра. Второй снимок при наведении курсора показывайте только как дополнение. На телефоне наведения нет, поэтому важную информацию нельзя прятать только в этот эффект.
Если на карточках есть метки «новинка» или «скидка», проверьте, что они не закрывают воротник или принт. Метку лучше ставить в угол, где обычно пустое место.
Формат и вес файлов без потери качества ткани
Фактура ткани — главное, что теряется при слишком сильном сжатии: трикотаж становится «грязным», принт расплывается. Поэтому подходите к весу аккуратно:
- храните исходники в большом размере, а на сайт отдавайте несколько версий — для каталога, карточки и увеличения;
- используйте современные форматы вроде WebP, оставляя JPEG запасным вариантом для старых браузеров;
- добавляйте отложенную загрузку для кадров ниже первого экрана, но первый кадр карточки не откладывайте;
- задавайте размеры изображений в вёрстке, чтобы страница не «прыгала» при загрузке.
Приближение при клике должно открывать более крупную версию, а не растягивать маленькую. Проверьте результат на обычном мобильном интернете, а не только на офисном Wi-Fi.
Короткий проверочный список
- В каждой категории есть утверждённый набор обязательных кадров.
- Порядок снимков одинаков во всех карточках.
- Рост и размер модели указаны текстом.
- Переключение цвета меняет всю галерею.
- Превью в каталоге имеют одинаковые пропорции и масштаб.
- Увеличенное фото показывает ткань и швы чётко.
- У каждого изображения есть описание для альтернативного текста: тип вещи, цвет, ракурс.
- Карточка открывается без скачков вёрстки на телефоне.
Пройдите по списку на пяти разных товарах — так быстро станет видно, где нужны правила для фотографа, а где доработка сайта.
