Сайт благодійного фонду
Благодійність в Україні стає трендом, що не може не тішити. Це видно навіть з нашого портфоліо, що поповнюється сайтами нових українських фондів. І сьогодні ми розповімо про благодійну організацію «Крила України», що народилася в прифронтовому Нікополі та отримала сайт у криворізькій компанії 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. Це чергова можливість допомогти благодійникам тримати високу планку та фокус уваги світу на підтримці України. Це шанс зробити нашу країну сильнішою завдяки вебтехнологіям.
Комментарии