Дизайн — статьи о сайтах
Главное изображение первым попадается на глаза тому, кто выбирает, кому доверить фуршет, банкет или доставку обедов в офис. Меню он ещё не читал. Он оценивает, тот ли это уровень, формат и масштаб. Поэтому выбор материала для первого экрана входит в описание услуги, а вкус тут вторичен.
Что изображение должно сообщить за первые секунды
Посетитель должен понять три вещи: чем вы занимаетесь (выездное обслуживание, фуршеты, банкеты, корпоративное питание), для какого события это подходит и как подача выглядит в реальности. Крупный план одного блюда хорош для ресторана. Кейтеринг же продаёт организацию целиком: стол, линию раздачи, посуду, работу персонала. Если на фото только тарталетка, масштаб остаётся неясным. Надёжнее кадр, где блюда видны вместе с контекстом: накрытый стол, часть зала, официант, гости.
Собственные фотографии или стоковые: как решить
Собственные снимки показывают то, что получит заказчик: вашу посуду, форму, сервировку. Если фото красивее реальной подачи, расхождение обернётся спорами при приёмке заказа.
Стоковые кадры выглядят безлико. Часто на них чужой интерьер и блюда, которых нет в вашем меню. Если съёмки пока нет, используйте сток временно и выбирайте нейтральные сцены без конкретных блюд. Затем заменяйте его своим материалом.
Для съёмки лучше искать фотографа, который работает с едой и событиями. Снимать можно на реальном мероприятии или на постановочной площадке с вашей посудой. Заранее письменно уточните, на каких условиях вы можете использовать кадры на сайте. Цвета еды оставляйте близкими к настоящим: сильная обработка быстро выдаёт себя.
Видео и слайдер вместо одного кадра
Фоновое видео тяжёлое и на мобильном интернете может загружаться дольше, чем человек готов ждать. Слайдер из пяти фотографий обычно работает так: первый кадр увидят все, остальные почти никто. Для первого экрана лучше один сильный кадр, а остальные снимки вынести в галерею ниже, с подписями о типе мероприятия.
Условный пример первого экрана
Допустим, страница называется «Фуршет для корпоративных мероприятий». Слева заголовок, одна строка о формате («от небольшой встречи до приёма на несколько десятков гостей») и кнопка «Рассчитать фуршет». Справа или фоном широкая фотография: фуршетный стол в офисном пространстве, на переднем плане канапе, позади размытая фигура сотрудника в форме. Блюда на снимке должны быть из реального предложения.
Под текстом тёмная полупрозрачная подложка, чтобы буквы читались на любом фоне. Для мобильной версии кадр обрезается так, чтобы стол остался в центре. Тогда на узком экране видно главное, а не пустую стену.
Технические требования к файлу
- Ширина оригинала около 1920 пикселей, сжатие без заметных артефактов на еде.
- Отдельные уменьшенные версии для телефонов, подключаемые через srcset.
- JPEG как основной формат. WebP можно добавить как дополнительный, но с запасным JPEG: не все браузеры его поддерживают.
- Описательный alt-текст: «Фуршетный стол с канапе на корпоративном мероприятии», а не «image1».
- Свободная область в композиции под заголовок, чтобы текст не лежал на пёстрой сервировке.
Проверочный список перед публикацией
- По кадру понятно, что это кейтеринг, а не ресторанный зал.
- Блюда и сервировка соответствуют тому, что вы реально предлагаете.
- Есть право использовать снимок на сайте.
- Заголовок и кнопка читаются на всех размерах экрана.
- На телефоне при обычном мобильном соединении страница открывается без долгого ожидания картинки.
- При обрезке на мобильном главный объект остаётся в кадре.
- Остальные фотографии вынесены в галерею и не конкурируют за первый экран.
