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