Дизайн — статьи о сайтах
Человек попадает на сайт общественной организации по ссылке из соцсети или по совету знакомого. За несколько секунд он решает, туда ли попал, можно ли этому месту доверять и что здесь делать. Главное изображение на первом экране участвует в этом решении наравне с заголовком. Поэтому его материал стоит выбирать осознанно, а не по принципу «что красиво смотрится».
Что изображение должно объяснить за первые секунды
Посетителю нужно понять три вещи: чем занимается организация, где она работает и что можно сделать прямо сейчас (помочь, прийти, узнать подробности). Если картинка не отвечает хотя бы на первый вопрос, всю нагрузку несёт заголовок. Рукопожатия, закат над полем и «команда в офисе» из фотобанка ничего не сообщают о вашей работе. Сначала сформулируйте, что именно должен увидеть человек, и только потом подбирайте материал.
Своя фотография, фотобанк, иллюстрация, видео или текст без картинки
- Собственная фотография. Лучший вариант, если на ней видна реальная деятельность: занятие, акция, склад с собранными вещами, мастерская. Риски: неудачный свет, случайный кадр, лишние люди на заднем плане.
- Фотобанк. Подходит для абстрактных тем, но узнаваемые постановочные снимки быстро выдают шаблон. Для местной организации это скорее минус. Обязательно проверьте условия лицензии: можно ли использовать снимок на сайте и в коммерческом, и в некоммерческом контексте.
- Иллюстрация. Выручает, когда показывать людей нельзя или неэтично, а тема сложная. Важно выдержать одну стилистику на всём сайте.
- Видеофон. Выглядит эффектно, но весит много, медленно грузится на мобильном интернете и отвлекает от текста. Для организации с небольшим бюджетом это редко оправдано.
- Только текст и кнопка. Чёткая формулировка миссии с понятным действием честнее случайной картинки.
Люди в кадре: как не навредить тем, о ком вы рассказываете
Если на снимке подопечные, волонтёры или дети, сначала решите, есть ли у вас согласие на публикацию. Для несовершеннолетних его дают родители или законные представители. Формулировки и порядок оформления уточните у юриста. С точки зрения сайта выход часто в другом ракурсе: руки, общий план, силуэты, детали обстановки. Не ставьте на главный экран образ «жертвы». Лучше показывать действие: человека, которому помогают, вместе с тем, кто помогает. Подписи и описания к снимкам должны быть правдивыми: нельзя называть «нашим подопечным» человека с фотобанковского снимка.
Технические детали, из-за которых хороший снимок портится
- На узком экране смартфона широкий кадр обрезается по краям. Важное (лицо, предмет, вход в здание) держите ближе к центру и проверяйте при ширине экрана 320–400 px.
- Текст поверх фото читается только при достаточном контрасте. Добавьте полупрозрачную подложку или затемнение, а не надеясь на светлый участок снимка.
- Сжимайте файл перед загрузкой. Разумный ориентир для главного снимка — несколько сотен килобайт, а не несколько мегабайт.
- Не растягивайте маленькое фото на всю ширину. Для широких мониторов берите исходник шириной около 1600–1920 px.
- Заполните alt-текст коротким описанием того, что на снимке. Он нужен тем, кто пользуется программой чтения с экрана, и тем, у кого картинка не загрузилась.
Условный пример: первый экран сайта приюта для кошек
Представим вымышленную организацию — приют для бездомных кошек в небольшом городе. Слабый вариант: стоковый котёнок на белом фоне и заголовок «Мы делаем мир добрее». Непонятно, где приют, чем он занят и что предлагает.
Сильнее такой вариант. На фоне — собственный снимок: волонтёр кормит кошек в вольере, виден вход в помещение. Заголовок: «Приют для кошек в вашем городе: помогаем найти дом». Подзаголовок: «Приходите познакомиться с питомцами и узнать, чем можно помочь». Под ним две кнопки: «Взять питомца» и «Стать волонтёром». Фото подготовлено так, чтобы на смартфоне в кадре остались руки волонтёра и морда кошки. Темная подложка под текстом обеспечивает контраст. Alt-текст: «Волонтёр кормит кошек в вольере приюта».
Проверочный список перед публикацией
- По снимку без заголовка можно понять, чем занимается организация?
- Есть согласие на публикацию всех узнаваемых людей, а у фотобанковских снимков проверена лицензия?
- Снимок не представляет людей только как объект жалости?
- Главный объект остаётся в кадре на экране телефона?
- Текст поверх изображения читается без напряжения?
- Файл сжат, а страница открывается без долгого ожидания на мобильном соединении?
- Заполнен alt-текст, а рядом с изображением есть понятное первое действие для посетителя?
