Дизайн — статьи о сайтах
Посетитель сайта автосервиса не может зайти в бокс и посмотреть, как там устроена работа. Фотографии заменяют ему этот осмотр. Они показывают, есть ли подъёмники, чисто ли в зоне ремонта, как выглядят снятые детали. Но если все снимки свалены в одну галерею на 80 кадров без подписей, пользы от них немного. Ниже описано, как их разложить.
Какие снимки нужны автосервису
Полезно разделить фотографии на четыре группы, у каждой своя задача:
- Место: фасад, вход, вывеска, парковка, зона ожидания. По ним человек находит вас на месте и понимает, куда ехать.
- Оборудование и условия: подъёмники, стенд сход-развала, диагностический комплект, склад масел и запчастей.
- Процесс работы: этапы конкретного ремонта, снятые узлы, замеры, новые детали перед установкой.
- Люди: мастера и приёмщик. Подпишите имя и должность, чтобы клиент знал, с кем будет говорить.
Фото из банков изображений в первых трёх группах почти бесполезны: посетитель видит чужой сервис и понимает это. Снимки с телефона в хорошем свете обычно честнее и убедительнее.
Где размещать: по страницам услуг, а не в общей галерее
Общий раздел «Фотогалерея» оставьте для атмосферы: помещение, команда. Снимки работ лучше размещать на странице той услуги, к которой они относятся. Человек, читающий про замену ремня ГРМ, хочет увидеть именно ГРМ, а не тормозные колодки и шиномонтаж.
Если работ много, на странице услуги покажите 3–6 лучших кадров, а полный набор вынесите в отдельный раздел, например «Примеры работ», с фильтром по типу услуги или марке. Фильтр нужен, чтобы владелец Octavia не листал кадры с грузовиками.
Условный пример: блок на странице «Замена ремня ГРМ»
Под описанием услуги и перечнем того, что входит в работу, разместите блок «Как проходит работа» из четырёх кадров. Подписи нужны в каждом:
- Приёмка: осмотр автомобиля и согласование списка работ с клиентом.
- Снятая защита ремня: видны ролики и натяжитель, которые меняют вместе с ремнём.
- Новый комплект перед установкой, на упаковке виден артикул.
- Установленный узел после проверки меток и возврат старых деталей клиенту.
Рядом с блоком поставьте кнопку или форму записи. Человек, увидевший процесс, готов к следующему шагу, и ему не нужно возвращаться наверх страницы.
Подписи, alt и имена файлов
Подпись под снимком отвечает на вопрос «что здесь важно». Фраза «Наш бокс» ничего не сообщает, а «Подъёмник на 4 тонны, в боксе работают два мастера» сообщает.
В атрибуте alt коротко опишите содержание кадра: «Замена ремня ГРМ, снятая защитная крышка». Это помогает тем, у кого картинки не загрузились или кто пользуется программой экранного чтения. Не набивайте alt перечнем запросов вроде «ремонт авто дёшево Москва». Это не читается и не помогает посетителю.
Имена файлов задавайте осмысленно и латиницей, например grm-zamena-01.jpg, а не IMG_4382.jpg. Так проще искать нужный снимок в папке, когда сайт редактирует не один человек.
Размер и вес: чтобы страница открывалась быстро
Снимок с современного телефона весит несколько мегабайт. Если выложить его как есть, страница с шестью кадрами будет загружаться долго, особенно у человека, который смотрит сайт с телефона по мобильному интернету прямо в пробке. Перед загрузкой:
- уменьшите ширину основного снимка до 800–1000 пикселей;
- для сетки сделайте отдельные миниатюры шириной 200–300 пикселей, которые по клику открывают крупный вариант;
- сохраняйте фотографии в JPEG с качеством около 70–80%, на глаз разница с оригиналом обычно незаметна;
- задавайте ширину и высоту в вёрстке, чтобы текст не «прыгал» при загрузке картинок.
Если макет адаптивный, проверьте, что на узком экране кадры в сетке выстраиваются по одному или по два, а подписи не обрезаются.
Что убрать с фотографий перед публикацией
На снимках работ часто попадают в кадр номера автомобилей, документы на столе, лица клиентов. Решите заранее, как с этим поступать: закрывать номера, снимать детали без владельца в кадре, согласовывать публикацию с клиентом. Договоритесь об этом внутри сервиса, чтобы мастера знали правило, когда снимают рабочий процесс.
Проверочный список
- Снимки разделены на места, оборудование, процесс и людей.
- Фото работ размещены на страницах соответствующих услуг.
- У каждого кадра есть подпись, объясняющая, что на нём важно.
- Заполнены alt и осмысленные имена файлов.
- Оригиналы уменьшены, для сетки сделаны миниатюры.
- Рядом с блоком фото есть кнопка записи или телефон.
- Номера и личные данные на снимках закрыты или согласованы.
- Страница проверена на телефоне: сетка, подписи и скорость загрузки.
