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