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