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