Сайт некоммерческой организации
Мы рады, что ещё один благотворительный фонд обзавёлся собственным сайтом. Как обычно бывает, такие организации крайне нуждаются в интернет-присутствии, но часто ограничены в ресурсах. Однако если украинским волонтёрам под силу почти всё, то что тогда говорить об айтишниках? Пока благотворительность двигает страну, мы двигаем благотворительность. А конечной точкой нашего маршрута стал аккуратный и привлекательный сайт на платформе WordPress.
О проекте и задаче
История сотрудничества с благотворительным фондом «Rishuchi» началась с довольно обыденной задачи — доработать сайт, начатый собственными силами волонтеров на простом конструкторе . Но потом дизайн, вписанный в , не оправдал ожиданий клиента, тем более накануне ребрендинга. Такова она, цена за простоту использования платформы без кода. Всё дело в том, что классический редактор не позволяет изменять шаблон, поэтому персонализировать сайт на WIX довольно сложно. Тогда мы предложили клиенту заложить сайт на более взрослую технологию WordPress, которая имеет более широкие возможности для настройки готовых тем.
Итак, сайт организации должен был стать приятным местом для знакомства с командой и деятельностью волонтеров и, конечно, для финансовой поддержки благотворительных инициатив. Ожидаемый результат — это простой, удобный и человечный сайт в новом фирменном стиле фонда:
Читайте также:
Разработка лендинга для сбора донатовВёрстка сайта
Благотворительным фондам с ограниченным бюджетом совсем не обязательно идти на компромисс по разработке функционального и привлекательного сайта. Каталог WordPress предлагает не только множество бесплатных тем, но и специальные плагины-конструкторы страниц с готовыми шаблонами и виджетами. За основу для нашего сайта мы взяли одну из таких , предложенную плагином :
Дизайн и структура сайта
Небольшая ремарка: команду благотворительного фонда составляют сугубо творческие люди — столичные фото- и видеографы, которые начали освещать свою деятельность в через глубокие фотографии и исчерпывающие видеоотчеты. Поэтому для волонтёров было важно, чтобы Главная страница сайта встречала пользователей фоновым видео актуального благотворительного проекта. Сейчас это видеокадры старой теплицы школы-интерната, нуждающейся в донатах на восстановление после российских обстрелов.
Меню навигации облегчает доступ к контактам и главным разделам сайта, а также дублирует кнопку с призывом задонатить:
Второй экран конкретизирует деятельность организации в виде лаконичных карточек, которые после наведения курсора могут рассказать больше.
Надо сказать, что главная страница часто представляет собой сокращённую версию всего сайта. Так, соответствующая кнопка в блоке «Кто мы» позволяет продолжить знакомство с фондом на отдельной странице О нас. Она, в свою очередь, содержит краткую справку о фонде и его миссии, а также иллюстрирует его историю в виде небольшой хроники. Далее страница знакомит пользователей с целями фонда и людьми, ежедневно работающими для их достижения:
Информация о деятельности Решительных представлена в виде структурированного блока и цифр организации. Отсюда можно попасть на страницу Проекты, имеющую вид списка благотворительных инициатив, которые можно легко отфильтровать по направлению. Здесь же содержится мини-блок «Другие проекты» и виджет-напоминание о финансовой поддержке. Каждая карточка в свою очередь переносит пользователя на отдельную страницу с описанием, фото и видео проекта, который можно прокомментировать и распространить в социальных сетях:
Главная страница продолжает рассказывать о благотворительных планах фонда. Так, в следующем блоке мы решили привлечь дополнительное внимание к насущному проекту, реализация которого требует значительных средств. Для этого мы использовали фото воспитанников школы-интерната, для учебных нужд которых организован сбор; структурированный текст об особенностях проекта и дополнительные ссылки на документ и видеоролик с презентацией:
Следующая остановка на пути пользователя — компактный блок, который знакомит с миссией благотворительной организации, «цитирует» её сооснователей и иллюстрирует гуманитарное направление деятельности. Следующий блок раскрывает работу фонда: очерчивает конкретные проекты и позволяет узнать больше о каждом из них на отдельной странице:
Учитывая, что волонтёры активно освещают свою деятельность в Instagram и не имеют времени на наполнение сайта, мы отказались от новостной страницы и реализовали соответствующий блок со ссылкой на аккаунт фонда:
В конце Главной страницы находится блок с призывом к сотрудничеству и кнопкой, переносящей пользователя на страницу Контакты. Последняя также включает в себя контактную форму для предложений о сотрудничестве либо запросов о помощи:
Завершающий аккорд сайта – это «собранный» и выразительный футер с привычными лого, контактами, ссылками на внутренние страницы и социальные сети, а также призывом и кнопкой «Помочь»:
Адаптивность сайта
Мы не можем игнорировать тот факт, что 70% украинцев пользуются интернетом с мобильных устройств. И поэтому позаботились об адаптивности темы WordPress не только под ПК и ноутбуки, но и смартфоны и планшеты:
Функциональность
Настройка внешнего вида сайта была бы гораздо сложнее без специальных дополнений WordPress — плагинов, а именно визуального конструктора Elementor, конструктора полей Advanced Custom Fields и контактных форм Contact Form 7.
Далее мы объединили привлекательный дизайн с технической функциональностью, в частности:
- защитили сайт от спама благодаря плагину Akismet Anti-spam,
- ускорили загрузку страниц через технологию кэширования WP Super Cache,
- оптимизировали ресурс при помощи плагина Yoast SEO, чтобы повысить его видимость в Google.
Наполнение контентом
Если фирменный дизайн сайта — это лицо фонда, то контент является органическим продолжением миссии волонтёров: быть решительными в своей доброте. Каждый заголовок и раздел страницы транслирует ценности организации через уникальные фото, видео и текст. Весь контент представлен просто, доступно и искренне, поэтому способен вызвать доверие и интерес потенциальных партнёров.
Результат
Сайт благотворительного фонда «Rishuchi» — это отличный пример бюджетной разработки на WordPress. Аккуратный адаптивный макет, вписанный в фирменный стиль волонтерской организации и наполненный уникальными фотографиями и текстами, призван объединить усилия украинцев для украинцев: аккумулировать средства на важные благотворительные проекты и расширять круг партнёров для организации различных благотворительных мероприятий.
Комментарии