Дизайн — статьи о сайтах
На сайтах металлообработки первый экран часто занимают искры, абстрактные шестерни или стоковый сварщик в маске. Выглядит эффектно, но не отвечает на главный вопрос посетителя: делают ли здесь именно ту деталь, которая ему нужна, и на каком оборудовании. Разберём, как выбрать изображение под эту задачу.
Что картинка должна сообщить за несколько секунд
Технолог или снабженец приходит с конкретной задачей: резка, гибка, токарная обработка, сварка узлов. Главное изображение должно показать три вещи: вид работ, тип изделия и то, что производство настоящее. Если картинка этого не говорит, человеку придётся искать ответ в тексте, а многие просто откроют сайт следующего подрядчика.
Деталь, станок, цех, визуализация или сток: что подойдёт
- Готовая деталь крупным планом. Лучший вариант для страниц услуг: видны кромка, гиб, шов, покрытие. Сложность в бликах на металле, поэтому нужен продуманный свет и спокойный фон.
- Станок в работе. Подтверждает наличие оборудования. Годится для главной и страницы о производстве, но без понятного изделия в кадре говорит мало.
- Цех общим планом. Показывает масштаб, но на экране телефона превращается в серую массу. Лучше разместить ниже первого экрана.
- 3D-модель или чертёж. Уместны, если изделие ещё не выпускалось или снять его нельзя. Подпишите, что это модель, и добавьте рядом фото реальной детали.
- Стоковое фото. Самый слабый вариант: такие кадры встречаются у конкурентов, а станки на них не ваши. Допустимо в общих разделах вроде «Вакансии».
Условный пример: страница «Резка и гибка листового металла»
Представим гипотетический первый экран. Слева заголовок «Резка и гибка листового металла по вашим чертежам». Под ним строка с реальными параметрами: марки металла, максимальные размеры листа и толщина (подставляются данные вашего оборудования). Затем кнопка «Отправить чертёж на расчёт». Справа фото: гнутый стальной кронштейн на светлом столе, позади него размытый листогибочный пресс. Подпись: «Кронштейн, сталь, лазерная резка и гибка».
Здесь изделие понятно сразу, процесс угадывается по фону, подпись конкретна, а кнопка соответствует привычному действию заказчика. Замените фото на абстрактные искры, и непонятно, о резке, сварке или покраске речь.
Как подготовить кадр и файл
- Оставьте в кадре свободное место под заголовок или обрежьте картинку так, чтобы текст не лежал на детали.
- Сделайте отдельную обрезку для телефона, например квадратную или 4:5, чтобы деталь не уходила за край.
- Не вшивайте текст в изображение: он не масштабируется, плохо читается на малом экране и не воспринимается поисковыми системами как текст страницы.
- Сожмите файл и проверьте загрузку через мобильный интернет. Большая фотография в полном размере с камеры замедлит первый экран.
- Заполните alt по сути: «Гнутый стальной кронштейн после лазерной резки», а не «фото1».
- Видео в фоне утяжеляет страницу и на телефонах может не запускаться автоматически. Если берёте видео, задайте статичный кадр-заставку.
Что согласовать на производстве перед съёмкой
Уберите со станка и стола лишнее: стружку, маркеры, посторонние детали. Если в кадре люди, заранее договоритесь с ними и покажите работу так, как она организована у вас на самом деле. Если изделие или чертёж принадлежат заказчику, уточните, можно ли его публиковать. Иначе безопаснее снять собственный образец.
Проверочный список перед публикацией
- По картинке и подписи без чтения текста понятно, какие работы выполняются.
- В кадре реальная деталь или реальное оборудование предприятия.
- Изображение не повторяет кадры конкурентов и не выглядит как сток.
- На телефоне деталь видна целиком и не перекрыта текстом.
- Файл сжат, а страница открывается без долгого ожидания.
- Прописан осмысленный alt, текст не вшит в картинку.
- Рядом с изображением есть действие: кнопка расчёта или загрузка чертежа.
- Согласованы публикация изделия и присутствие людей в кадре.
