Лендинг к 10-летию Российского научного фонда

Содержание

• Задача

• Дизайн-концепция

• Анимации

• Вёрстка и сборка сайта

• Результат

Российский научный фонд (РНФ) — некоммерческая организация, созданная в целях финансовой и организационной поддержки научных исследований, подготовки научных кадров.

К своему 10-летию Фонд решил собрать информацию о своей деятельности и результатах работы на одном сайте. Целевая аудитория — учёные, сотрудники РНФ, государственные представители.

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

Перед стартом работ клиент показал пару референсов, каким он хочет видеть лендинг. На их основе собрали мудборд и презентовали клиенту.

На общем созвоне определили стилистику будущего сайта, согласовали направление, в рамках которого будем разрабатывать дизайн-концепцию.

В процессе работы подготовили два варианта. Первый — с мягкими плавающими формами, за основу которых были взяты внутрибуквенные просветы из «р» и «ф» в логотипе компании.

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

Для больших смысловых блоков (например, истории успеха, поздравления, статьи о Фонде в СМИ) сделали отдельные страницы, на которые можно перейти и, при необходимости, погрузиться в изучение информации.

В научной сфере люди часто работают с объёмными текстами, написанными сложным языком. Контент для лендинга, который готовился на стороне клиента, не стал исключением. Чтобы уместить тексты и гармонично расположить их на странице, мы закладывали в концепцию максимально допустимый объём и поясняли клиенту важность соблюдения этого правила.

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

В дизайне лонгридов есть свои «подводные камни», которые важно учитывать. Ключевой из них — показатель дочитываемости (сколько людей просмотрели страницу до конца).

Чтобы заинтересовать пользователей и вовлечь в процесс изучения лендинга, использовали анимацию. Она помогла разбавить процесс листинга, сделала лендинг более динамичным и интерактивным.

При первом заходе на сайт пользователей встречает прелоадер в виде счётчика. Он даёт понимание, что РНФ существует с 2013-го и выступает в качестве аллегории на движение времени.

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

Чтобы подчеркнуть объём и масштабность. Например, в блок с количеством экспертов Фонда добавили параллакс и расположили фотографии на разных уровнях, чтобы дополнить масштабную цифру «8 500».

Бегущие строки с дисциплинами выезжают с разных сторон, подчёркивая разнообразие отраслей. А для отображения результатов работы использовали имитацию 3D-барабана, чтобы ёмко и динамично показать информацию.

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

Эту часть работы взял на себя наш партнёр — компания Mantix. Для реализации анимации были использованы библиотека GSAP и собственные решения. Сочетание GSAP и собственных скриптов позволило создать анимации, которые адаптируются к разным размерам экранов и устройств, обеспечивая плавный и однородный пользовательский опыт на всех платформах.

В одном месте мы собрали ключевые результаты работы Фонда и упаковали их в наглядный и интерактивный формат.

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

Для самого Фонда лендинг останется как памятный артефакт, к которому при необходимости могут обращаться текущие и новые сотрудники.