Дизайн — статьи о сайтах
Фотографии убеждают нового посетителя лучше, чем описание «стильные стрижки в атмосферном месте». Но если выложить все снимки одной лентой, человек в ней теряется и уходит, так и не найдя нужного. Ниже разобрано, как разложить фото по разделам, чтобы они помогали выбрать мастера и записаться.
Какие вопросы посетитель решает по фотографиям
Тот, кто выбирает барбершоп, обычно ищет ответы на три вопроса: что мне здесь сделают, кто будет это делать и как здесь выглядит. Отсюда три группы снимков: работы, мастера и пространство. Если смешать их в одной галерее, на каждый вопрос придётся искать ответ среди чужих кадров. Фото с мероприятий и праздников лучше вынести в отдельный необязательный раздел. На главную и на страницы услуг их ставить не нужно.
Как разделить галерею работ
Самый понятный принцип деления — по типу услуги: классическая стрижка, фейд, стрижка машинкой, оформление бороды, бритьё опасной бритвой, детские стрижки. Так человек сразу идёт к тому, что ему нужно. Мастера можно использовать как второй признак: у каждой карточки должна быть подпись с его именем.
Для стрижки один ракурс почти ничего не показывает. Снимайте работу спереди, сбоку и сзади, при одинаковом свете и на нейтральном фоне. Если вы публикуете пары «до и после» или лица клиентов, заранее договоритесь об этом с самим клиентом. Если согласия нет, снимайте со спины или крупным планом затылок и виски.
Пример фрагмента страницы «Стрижки»
Условная структура страницы, которую можно показать веб-разработчику как образец:
- Заголовок «Мужские стрижки» и две строки текста о том, какие виды стрижек делают в барбершопе.
- Ссылки-фильтры над сеткой: «Все», «Классика», «Фейд», «Под машинку», «Борода». Выбранный раздел выделен цветом.
- Сетка карточек: три в ряд на компьютере, две на планшете, одна на телефоне.
- Карточка: фото в одинаковой пропорции, например 4:3; подпись «Фейд с длинной чёлкой — мастер Андрей»; ссылка «Записаться к Андрею», которая открывает форму с уже выбранным мастером.
- Под сеткой первые 12 работ и кнопка «Показать ещё». Подгружать все снимки сразу не нужно.
Имена и названия здесь условные. Главное, что у каждого снимка есть подпись и следующее действие: человек увидел стрижку и может записаться к тому, кто её сделал.
Фото мастеров и интерьера
Портреты мастеров делайте в одном стиле: одинаковый размер, похожий фон, рабочая обстановка. Рядом с фото укажите имя, специализацию и стаж, если он вам известен и вы готовы за него отвечать. Ниже разместите 4–6 работ именно этого мастера, чтобы стиль можно было оценить.
Для интерьера хватит 5–8 кадров: вход, зона ожидания, рабочие кресла, общий вид с порога. Снимок фасада и входа лучше добавить на страницу контактов. Новому клиенту так проще найти дверь, особенно если вход со двора или с табличкой, которую легко пропустить.
Размеры файлов, подписи и мобильные экраны
- Вес. Не загружайте снимки прямо с фотоаппарата: файл в несколько мегабайт на телефоне с мобильным интернетом открывается долго. Перед загрузкой уменьшите изображение и сохраните его в JPEG.
- Два размера. Для сетки нужны превью шириной порядка 600 пикселей, для просмотра в увеличенном виде — 1200–1600. Для ключевых кадров на экранах с высокой плотностью пикселей можно подготовить версии вдвое крупнее.
- Размеры в разметке. Если ширина и высота картинки заданы заранее, текст не будет прыгать при загрузке.
- Имена и описания. Название файла вида fade-andrey-side.jpg удобнее, чем IMG_4521.jpg. В описание изображения (атрибут alt) запишите, что на снимке: «Фейд с длинной чёлкой, вид сбоку». Оно помогает тем, кто пользуется программами экранного чтения, и показывается, если картинка не загрузилась. Влияние на позиции в поиске гарантировать нельзя.
- Слайдеры. Автоматическая прокрутка на главной не даёт рассмотреть кадр. Лучше один сильный снимок и ссылка на галерею.
- Текст на картинках. Цены и адрес не стоит вшивать в изображение: их нельзя выделить, скопировать и быстро обновить.
- Телефон. Проверьте, что галерею можно листать пальцем, а кнопка «Записаться» не прячется под снимком.
Проверочный список перед публикацией
- Работы, мастера и интерьер лежат в разных разделах.
- Работы разбиты по видам услуг, под каждым снимком есть подпись с названием стрижки и именем мастера.
- Стрижки показаны минимум с двух ракурсов.
- Согласие клиентов на публикацию лиц получено, и вы знаете, у кого оно есть.
- Рядом с работами есть ссылка на запись к нужному мастеру.
- Файлы уменьшены, и страница нормально открывается на телефоне.
- У каждого снимка есть осмысленное имя файла и описание.
- На странице контактов есть фото входа.
- Раз в несколько месяцев вы заменяете устаревшие кадры новыми.
