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