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

1. Вводная задача от заказчика, проблематика, цели

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Дизайн

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

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

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

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

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

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

Анимации

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

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

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

Чтобы подчеркнуть объём и масштабность, использовали бегущие строки, подгрузку элементов и барабан.

Например:

• В блок с количеством экспертов Фонда добавили параллакс и расположили фотографии на разных уровнях, чтобы дополнить масштабную цифру «8 500».
• Бегущие строки с дисциплинами выезжают с разных сторон, подчёркивая разнообразие отраслей
• Для отображения результатов работы использовали имитацию 3D-барабана, чтобы ёмко и динамично показать информацию.

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

3. Результаты сотрудничества

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