Эпичный сайт для Legacy

Комментарии

Эпичный сайт для Legacy

Создали для некоммерческого целевого фонда проект, который вдохновляет творить добрые дела и делать этот мир лучше

LEGACY — «наследие» в переводе с английского, и это понятие идеально подходит для эндаумент-фонда, цель которого — вложения для созидания будущего и вклада в общее наследие. Фонд был создан в 2016 году благодаря инициативе Игоря и Екатерины Рыбаковых.

Игорь Рыбаков

Совладелец корпорации «Технониколь». Вместе с супругой Екатериной создал «Рыбаков Фонд» и эндаумент-фонд LEGACY. В 2018 году попал в список богатейших людей мира по версии Forbes (состояние — 1,2 млрд долларов США).

Legacy — первое платформенное решение в России по инвестированию в социальные проекты разных сфер: образования, искусства, здравоохранения, социальной поддержки, спорта и экологии. Для столь амбициозного проекта с глобальными целями требовался сайт, который бы прозрачно рассказывал о деятельности фонда и его принципах и предлагал пользователям решения по инвестированию активов здесь и сейчас.

Задачи

Создать современный дизайн, формирующий целостный и жизнерадостный образ фонда, который вызывает доверие.

Сделать ставку на презентабельность: важно, чтобы меценаты хотели создавать целевые капиталы именно здесь, а пользователи делали вклады и с охотой рассказывали о фонде друзьям.

Обеспечить корректную работу на мобильных устройствах.

Предусмотреть раздел с информацией о фонде (документах, годовых отчётах и системе работы) и о целевых капиталах.

Реализовать формы на сайте для осуществления вклада и для формирования нового целевого капитала.

Запустить проект в короткие сроки, чтобы успеть к старту проекта «Ты супер!» на телеканале НТВ.

Дизайн

У заказчика был брендбук, и поэтому в дизайне мы использовали его фирменные цвета, подобрали схожие иконки и постарались выдержать ту же стилистику. Но на демо выяснилось, что подводка к брендбуку показалась неудачной: заказчик хотел чего-то более масштабного и воодушевляющего, а в рамках его фирменного стиля это оказалось невозможным.

Идя по пути наименьшего сопротивления, мы получили комментарий в духе "всё не то". И тогда заказчик дал нам полный карт-бланш: «Вы же дизайнеры — сделайте так, как вы это видите». Я сразу решил, что в проекте должно быть классное видео и крупная типографика — то, что сейчас в тренде.

Евгений

Арт-директор

Переделывать текущую версию макета оказалось нецелесообразным: затраты времени были бы несопоставимы с результатом. Поэтому мы предложили принципиально иную версию с собственным видением: с реалистичными и жизненными иллюстрациями, специально подобранными для проекта, и контентом, который ведёт пользователя по странице.

Чтобы заказчику было проще адаптироваться, сделали и альтернативную версию, куда добавили больше яблок (символ фонда), но в итоге именно наше видение вызвало те самые эмоции, которые заказчик хотел получить от дизайна.

По словам директора фонда Юлии Ульяновой, «эффективную организацию системы управления эндаументом можно сравнить с заботой о яблоне, которую нужно посадить, поливать, удобрять, и только спустя несколько лет, она принесет урожай. И чем лучше проявляется забота о яблоне, тем крупнее и сочнее плоды. А если заботиться правильно, то она будет плодоносить долгие годы». Поэтому яблоня и яблоки — ключевые образы в проекте, они появляются на многих страницах, дополняя концепцию.

Для фонового видео мы подобрали сразу несколько вариантов роликов, отражающих вечные ценности: величественные горы, подъём на вершину, полёт птиц, рожь, закаты и рассветы. Они настолько понравились, что в итоге их склеили в одно большое эпичное видео:)

Работу фонда метафорично отобразили с помощью иллюстраций. Более подробная схема появляется на внутренней странице в блоке «Как работает LEF»:

В блоке на главной меценаты расположены в круге — символе единства и общности интересов.

На главной странице внизу закреплена плашка со ссылками: «создать целевой капитал» или «сделать взнос». Последний блок главной страницы описывает целевые действия сайта подробнее:

Если пользователь сделает взнос или создаст капитал, ему на электронную почту придёт сертификат:

Команда фонда поучаствовала в фотосете для проекта: сотрудники специально снялись без одежды, чтобы показать прозрачность деятельности LEGACY и абсолютную открытость для бизнес-сообщества и посетителей сайта:

Меня очень порадовало серьёзное отношение заказчика к разработке сайта. Понравилось, что команда оказалась очень заинтересованной в успехе проекта. Благодаря этому контент на сайте полностью отражает идеи фонда: открытость и доверие:)

Кристина

Руководитель проекта

Разработка

Главная страница — одно большое пространство, где блоки сменяют друг друга.

Каждому целевому капиталу соответствует свой образ на подложке. В блоке справа пользователь может сделать вклад в существующий проект или инициировать создание нового целевого капитала:

Весь сайт буквально живой — он постоянно предлагает пользователю какие-то микровзаимодействия. Это и интерактивная схема работы с метафорической посадкой семечки, и блок «Фонд в цифрах» с svg-графикой, которая «подсвечивает» ключевые цифры, и блок о меценатах, в котором можно переключаться между персонами:

Планировалось, что при нажатии на фото мецената ключевая информация о нём будет появляться в центре круга. Но в итоге решили сделать удобнее: часть круга скрывается за информацией о человеке.

Андрей

Разработчик

На странице «О фонде» есть блок с указанием имен всех, кто уже сделал взнос — список формируется рандомно:

Здесь же прикреплены учётные документы фонда и годовые отчёты:

И хотя пользователь вообще не должен попадать на 404-ю страницу, если такое вдруг произошло, ему открывается крутой интерактив — «яблочный баскетбол», где нужно закидывать фрукты в корзину на счет: чтобы попасть, придётся постараться. Залипнуть можно надолго, но когда надоест — слева есть ссылка на главную.

На главной много анимации и интерактива — было непросто сохранить все нужные блоки на адаптиве и сделать мобильную версию такой же продуманной и удобной:

Проект получился шикарный — я им очень довольна! Главная — это целое путешествие, как и хотел заказчик, а внутренние страницы органично смотрятся на фоне главной и не уступают ей по дизайну — это была одна из моих целей на проекте. Много анимации (даже слишком, поэтому кое-где её пришлось отключить) — да, были проблемы с версткой из-за всех фишек, но в итоге мы добились и быстрой работы сайта, и плавности анимаций, и вау-эффекта :) С заказчиками был хороший контакт и понимание. Как результат — очень хороший и успешный проект.