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