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