Огонь Жизни — крупная благотворительная организация в России. Задачей было создать цифровую платформу для социальных инициатив, где объединяются более 10 фондов разной направленности
Работа включала разработку дизайн-макетов в Figma и создание визуальной концепции, отражающей ценности благотворительной платформы. Был проработан адаптивный дизайн для разных устройств, а также дополнительные коммуникационные материалы — презентации и прототипы приложения. Проект помог объединить более 10 фондов под единой платформой и выстроить понятный язык общения с широкой аудиторией
Огонь Жизни
Создание цифровой платформы для объединения благотворительных фондов и социальных инициатив. Задачей было собрать в одном месте информацию о мероприятиях, новостях и социальных проектах, чтобы упростить пользователям поиск актуальных событий и повысить вовлечённость в деятельность организаций
Цель проекта
Что было сделано:
Дизайн
Разработаны финальные дизайн-макеты, адаптивные версии и UI-кит. Взаимодействие с разработчиком включало ревью кода и подготовку масштабируемой дизайн-системы
4
Прототипы
Созданы прототипы с детальной проработкой user flow. Каждый шаг был визуализирован и протестирован, что позволило выстроить удобный и последовательный UX
3
Логика сайта
Разработана структура взаимодействия и пользовательские сценарии. Внутри команды велась совместная работа над логикой и функционалом
2
Анализ вводных
Собраны и проанализировали все исходные данные: цели проекта, аудитория, текущий бренд и его позиционирование. Определены ключевые задачи, построен план
1
Сбор референсов
На этом этапе были собраны и систематизированы разнообразные визуальные решения: сайты благотворительных фондов, социальные платформы и коммерческие проекты. Подготовила подборку, которую презентовала заказчику и обсудила вместе с ним и проектной командой
В результате определили общее направление для дальнейшего дизайна, зафиксировали ориентиры и отказались от неподходящих решений. Этот шаг помог выстроить единое понимание визуального и функционального вектора развития проекта
В результате определили общее направление для дальнейшего дизайна, зафиксировали ориентиры и отказались от неподходящих решений. Этот шаг помог выстроить единое понимание визуального и функционального вектора развития проекта
Была заложена визуальная метафора огня, которая изначально присутствовала в логотипе бренда и совместным решением с заказчиком была развёрнута в общий визуальный язык сайта. Огонь символизирует тепло, поддержку и свет, что напрямую перекликается с миссией и ценностями организации. Этот образ транслировался в акцентных цветах, графике и визуальном стиле, помогая сделать коммуникацию более эмоциональной
Метафора огня
Прототипирование
Проработана логика взаимодействия пользователей с платформой, определены ключевые сценарии и пути движения по сайту. Особое внимание уделялось структуре разделов и последовательности шагов — от первого знакомства до детального изучения фондов и участия в инициативах
Совместно с командой и заказчиком фиксировались приоритетные решения: какие блоки должны быть на главной, как выстраивать иерархию информации, какие сценарии требуют упрощения. Это обеспечило единое понимание будущего продукта, минимизировало риски на стадии дизайна и разработки и позволило заложить прочный фундамент для масштабирования проекта
Совместно с командой и заказчиком фиксировались приоритетные решения: какие блоки должны быть на главной, как выстраивать иерархию информации, какие сценарии требуют упрощения. Это обеспечило единое понимание будущего продукта, минимизировало риски на стадии дизайна и разработки и позволило заложить прочный фундамент для масштабирования проекта
Главная страница
В верхнем блоке реализовано видео с меняющейся информацией, а по скроллу подключены анимации для плавного вовлечения. Здесь размещены краткое описание платформы, новости, анонсы мероприятий, реальные фото с событий, а также блоки с участниками и партнёрами
Маркетинговая задача страницы — сразу транслировать миссию «Огня Жизни», показать активность фонда через реальные события и вовлечь пользователя в движение с первых секунд взаимодействия
Маркетинговая задача страницы — сразу транслировать миссию «Огня Жизни», показать активность фонда через реальные события и вовлечь пользователя в движение с первых секунд взаимодействия
В основе дизайна лежит фирменная система из трёх ключевых цветов, дополненных градиентами и мягкими свечениями. Они создают живую визуальную атмосферу и работают как акценты, направляющие внимание пользователя. Фоновые элементы с динамическими формами поддерживают метафору огня и придают страницам характер
Дизайн-решения
Мобильный дизайн отражает атмосферу бренда: яркие акценты, плавные градиенты и динамика огня адаптированы под компактные экраны. Фото и анимации по скроллу создают живое впечатление, а интерфейс остаётся чистым и лёгким для восприятия
Мобильная версия сайта
О платформе
«О платформе» — это место, где пользователь знакомится с деятельностью фонда, его историей, миссией и ценностями. Раздел построен на сочетании реальных фото, фактов и достижений, что позволяет рассказать о проекте честно и прозрачно
Контент подаётся не полотном текста, а через комбинацию инфографики, анимаций и визуальных блоков с фотографиями мероприятий. Это делает информацию структурированной, легко воспринимаемой и эмоционально вовлекающей
Контент подаётся не полотном текста, а через комбинацию инфографики, анимаций и визуальных блоков с фотографиями мероприятий. Это делает информацию структурированной, легко воспринимаемой и эмоционально вовлекающей
На странице представлены ключевые лица и совет «Огня Жизни» — те, кто принимает стратегические решения и формирует развитие организации
Совет
Участники платформы
«Участники платформы» собирает все фонды, входящие в «Огонь Жизни». Здесь пользователь может просмотреть полный список организаций, узнать подробнее о каждом из них на отдельной странице, а также ознакомиться с их актуальными новостями и мероприятиями
При наведении подключаются лёгкие анимации, которые оживляют взаимодействие и подталкивают к переходу на страницу фонда
При наведении подключаются лёгкие анимации, которые оживляют взаимодействие и подталкивают к переходу на страницу фонда
Страница участника
Каждый фонд представлен на отдельной странице, где раскрыта его миссия, ценности и направления деятельности. Здесь можно познакомиться с историей организации, её ключевыми проектами, принципами работы и достигнутыми результатами
Страница оформлена через фото и инфографику, что делает информацию структурированной, наглядной и легко воспринимаемой. Также на странице есть новости, которые относятся к фонду
Страница оформлена через фото и инфографику, что делает информацию структурированной, наглядной и легко воспринимаемой. Также на странице есть новости, которые относятся к фонду
Были разработаны отдельные шаблоны страниц под новости и мероприятия. В разделе новостей размещаются публикации с фото и заголовками, удобная пагинация помогает пользователю быстро ориентироваться в материалах. Страница мероприятий построена в формате карточек с датами, описанием и кнопкой перехода для подробного ознакомления
Новости и мероприятия
Партнеры
Страница партнёров демонстрирует организации и компании, поддерживающие «Огонь жизни» и участвующие в развитии его инициатив. Карточки с логотипами и кратким описанием позволяют быстро познакомиться с каждым партнёром
Здесь также предусмотрен блок с приглашением стать партнёром платформы. Он подчёркивает открытость проекта и даёт возможность новым организациям присоединиться к сообществу, усиливая социальный эффект и расширяя возможности фонда
Здесь также предусмотрен блок с приглашением стать партнёром платформы. Он подчёркивает открытость проекта и даёт возможность новым организациям присоединиться к сообществу, усиливая социальный эффект и расширяя возможности фонда
Для проекта были разработаны отдельные шаблоны под новости и мероприятия, обеспечивающие единый стиль и удобную структуру подачи информации. В новостях реализованы карточки с фото, заголовком и датой публикации, а также простая навигация и пагинация для быстрого поиска материалов. Страница мероприятия дополнена описанием, блоком с датой и местом проведения и фотогалереей
Шаблон новости и мероприятия
В рамках проекта была подготовлена корпоративная презентация фонда «Огонь Жизни». В ней раскрыты миссия, цели и ценности организации, показаны ключевые участники и партнёрства, а также подробно описаны направления деятельности. Презентация выполнена в фирменном стиле и предназначена для использования на мероприятиях
Презентация
Фонд «Огонь Жизни» планирует запуск собственного мобильного приложения, которое объединяет спорт и благотворительность. Оно станет частью экосистемы организации, расширяя каналы взаимодействия с аудиторией и вовлекая людей в социальные инициативы через привычные повседневные активности. Были подготовлены первые наброски будущего интерфейса, отражающие фирменный стиль и ценности бренда
Приложение для бега
