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

Главное о кейсе

Российский научный фонд (РНФ) занимается грантовой поддержкой научных исследований и научных кадров. У фонда есть свой сайт, а мы сделали юбилейный лендинг, который демонстрирует достижения компании за 10 лет деятельности.
_______________________

The aim of the Russian Science Foundation (RNF) is to provide grant support for scientific research and scientific personnel. The foundation has its own website, and we made an anniversary lending, which demonstrates the company's achievements over the 10 years of activity.

Как проект изменил жизнь пользователей

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

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

We have gathered the key results of the fund's work In one place and presented them in a visual and interactive format. Anyone interested in the company's activities can go to the website and find the necessary information.

For the foundation itself, the lending site will remain as a memorable artifact that can serve as a reference to both current and new employees.

Бизнес-задача и ее решение

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

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

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

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

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

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

The Russian Science Foundation (RNF) is a non-profit organization established to provide financial and organizational support for scientific research and training of scientific personnel.

For its 10th anniversary, the Foundation decided to collect information about its activities and achievements on one website. The target audience consists of scientists, RNF employees, and government representatives.

The client showed us a couple of examples of what they wanted the website to look like. We developed design on the basis of these references, and presented it to the client.

The concept is based on the principles of gigantism: large headlines, texts, photos.
The colors for the website were taken from the anniversary logo. Two shades (pink and lilac) were used as accents in texts, buttons and elements.

Special attention was paid to animations. They accompany the user throughout the study of the site, carefully focusing attention on important information.

For large semantic blocks (success stories, congratulations, articles about the Foundation in the media), separate pages were created, which one can visit and, if necessary, study the information deeply.

Крафт (мастерство), реализация, технические детали

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

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

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

#Бегущие строки, подгрузка элементов, барабан
Чтобы подчеркнуть объем и масштабность. Например, для отображения результатов работы использовали имитацию 3D-барабана, чтобы емко и динамично отобразить их.

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

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

Design of longreads has its pitfalls that have to be considered. The key one is the readability rate (how many people viewed the page to the end).
In order to interest users and engage them in the process of studying the lending, we used animations. They helped to dilute the listing process and made the landing page more dynamic and interactive.

#Preloader
When users first enter the site, they are greeted by a preloader in the form of a counter. It shows that RNF has been around since 2013 and acts as an allegory for the movement of time.

#Horizontal scroll
The site uses two main types of scrolling: vertical scrolling to move from one semantic block to another and horizontal scrolling to dive into an individual block.

Running lines, loading elements, drum
Were used to emphasize volume and scale. For example, a 3D drum simulation was used to display the results of the work in order to show them in a capacious and dynamic way.

#Success Stories block
We used the visual technique of zooming in on the heroes’ images as a metaphor for the fact that when we learn the history of a person, they become closer to us.

The frontend and backend development was performed by our partners - Mantix company. GSAP libraries and our own solutions were used to create animation. The combination of GSAP and proprietary scripts allowed us to create animations that adapt to different screen sizes and devices, providing a smooth and uniform user experience across all platforms.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

People who work in science and research often are used to dealing with voluminous texts written in complex language. The content for the website, which was prepared on the client's side, was no exception. In order to accommodate the texts and harmoniously arrange them on the page, we incorporated the maximum allowable volume into the concept and explained to the client the importance of adhering to this rule.

Скриншоты