Дизайн — статьи о сайтах
Большая картинка на первом экране — первое, что видит человек, перешедший на сайт кафе. Это не украшение: за пару секунд она должна ответить на вопрос «мне сюда?». Ниже — как выбрать материал для неё и что проверить перед публикацией.
Какую задачу решает картинка на первом экране
Посетитель сайта кафе обычно спрашивает себя о конкретном: можно ли зайти на обед, подходит ли место для встречи, чем здесь кормят. Поэтому сначала определите одну задачу кадра. Показать фирменное блюдо? Передать атмосферу зала? Объяснить формат: завтраки, доставка, банкеты? Если пытаться решить всё сразу, получится неразборчивый коллаж, который не отвечает ни на один вопрос.
Блюдо, интерьер или люди: что поставить в первый кадр
- Блюдо крупным планом подходит, если вы делаете ставку на кухню или доставку и у вас есть узнаваемая позиция. Важно, чтобы блюдо действительно было в меню.
- Интерьер работает там, где гость выбирает место: ужин, встреча, праздник. Снимайте зал при дневном или вечернем свете, с живыми деталями, а не пустым после уборки.
- Люди и процесс (бариста за стойкой, повар у печи) хороши для небольших авторских заведений: кадр показывает, кто здесь готовит.
Избегайте слайдера из пяти кадров на первом экране. Он переключается, пока человек читает, и посетитель, как правило, успевает увидеть один-два кадра. Выберите самый сильный, а остальное разместите ниже: галерея зала, блок «Популярные блюда».
Свои фотографии или стоковые: что честнее и надёжнее
Чужая тарелка со стока создаёт ожидание, которое гость не найдёт в зале. Расхождение между сайтом и реальностью чувствуется сразу и бьёт по доверию. Свои снимки лучше, даже скромные: чистая посуда, естественный свет у окна, без вспышки, блюдо в той подаче, в которой его принесут. Если фотографа нет, снимайте на смартфон днём, сделайте десятки кадров и выберите один. Стоки допустимы для фоновых декоративных элементов, но не для еды и зала.
Видео на фоне выглядит эффектно, но весит много, плохо грузится на мобильном интернете и отвлекает от текста. Для кафе надёжнее статичный кадр.
Как уместить текст и кнопки поверх фото: условный пример
Представим страницу кофейни с завтраками (пример вымышленный). Фон: круассан и чашка на деревянном столе у окна, а справа в кадре свободное пространство. Поверх слева на тёмной полупрозрачной подложке размещены:
- заголовок «Кофейня и завтраки у метро «Пример»»;
- строка «Ежедневно с 8 до 22, завтраки до 12»;
- кнопки «Смотреть меню» и «Как добраться».
Здесь кадр отвечает на вопрос «что за место», текст — «когда и где», а кнопки ведут к двум самым частым действиям. Заранее оставьте в кадре спокойную зону под текст, иначе надпись затеряется среди деталей. Не вставляйте адрес и часы работы в саму картинку: на телефоне мелкий шрифт не прочитать, а номер или адрес нельзя скопировать.
Вес файла и мобильный экран: что проверить технически
Меню на сайте кафе часто открывают с телефона на улице, при слабом интернете. Тяжёлое фото заставит смотреть на пустой экран. Сделайте для компьютера версию шириной около 1600–1920 пикселей, сожмите JPEG с разумным качеством и проверьте итоговый размер. Для телефонов подготовьте отдельный, меньший файл (подключается через media queries или srcset). Заодно настройте кадрирование: на вертикальном экране боковые части обрежутся, и блюдо не должно оказаться за краем.
Проверочный список перед публикацией
- Кадр показывает то, что гость реально получит в кафе.
- На первом экране один основной кадр, без автоматической смены.
- В кадре есть свободная зона, текст читается на фоне.
- Название, часы работы и ключевая кнопка набраны текстом, а не вшиты в картинку.
- Для мобильных устройств есть облегчённая версия файла.
- На телефоне блюдо или главный объект не обрезан.
- У изображения задан понятный alt-текст, например «Зал кофейни с окнами на улицу».
- Страница открывается без долгого ожидания при медленном соединении.
