Rise of Ukraine — корпоративний сайт благодійного фонду з білінгвальним контуром і transparency-блоком

Контекст

Rise of Ukraine — благодійний фонд, заснований у травні 2022 року у Дніпрі чотирма волонтерами, що почали з пошиву бронежилетів і доставки гуманітарки на фронт. За майже чотири роки команда виросла до 18 штатних співробітників, виконала 348 заходів для вразливих категорій населення, надала допомогу 12 860 родинам, відкрила HUB для розвитку дітей на 350 м². Сайт працює з GIZ, Save the Children, HELVETAS, INSO, INTERSOS, FAO, Mercy Corps, UKaid та ще ~60 партнерами — від міжнародних донорів до локального бізнесу Дніпра.

Завдання — корпоративний сайт фонду, що одночасно тримає чотири аудиторії: міжнародних інституційних донорів (англомовний контур з transparency-блоком), українських приватних донорів (укр. контур з donate-формою), бенефіціарів допомоги (зрозумілий вхід до 6 напрямків і CTA «Отримати допомогу») і медіа (прес-кит, новини, скачувані звіти). Без CMS-болю для команди фонду — все редагується з адмінки.

Hero, що читається як благодійна місія

Перший екран — повноекранне фото з реальної гуманітарної місії: волонтер у синьому худі «Rise of Ukraine» передає коробку «Укрпошти L1» жінці на вулиці. Зверху — H1 «Charity Fund Rise of Ukraine» і коротка декларація місії в одному реченні («Charity fund providing humanitarian, educational, and psychological support to people and communities in Ukraine affected by the war»). CTA — «Help the fund» з вихідною стрілкою — веде на Google Form для подачі заявки на допомогу. Glass-card overlay з blur-фоном тримає текст читабельним поверх фото будь-якої експозиції.

Білінгвальний контур EN / UA під дві аудиторії

Сайт існує у двох локалях — англійській (default) і українській (/uk/) — на окремих URL-сегментах із перемикачем «ua | eng» у правому верхньому куті. Англійська — для міжнародних донорів (GIZ, Save the Children, UKaid, INSO, INTERSOS), які беруть звіти з /reporting/ і пишуть на partnership@. Українська — для приватних донорів усередині країни, бенефіціарів і медіа. Усі ключові сторінки продубльовано: hero-перекладено, статистика і числа однакові, навігація локалізована («Про нас», «Напрямки діяльності», «Проєкти», «Новини», «Звітність та документи», «Контакти», «Підтримати»).

Цифри як перший доказовий блок

Зразу після hero — секція «Overall results» з 4 цифрами, що візуалізовані як bubble-кластер: 12 860 (родин — найбільший круг, жовтий), 5 516 (дітей), 348 (заходів), 350 м² (HUB) — розміри кругів пропорційні масштабу цифри. Це не таблиця і не лічильник — це смисловий accent. Аудиторія, що відкриває сайт уперше, з одного погляду бачить порядок: десятки тисяч родин, тисячі дітей, сотні заходів, сотні квадратних метрів. Текст ліворуч пояснює контекст — «Every day, we work in different areas of support, from humanitarian missions to educational programs».

Шість напрямків діяльності з власними hub-сторінками

Сітка 3×2 на головній

Секція «Focus areas» — 6 photo-карток у сітці 3×2: Humanitarian aid, Child support, Fund HUB, Integration and educational activities, Rebuilding, Veteran support. Кожна картка — реальне фото з місії: волонтер передає коробку, групове фото з 12 дітьми у дитячому хабі (стіна з рожевими decoupage-літерами), діти за столом малюють у Fund HUB, доросла аудиторія на майстер-класі, команда у синіх футболках з дітьми перед муралом «дерево», ветеран у футболці «Riзж Русню» з біонічним протезом руки. Glass-pill з назвою напряму + «+»-маркер, що веде на повну hub-сторінку.

Hub-сторінка другого рівня

За кожною карткою — повноцінна hub-сторінка, не якір. Hero того ж патерну (реальне фото з місії + glass-card із H1 і коротким описом), далі — окрема статистика тільки цього напряму. Для Humanitarian aid це: 12 860 родин отримали допомогу, 270 індивідуальних психологічних і медичних консультацій, 85 гуманітарних місій у прифронтові зони, 14,3 тонни медичної допомоги. Цифри взяті з реальних звітів, не маркетинг — і це підтверджується PDF-звітами у /reporting/.

Сітка sub-projects з власними фото

На кожній hub-сторінці — Swiper-карусель «Focus areas» з 13–15 sub-projects: Rise: Emergency Support, Rise of shelter, Providing winterization assistance in hard-to-reach areas of Kharkiv/Dnipropetrovsk/Donetsk regions, Rescue of Kherson Region After Flooding, «Native Strangers», Distribution of Baby Food in Partnership with Danone Ukraine, Distribution of Stationery Sets 2025, Rise for Help, «Place of Life», Christmas Humanitarian Kits з Space Eye, LIVES 3.0 з international donors, State Emergency Service Emergency Readiness Project. Кожна картка — фото + назва + glass-overlay «Read more». Це дає аудиторії інституційного донора зрозуміти масштаб і характер кожного напряму без читання звіту.

Проєкти — окрема таксономія для активних і завершених

Сторінка /projects/ — окремий розділ із фільтрами «Active | Completed» + категорії «All / Cultural events / Medical direction / Psychological support / Humanitarian aid» (з opcją «+» розкрити повний перелік). Сітка 3×N з photo-картками: Summer Camp: Happy Child 2.0, ART4MENTAL (3D-render у VR-окулярах — international project), Charity Football Championship «Automotive & Rise», Individual / Group psychological consultations, ProstoNeba FEST 2026, V.RISE – Veterans Hub, Access to Life-Saving Oncology Medicines, Cybersecurity Course, VR-Based Learning, Flexible Skills Development Course, Financial Literacy Course. «Load more» для пагінації. Це робочий surface для media-команди, що хоче побачити, чим фонд зайнятий зараз.

About: історія, місія, цінності, команда

Word-art hero як bold-жест

Hero сторінки /about/ — повноекранне фото пшеничного поля з масивним word-art «rise of UKRAINE», де літера «o» у «rise» замінена на жовтий sun-arc (мінімалістичний логотип фонду). Це не типовий «текст поверх stock-фото» — це bold-typographic-композиція, що тримається на одному фокусі. Breadcrumb «Home > About us» — мінімалістичний, у лівому верхньому куті.

Our story — таймлайн у 4 кроки

Секція «Our story» — таблична карусель з 4 етапами (Slick/Swiper з пагінацією 1–4): початок 2022 (4 друзі-волонтери), травень 2022 (офіційна реєстрація фонду), 2024 (фокус на гуманітарних напрямах і відкриття HUB для дітей), сьогодні (команда з 18 людей, великі програми). Кожен етап — пара колонок: текст і фото відповідного періоду (груповий портрет команди у синіх худі, фото з військових місій, інтерʼєр Fund HUB). Це автобіографічна довжина, що не вміщується в один абзац — карусель дає змогу читати у власному темпі без скрол-долі.

Vision і Mission як парні картки

«Vision» і «Mission» винесені у дві паралельні картки з sun-arc-іконкою кожна. Vision — постмілітарне бачення суспільства («A post-war Ukrainian society that is educated, innovative, mentally stable and united»). Mission — операційне зобовʼязання («To contribute to the restoration of Ukraine and improve the quality of life of its citizens by providing humanitarian, social and medical assistance to war-affected people, support and development of children, youth, internally displaced persons, veterans and their families»). Це не маркетингова болванка — це конкретні цільові групи і конкретний обʼєм допомоги.

Цінності як bubble-композиція

Секція «Our values» — 8 цінностей (Professionalism, Teamwork, Responsibility, Creativity, Ambition, Collaboration, Collective decision-making, Initiative), але показані не як grid 4×2, а як hand-arranged bubble-cluster: «Collective decision-making» — найбільший круг по центру (як ключова цінність), «Teamwork» — великий жовтий зліва, «Initiative» / «Collaboration» — менші жовті акценти. Розмір круга = вага цінності, кольори (жовтий vs блакитний) виділяють специфічні. Та сама візуальна мова, що у Overall results — це уніфікує бренд.

Our team — 15 портретів у каруселі

«Our team» — Swiper-карусель з 15 портретами штатних співробітників (Co-founders: Kukhtin Oleksandr, Paladiieva Yana, Sarkisian Artur, Safonov Denys; Head of projects: Prima Yelyzaveta; project managers по напрямах: communities, children, humanitarian; event manager; communications; HUB administrator; copywriting; content; Kyiv office team-lead і project manager). Кожен — велике портретне фото на синьому фоні з ім’ям, посадою. Це підвищує trust-фактор: за фондом стоять реальні обличчя з іменами, не безособова «команда».

Our volunteers — bubble-кластер з 20+ облич

«Our volunteers» — 20+ круглих портретів волонтерів, розміщених як bubble-cluster (та сама візуальна мова, що у values/results) з жовтими hearts-акцентами між кругами. Це не lineal grid, а композиційно живий блок, що читається як «спільнота», а не «таблиця». Розмір кругів варіює — найкрупніші портрети у центрі, менші по краях.

About us in the Media — карусель з логотипами видань

Окрема секція «About us in the Media» — Swiper-карусель з 12+ публікаціями у міжнародних і національних виданнях: Suspilne Donbas, Ukrinform, SHOTAM Media, Dnipro TV, Vidkrytyi, Suspilne Dnipro, SME Slovakia (international media — Bratislava фотовиставка «Price of Life»). Кожна картка — обкладинка статті/відео + заголовок + назва видання з типом («National media», «Regional media», «International media», «Video report») + рік + «Read» CTA з прямим лінком на джерело. Це media-кит без окремої сторінки — журналісти і донори бачать coverage одразу.

Transparency-блок як критичний surface для донора

Reports & Documents

Окрема сторінка /reporting/ — те, без чого міжнародний донор не зайде у партнерство. Hero повторює bubble-кластер Overall results (та сама статистика — 12 860 / 5 516 / 348 / 350 м²), щоб транспарентність зрозуміло коренилася у цифрах роботи. Нижче — H2 «Reports and documents» з декларацією: «Transparency is one of the key principles of our work. We publicly provide access to reports, policies, strategies, and other documents that describe the fund’s activities». 5 категорій доступних документів як glass-pills: Annual reports, Monthly reports, Strategies, Constitutive documents, Policies.

Newsroom як інструмент адвокації

Сторінка /news/ — стандартний blog-архів, але з акцентом на якісних лонгрідах: «Rise of Ukraine Joins the European ART4MENTAL Project», «The Team That Holds the Process Together», «PROSTONEBA: An Experience That Translates Into Results», «How Changes in Space Transform Everyday Life: the Rise of Shelter Project in Dnipro», «Fedir: An Experience That Has to Be Accepted and Lived Through» (історія ветерана з call sign «Shkiper»), «Pavlo: A Story About a Childhood That Has to Be Rebuilt» (історія хлопця з Харкова). Це не «новини для SEO» — це наративні матеріали, які можна цитувати у грантових заявках, передавати міжнародним партнерам, використовувати у медіа-кампаніях. 3-column grid, glass-card з фото + заголовок + 2-line teaser + дата + «Read more».

Партнерська стіна як соціальний доказ

«Our partners» — wall з 60+ логотипами, поділена на 2 carousels (вищі і нижчі за пріоритетом). Перша лінія — стратегічні донори: GIZ (Deutsche Gesellschaft für Internationale Zusammenarbeit), Save the Children, HELVETAS Switzerland, INSO (International NGO Safety Organisation), INTERSOS, FAO (UN). Друга лінія — UKaid + Mercy Corps + Десять квітнів, плюс локальні Dnipro партнери (Danone Ukraine, UNIT.City, Avtomotiv, Esper Bionics). Третя+четверта лінії — менші локальні бізнеси, медіа, муніципалітети (Dniprorada, planetakino.ua, ukrposhta.ua, ukrnafta.com). Кожен логотип — клікабельний на сайт партнера, що додає implicit-soft трафік взаєморозсилки.

Real stories як міст до Instagram

«Real stories» — 7 photo-карток у вільній композиції (різний aspect-ratio, частково перекриваються): портрет дитини у светрі, групове обʼятя команди у синіх худі, дитина з кубками і медалями, ветеран на реабілітації з протезом ноги, автомобіль Volvo з підписами на склі «ПРОСТОНЕБА FEST», ялинково-квіткова інсталяція, дитина на велосипеді. Кожна — лінк на пост у InstaGram або на сторінку Real story на сайті. CTA «Follow us» центровано знизу веде на @rise_dnipro. Це не «follow us on social» в стандартному виконанні — це emotional bridge від «що ми робимо» до «як це виглядає у щоденному житті».

Donate flow з 5 платіжними методами

Hero сторінки /donate/

Перший екран /donate/ — H1 «Support Ukraine with us!» (свідома міжнародна формула), CTA «Quick donation» (жовтий gradient — інстант-перехід на LiqPay-checkout), і паралельно — 5 glass-карток платіжних методів: Card payment (внутрішня форма), Bank transfer (IBAN-реквізити нижче), Foreign transfer (валютний рахунок), Cryptocurrency (QR + адреси), Other payment methods. Це не «один платіжний метод» — це інфраструктура для будь-якого донора: український через картку, міжнародний через bank wire, крипто-донор через QR, корпоративний через bank transfer з payment purpose у виписці.

«I want to help» — multi-currency форма з preset-сумами

Нижче — основна donate-форма у glass-card з білим фоном: вибір валюти (UAH / USD / EUR / CRYPTO як glass-pills), preset-суми (150, 300, 500, 1 000, 5 000, 7 000, 10 000, Other), name + email, чекбокс із згодою на Public offer + Terms + Privacy Policy, Donate-кнопка з жовтим gradient. Праворуч — великий QR-код як альтернатива для тих, хто хоче оплатити через банківський app. Bank transfer details (IBAN, USREOU, payment purpose) — окремою секцією нижче для тих, кому потрібен формальний документ.

Feedback form для бенефіціарів

На головній — окрема секція «Feedback form» (українською — «Форма зворотнього звʼязку») з трьома полями: Full name, E-mail, «What happened?» (textarea). Це не контактна форма для запитів про партнерство — це канал звернень за допомогою або скаргою. Send-кнопка з жовтим gradient на синьому glass-фоні. Після відправки — modal «Thank you for your message» з ілюстрацією hearts і текстом «Our team will get in touch with you during working hours. Your Rise team».

Адаптив і брендова уніфікація

На мобільному (390×844) navigation згортається у бургер, лишається тільки логотип + Support + lang-switcher. Hero-фото переходить у вертикальну орієнтацію, glass-card з H1 і CTA займає нижню половину екрану. 6 focus-areas стають вертикальним стеком замість 3×2. Партнерська стіна — горизонтально-скрольована карусель замість великого grid. Donate-форма зберігає всі preset-суми, але pills переносяться у 2-row layout. Свідомий вибір — НЕ оптимізувати усе під мобільний, а зберегти повну функціональність у компактнішому вигляді.

Брендова система

Уніфікований візуальний словник через усі сторінки: синій primary (#3050e0-ish) + жовтий accent (sun-arc-логотип), всі ключові метрики і концепти візуалізуються як bubble-кластер (Overall results на головній, Overall results на /reporting/, цінності на /about/, волонтери на /about/) — це повторюваний brand-pattern, що читається як «округлені обʼєкти різного розміру = людська спільнота». Glass-card з blur-фоном — основний контейнер для тексту поверх фото-героїв (hero, focus-areas cards, news cards, donate cards). Sun-arc — мінімалістичний half-disk, що зʼявляється у логотипі, перед футером, поряд із Vision/Mission, і навіть як декор-обʼєкт між секціями.

Результат

• Корпоративний сайт фонду з 7 ключовими сторінками (Home, About, 6 service hubs, Projects, News, Reporting, Donate, Vacancies) і 13+ sub-projects на service-hubs — повноцінна site-tree без обмежень на статичні «лендинг-on-WP»
• Білінгвальний контур EN / UA на окремих URL (/uk/*) — коректний hreflang для міжнародних і українських донорів, повне дублювання контенту, локалізована nav і CTA
• 5 методів оплати в /donate/ (LiqPay quick-donate, картка, bank transfer UAH, foreign transfer USD/EUR, crypto з QR) + multi-currency форма з 7 preset-сумами — інфраструктура для будь-якого донора
• Transparency-блок /reporting/ з 5 категоріями скачуваних документів (Annual reports, Monthly reports, Strategies, Constitutive documents, Policies) — обовʼязковий критерій для інституційних донорів типу GIZ/UKaid
• 60+ партнерів у wall з клікабельними логотипами, поділеними на 4 лінії по пріоритету — від інституційних (GIZ, Save the Children, INTERSOS, FAO, Mercy Corps) до локального бізнесу Дніпра
• About-сторінка з 15 портретами штатної команди, 20+ круглими фото волонтерів у bubble-кластері, 12+ медіа-публікаціями і power-typography hero — повний trust-pack для donor-due-diligence
• Унікальна візуальна мова через bubble-кластери (4 цифри на головній + 8 цінностей + 20 волонтерів) і word-art hero на About — це не «WP-template», а custom-дизайн із власною айдентикою
• News з якісними лонгрідами (історії ветеранів, дітей, sub-projects) — інструмент адвокації, який можна цитувати у грантових заявках і медіа-кампаніях