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) — размеры кругов пропорциональны масштабу цифры. Это не таблица и не счётчик — это смысловой акцент. Аудитория, которая открывает сайт впервые, с одного взгляда видит порядок: десятки тысяч семей, тысячи детей, сотни мероприятий, сотни квадратных метров. Текст слева объясняет контекст — «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» (с опцией «+» раскрыть полный перечень). Сетка 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» для пагинации. Это рабочая поверхность для 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-акцентами между кругами. Это не линейный 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-блок как критическая поверхность для донора

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» (история ветерана с позывным «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» — стена с 60+ логотипами, разделённая на 2 карусели (более и менее приоритетные). Первая линия — стратегические доноры: 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-код как альтернатива для тех, кто хочет оплатить через банковское приложение. Bank transfer details (IBAN, ЕГРПОУ, 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) навигация сворачивается в бургер, остаётся только логотип + 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+ партнёров в стене с кликабельными логотипами, разделёнными на 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) — инструмент адвокации, который можно цитировать в грантовых заявках и медиа-кампаниях