Сайт благотворительного фонда
Благотворительность в Украине становится трендом, что не может не радовать. Это видно даже по нашему портфолио, которое пополняется сайтами новых украинских фондов. И сегодня мы расскажем о благотворительной организации «Крылья Украины», которая родилась в прифронтовом Никополе и получила сайт в криворожской компании Webnauts.
Как рассказывать о своей благотворительности на веб-страницах, чтобы развивать культуру честности и донатов, читайте в кейсе благотворительного проекта «Крылья Украины».
О проекте
С начала полномасштабной войны Никополь подвергается постоянным обстрелам. В ответ на ракетный террор город не только демонстрирует невероятную стойкость, но и активизирует благотворительную деятельность. Ярким примером благотворительного движения Никополя стал благотворительный фонд «Крылья Украины», который с апреля 2022 года объединяет усилия волонтеров и взносы неравнодушных украинцев.
Более того, теперь благодаря сайту к поддержке Никопольщины может присоединиться кто угодно в мире. Для этого мы не только позаботились о защите онлайн-платежей, но и уникальном дизайне, в который заложили виджеты с прогрессом сбора средств и понятные отчёты об их использовании. Поскольку вместе с трендами на благотворительность растут и ожидания украинцев насчёт прозрачности, надёжности и ответственности фондов.
Дизайн, вдохновляющий донатить
UX/UI дизайн сайта для благотворительного фонда
Благотворительная деятельность онлайн предоставляет безграничные возможности для масштабирования помощи в Украине. Теперь отправить донат даже легче, чем совершить покупку в интернете. Поэтому задача дизайна — вдохновить людей на добро и устранить любые барьеры между действием и желанием помочь.
Для этого мы спроектировали современный и приятный сайт — уютную среду, где каждый мог бы легко приобщиться к благотворительному делу и чувствовать себя частью чего-то большего. Простой и воздушный дизайн оживляют размытые круги в цветах украинского флага, едва выигрывающие на фоне сайта. Такая ненавязчивая анимация добавляет динамики и привлекает внимание пользователей. Синий акцентный цвет кнопок, ссылок и других элементов интерфейса эвокирует ощущение доверия, уверенности и надёжности.
Структура сайта, или точки касания для укрепления доверия
Сайт благотворительного фонда «Крылья Украины» встречает пользователей актуальным проектом, нуждающимся в неотложной поддержке. Это образовательная платформа для украинцев «Занятые», позволяющая освоить и найти профессию взрослым украинцам, которые в этом нуждаются.
Кстати, лого благотворительной программы был разработан графическим дизайнером Webnauts. Основной логотип представляет собой комбинацию названия благотворительного проекта и маскота – стилистически видоизмененного персонажа фонда. Мы наделили логотип не только символичностью, но и адаптивностью к разным условиям использования — на устройствах, печатной рекламной продукции и т. п. Так, логотип может иметь сокращённый вариант без текстовой части, вертикальную либо горизонтальную ориентацию и различные цветовые решения в зависимости от яркости фона.
Удобная навигация в хедере ведет к разным разделам сайта, а кнопка «Поддержать фонд» открывает страницу с официальными реквизитами. Прокрутив главную страницу вниз, мы найдём лаконичный блок оплаты для быстрого доната через две самые популярные системы интернет-эквайринга.
О том, чем занимается фонд, рассказывает блок «Направления помощи фонда». Мы заключили большой объём контента в компактный аккордеон — список с содержимым, который можно свернуть и развернуть. Тонкие горизонтальные линии создают дополнительное ощущение пространства и стабильности, важные для сайта благотворительного фонда.
Блок с активными проектами представлен в виде карточек с прогресс-баром — индикатором, отражающим продвижение сбора средств в процентах. Этот элемент интерфейса позволяет пользователям не только отслеживать динамику благотворительных сборов в реальном времени, но и мотивировать на донат, чтобы приблизить достижение общей цели. Это даёт ощущение доверия к фонду и причастности к доброму делу.
Знакомство с командой усиливает доверие к благотворительной организации. Пользователям важно чувствовать, что по ту сторону экрана — реальные люди, которые конвертируют донаты в реальную помощь. Мы представили команду работников казалось бы в привычный, но в то же время интересный способ. Всё благодаря ховер-анимации, взаимодействие с которой создаёт чувство тёплого приветствия от каждого работника фонда.
Важной частью брендинга «Крылья Украины» является боевой Гусь, который олицетворяет ценности и повышает узнаваемость благотворительного фонда.
Моушн-дизайнер Webnauts вдохнула в него жизнь и создала с ним целую серию анимированных роликов.
Ценности фонда мы собрали в слайдер, округлые элементы которого подчёркивают атмосферу дружелюбия, открытости и безопасности.
Регулярные новости из жизни фонда укрепляют доверие не меньше, чем финансовые отчёты. Обычно это анонсы благотворительных акций и результаты работы фонда, воплощённые в реальные истории людей благодаря донатам украинцев. Это создаёт эмоциональную связь с аудиторией и дополняет сухие цифры отчётности, вдохновляющие доноров на новые добрые дела и благотворительные взносы. Главное — учитывать постоянное обновление контента, ведь как иначе люди узнают об активности и, главное, эффективности организации?
С точки зрения дизайна мы представили блок со статьями в виде карточек, содержащих фото, заголовок и дату публикации. От качества фотографий, меткости заголовков и актуальности новостей зависит то, нажмёт ли посетитель сайта кнопку «Все новости». Если да, то его ждёт простой в навигации блог с архивированием статей, каждая из которых представляет собой удобную с точки зрения читабельности страницу с возможностью поделиться, оставить комментарий и найти похожие материалы.
Для построения доверительных отношений с аудиторией контента с подачи самой благотворительной организации недостаточно. Для объективного подтверждения репутации фонда важно привести на сайте социальные доказательства, в том числе связи с партнёрами. Мы собрали логотипы компаний, организаций и медиа в горизонтальный список и приправили довольно типичный блок анимационным эффектом движущейся ленты.
Доверие интернет-пользователей формируется постепенно, поэтому мы строили этот фундамент блок за блоком. Если задача первых экранов — это заинтересовать в первые секунды и убедить посетителей остаться на сайте, задача блока с документами — развеять сомнения в компетентности фонда и побудить на конкретные действия.
Мы подготовили почву и донесли ценности фонда на визуальном языке — через графику, изображения, шрифты и анимации. А прежде чем вдохновить на благотворительный взнос — окончательно убедили людей в надёжности благотворительного фонда. Для этого мы реализовали минималистичный блок с документами, чтобы ничто не отвлекало внимания от важной информации.
Завершает сторителлинг аккуратный структурированный футер с эффективными кнопками, контактами фонда и активными ссылками на страницы сайта и соцсетей.
Корпоративная айдентика
Сегодня деятельность украинских организаций выходит далеко за пределы сбора благотворительных средств. Отточить репутацию, рождающуюся из доверия, фондам помогают маркетинговые инструменты. Ведь как иначе люди узнают об организации и услышат уникальный голос призыва к благотворительности? Бренд-маркетинг стал не только прерогативой бизнеса, но и мощным инструментом социальной и часто креативной коммуникации с донорами, что позволяет фондам не просто заявить о себе, а запомниться среди других организаций, сформировать эмоциональную связь с аудиторией и превращать неравнодушие на конкретные действия поддержки.
На третьем году полномасштабной войны современные фонды ищут уникальные пути побуждения сообщества к благотворительности: создают коллаборации и креативные медиапродукты, проводят мероприятия, розыгрыши и аукционы. Ключевую роль в воплощении и продвижении подобных инициатив играет дизайн, помогающий фондам транслировать свои ценности, побуждать бренды и инфлюэнсеров к сотрудничеству, привлекать как можно больше поддержки и эффективно добиваться благотворительных целей.
Так, дизайнеры Webnauts создали узнаваемый образ организации сначала в глазах пользователей, а затем — и в руках доноров. Элементы визуальной айдентики фонда — цветовая палитра, шрифты и фирменный персонаж – перенеслись со страниц сайта в осязаемую плоскость — корпоративный мерч. Теперь узнать фонд можно только в интернете, но и на улицах Никополя и других украинских городов. Всё благодаря практичным вещам с символикой фонда — бейсболкам, футболкам и худи.
Частью повседневной жизни работников, партнёров и благотворительного сообщества фонда может также стать офисная и сувенирная продукция, такие как чашки, стаканы для кофе, стикеры, блокноты, ручки и карандаши.
Каждый элемент дизайна – от айдентики до веб-сайта – работает на воплощение благотворительной миссии фонда «Крылья Украины». Дизайн-команда Webnauts создала уникальный образ организации и спроектировала грамотную структуру сайта, которая мотивирует людей на действия. Теперь дело за разработчиками, которым предстояло наделить каждый компонент интерфейса анимационным эффектом и конкретной функцией, чтобы желание добра и добрый поступок отделял всего лишь один клик.
Вёрстка страниц и реализация анимаций
Натяжка вёрстки на WordPress
Простые строки кода способны творить чудеса. И не только потому, что воплощают любые дизайнерские идеи, но и открывают безграничные возможности для благотворительности. Когда из-под руки дизайнера визуальная история фонда перебирается в онлайн-плоскость, рушатся любые барьеры между физическим и цифровым, потребностью и помощью, призывом и действием. Для этого достаточно превратить дизайн-макеты в HTML и CSS-код, окропить веб-страницы анимацией с помощью JavaScript и «натянуть» вёрстку на WordPress. Именно так, ведь несмотря на то, что популярная CMS имеет множество готовых тем, она также может служить платформой для абсолютно уникального сайта.
Анимация для сайта
Чтобы объединить неповторимый дизайн, увлекательную анимацию и незатейливый конструктор WordPress, мы применили ещё несколько технологий:
- базовый функционал JavaScript-библиотеки Native JS — для создания быстрого и динамичного веб-интерфейса;
- TypeScript-библиотека Splide — для реализации слайдера:
- JavaScript-библиотека GSAP — для анимации, в том числе ховер-эффектов, которые делают взаимодействие с элементами сайта более интересным. Например, кнопки «реагируют» на наведение курсора заливкой цвета, иконки соцсетей – ещё и изменением размера, а фотографии – появлением текстовых элементов.
Едва заметная плавная анимация фона была написана на чистом языке JavaScript.
Именно так родился удобный и привлекательный сайт «Крылья Украины», способный объединять людей в стремлении сделать этот мир лучше. Чтобы сайт был не только эффектным, но и эффективным, мы обеспечили его всеми необходимыми функциями, в том числе удобной админкой для управления контентом и безопасным эквайрингом для сбора благотворительных взносов.
Программирование сайта на WordPress и… успех благотворительных сборов
Это не просто игра слов, а чистая правда! Интуитивно понятный дизайн интерфейса, положенный на простую и гибкую платформу WordPress, напрямую влияет на эффективность сайта. А что такое эффективность для благотворительной организации? Закрытые сборы и реализованные благотворительные проекты.
Чтобы настроить сайт на успех, мы как следует настроили WordPress. Более того, даже кастомизировали систему под нужды благотворительной организации.
Создание сайта на WordPress путём кастомизации
Уникальный дизайн сайта требует уникальных веб-решений, даже если за его основу служит универсальная CMS. Но для разработчиков Webnauts нет ничего невозможного. Мы адаптировали стандартный сайт благотворительного фонда на WordPress и создали кастомные типы записей для некоторых разделов, такие как:
- Направления фонда
- Проекты фонда
- Отчёты фонда
Кастомные типы записей были написаны с помощью технологии Ajax, позволяющей отправлять запросы на сервер сайта в фоновом режиме. То есть с каждым щелчком пользователь видит обновленное содержимое той же страницы без процесса перезагрузки. Это наочно видно из пошагового заполнения заявки на помощь, когда содержимое страницы подгружается динамически, то есть незаметно для глаза:
С помощью плагина WordPress ACF (Advanced Custom Fields) мы добавили новые поля к экранам редактирования WordPress, в том числе для вышеупомянутого раздела сайта «Обратиться за помощью». Теперь владелец сайта может легко редактировать содержимое страниц без привлечения программистов:
В зависимости от направления фонда и правового статуса получателя благотворительной помощи формируется уникальная контактная форма заявки. Для этого мы спроектировали базу данных по типу связи «один-ко-многим» и использовали плагин для создания форм обратной связи Contact Form 7:
Мультиязычный сайт на WordPress
Англоязычная версия сайта для украинского благотворительного фонда — это важная возможность привлечь помощь международного сообщества для преодоления последствий войны в Украине. В связи с этим мы установили плагин Polylang и настроили сайт на двух языках — государственном и английском.
В отличие от плагинов автоматического перевода Polylang предусматривает ручную загрузку контента. Однако это не должно пугать администратора, потому что добавлять переводы страниц в консоли WordPress не сложнее, чем переключаться между языками на сайте:
Несмотря на то, что ресурсы некоммерческих организаций ограничены, идти на компромисс в вопросе перевода сайта нецелесообразно, особенно в такой чувствительной сфере как благотворительность. Доверие является важнейшим активом любого фонда, поэтому недостоверный, хуже, бессмысленный автоматический перевод может негативно повлиять на его репутацию. Не стоит жертвовать качеством контента в угоду скорости и экономии. Точный перевод с учётом контекста, диалектов, идиом и других языковых нюансов поможет привлечь внимание доноров, волонтёров и партнёров со всего мира.
Так, профессиональный перевод в сочетании с удобной панелью администратора WordPress позволяет иностранным пользователям мгновенно узнать о проблемах украинцев, а фонду «Крылья Украины» — легко поддерживать мультиязычный сайт и привлекать больше средств на благотворительные цели.
SEO-оптимизация сайта с WordPress
Мы много говорим о важности контента не просто так, ведь его качество оценивают не только посетители сайта, но и алгоритмы поисковых систем. Помимо доверия пользователей, качественный контент повышает позиции сайта в результатах поисковой выдачи.
Несмотря на то, что перед Webnauts не стояла задача продвижения в Google, наша команда понимает, что создавать сайт, а тем более мультиязычный, важно сразу по всем правилам SEO. Поэтому мы установили плагин Yoast SEO и настроили базовую техническую оптимизацию. Популярный SEO плагин для WordPress позволяет оптимизировать мета-теги, добавлять канонические URL-адреса для страниц с подобным содержимым, настраивать индексную XML-карту и осуществлять другие меры для соответствия сайта требованиям поисковых алгоритмов.
Приём онлайн платежей на сайте
Чтобы упростить сбор донатов до пары кликов, мы интегрировали сайт с платёжными решениями от ПриватБанка и Монобанка через API. Теперь сайт фонда может принимать благотворительные взносы через платёжные страницы LiqPay и Monobank различными способами: банковской картой, QR-кодом, а также цифровыми кошельками Google Pay, PrivatPay или ApplePay.
Итоги
Современный сайт — это не только важное условие для выживания бизнеса в конкурентной среде. Иногда это вопрос выживания нации в условиях войны. Размах е-волонтерства в Украине стал настоящим мировым феноменом и мощной поддержкой для страны и армии. Поэтому недооценивать значение технологий в масштабировании благотворительности как минимум нелогично. От того, насколько хорошо благотворительная организация представлена в интернете, зависит уровень доверия и вовлечённости сообщества.
Наша команда сделала всё, чтобы успешно репрезентовать миссию и ценности благотворительного фонда «Крылья Украины» в сети и провести пользователей путём положительного и эмоционального опыта при взаимодействии с сайтом. Уникальный дизайн и простой интерфейс, понятные отчёты и безопасные онлайн-платежи, удобная панель для управления двуязычным контентом — всё это не только повышает доверие и благотворительную помощь пользователей, но и шансы на своевременную реализацию важных проектов фонда.
Сайт благотворительной организации «Крылья Украины» — это больше, чем просто проект в портфолио веб-студии Webnauts. Это очередная возможность помочь благотворителям держать высокую планку и фокус внимания мира на поддержке Украины. Это шанс сделать нашу страну сильнее благодаря веб-технологиям.
Комментарии