Дизайн — статьи о сайтах
Главное изображение — первое, что видит человек, пришедший на сайт цветочного магазина из рекламы, поиска или мессенджера. За несколько секунд он должен понять три вещи: здесь продают то, что ему нужно, товар выглядит достойно, и подарок можно получить к нужному сроку. Поэтому выбор материала — это не вопрос вкуса, а решение о структуре первого экрана.
Какие вопросы покупателя должен закрыть первый экран
Покупатель цветов обычно спешит: день рождения, годовщина, поздравление коллеги. Он открывает несколько сайтов подряд и сравнивает, совпадает ли картинка с его запросом. Главное изображение должно показать, что это за товар, для какого случая он подходит и насколько похож на то, что приедет по адресу. Если на экране абстрактная композиция из лепестков, а букетов не видно, каталог придётся искать самому, и часть посетителей вернётся к другим сайтам.
Фото букета, витрина или видео: что для чего подходит
- Фото конкретного букета из каталога. Подходит для главной и рекламных страниц: продукт виден сразу, а рядом можно поставить кнопку «Заказать этот букет».
- Витрина, мастерская, флорист за работой. Уместно, если у магазина есть точка и важно доверие. Но такое фото не должно заменять товар: его лучше поставить во второй блок.
- Видео. Оправдано, когда показывает то, что не передаёт фото: объём букета, сборку, упаковку. Нужен статичный постер, выключенный звук и лёгкий файл для мобильной сети.
- Стоковое фото. Допустимо для информационных разделов, например про оформление мероприятий. Для карточек и первого экрана каталога лучше свои снимки: чужие розы не совпадут с вашими, и покупатель это заметит при получении.
Условный пример: первый экран страницы «Букеты на день рождения»
Представим страницу вымышленного магазина. Слева заголовок «Букеты на день рождения с доставкой по городу». Под ним одна строка про сроки, например «Заказ до 16:00 — доставка сегодня, если букет есть в наличии»; конкретное условие магазин определяет сам. Затем кнопка «Выбрать букет».
Справа фото одного реального букета из каталога: дневной свет, нейтральный фон, букет занимает большую часть кадра. Под снимком подпись с названием, составом и высотой в сантиметрах. Сразу под первым экраном идёт ряд карточек похожих букетов.
Здесь изображение подтверждает заголовок, его можно купить, а масштаб понятен из подписи. Текст лежит на спокойной области, а не на пёстрых цветах, поэтому читается на любом экране.
Как не разочаровать покупателя расхождением с реальностью
Цветы сезонны, и состав букета может меняться. Поэтому снимайте то, что магазин действительно собирает, и не перенасыщайте цвет при обработке: розовый не должен превращаться в красный. Если у вас есть правило замены цветов на равноценные, скажите об этом рядом с карточкой, а не мелким шрифтом в конце оформления заказа.
Если главное изображение меняется по сезону, заранее решите, кто и когда его обновляет. Тюльпановый баннер в октябре выглядит как заброшенный сайт. Убедитесь также, что у магазина есть право использовать каждое фото: снимки от фотографа и от поставщика могут иметь разные условия.
Технические детали, которые влияют на первый экран
- Подготовьте отдельную вертикальную обрезку для телефона: на узком экране горизонтальный кадр режется, и букет может уйти за край.
- Не загружайте оригинал с камеры. Главное изображение грузится первым, поэтому сожмите его и подготовьте несколько размеров; форматы WebP или AVIF используйте с запасным JPEG.
- Вместо слайдера из пяти кадров лучше один сильный: следующие кадры многие посетители не дожидаются.
- Задайте блоку фиксированные пропорции, чтобы страница не «прыгала» во время загрузки.
- Альтернативный текст описывает содержимое: «Букет из розовых пионов и эустомы в крафтовой упаковке», а не набор запросов.
Проверочный список перед публикацией
- На изображении виден товар, а не только атмосфера.
- Букет есть в каталоге, и его можно заказать в пару кликов.
- Подпись содержит название, состав и размер.
- Заголовок и кнопка читаются на телефоне без увеличения.
- Есть вертикальная версия кадра, и букет в ней не обрезан.
- Файл сжат, а страница не смещается при загрузке.
- Альтернативный текст описывает то, что на фото.
- Назначен ответственный за сезонную замену картинки.
- У магазина есть право использовать это изображение.
