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