Дизайн — статьи о сайтах
На сайте производства фотографии работают как часть технического описания: по ним заказчик оценивает, что вы делаете, на каком оборудовании и насколько аккуратно. Чаще всего проблема не в качестве снимков, а в том, что они свалены в одну галерею «Фото» без порядка и подписей. Ниже о том, как разложить материал по смыслу.
Какой вопрос покупателя закрывает каждое фото
Перед загрузкой снимка полезно сформулировать, на что он отвечает. У закупщика или технолога обычно три вопроса: «что именно вы изготавливаете», «как это делается» и «можно ли проверить, что вы делаете то, что заявляете». Снимок, который не отвечает ни на один из них (например, общий план здания или стоковые рукопожатия), лучше не публиковать: он занимает место и замедляет страницу.
Как разделить снимки на группы
Практичная схема из четырёх групп, у каждой своё место на сайте:
- Продукция. Карточки товаров и страницы направлений. Нейтральный фон, один масштабный ориентир (рука, линейка), 2–4 ракурса, крупный план соединения, покрытия или маркировки.
- Процесс и оборудование. Страницы услуг и раздел «О производстве». Станок за работой, контроль размеров, упаковка и отгрузка.
- Выполненные заказы. Отдельные страницы или блоки с описанием: что заказали, из какого материала, какой тираж.
- Документы и подтверждения. Сертификаты, лицензии, протоколы испытаний. Их лучше давать в читаемом виде вместе с текстовым пояснением, что именно они подтверждают.
Не смешивайте группы в одной галерее: человек, ищущий готовое изделие, не должен пролистывать двадцать снимков цеха.
Пример: фрагмент страницы «Лазерная резка листового металла»
Данные ниже условные, это только схема.
- Первый экран: заголовок, одна строка о том, с какими материалами и толщинами вы работаете, и главное фото готовой детали с рукой для масштаба.
- Блок «Что мы режем»: три-четыре снимка деталей из разных материалов. Подпись к каждому в формате «Кронштейн, сталь, толщина 3 мм, партия 500 шт.», а не «Наша работа».
- Блок «Как мы работаем»: фото станка и контрольного стола, под ним абзац о том, какие размеры проверяются и чем.
- Блок «Примеры заказов»: две-три карточки: фото, задача, материал, срок. Без выдуманных отзывов, только факты, которые вы можете подтвердить.
- Рядом с формой заявки: напоминание, что можно приложить чертёж, и список форматов файлов.
Так каждый снимок стоит рядом с текстом, который его объясняет, а кнопка заявки оказывается там, где человек уже получил ответы.
Как подготовить файлы, чтобы страница не тормозила
Страницы производителей часто открывают с мобильного интернета на площадке или в командировке, поэтому тяжёлые снимки заметно мешают.
- Не загружайте оригиналы с камеры. Для ширины блока на сайте достаточно файла в пределах 1600–2000 пикселей по длинной стороне.
- Для фотографий используйте JPEG, а WebP добавляйте с запасным JPEG для старых браузеров. Для схем с мелким текстом подойдёт PNG.
- Задавайте размеры изображений в вёрстке, чтобы текст не «прыгал» при загрузке.
- Снимки ниже первого экрана подгружайте отложенно. Первый экран так делать не нужно.
- Называйте файлы по смыслу (kronshtejn-stal-3mm.jpg) и заполняйте alt-описание кратко и по делу: что изображено.
Что учесть при съёмке в цеху
Перед съёмкой решите, что не должно попасть в кадр: чертежи заказчиков, экраны с рабочими данными, маркировка чужих изделий. Согласуйте это с технологом или службой безопасности. Если в кадре сотрудники, договоритесь об этом с ними заранее. Свет и порядок на рабочем месте важнее дорогой камеры: уберите лишнее, протрите деталь, снимайте при ровном освещении. Для единообразия сделайте один фон и один набор ракурсов для всех позиций каталога.
Проверочный список перед публикацией
- Каждый снимок отвечает на понятный вопрос покупателя.
- Продукция, процесс, заказы и документы лежат в разных разделах.
- У изделий есть подпись с материалом, размером или назначением.
- На фото с продукцией виден масштаб.
- Вес файлов уменьшен, главное изображение первого экрана не подгружается отложенно.
- У всех изображений есть осмысленные имя файла и alt.
- В кадр не попали чужие чертежи и данные.
- Документы читаются на телефоне и сопровождены пояснением.
- Страница проверена на мобильном устройстве со средней скоростью соединения.
