Лесовосстановление

О компании

Самый большой и технологичный питомник саженцев с закрытой корневой системой в России

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

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

Задача

Цели

1. Сделать сайт «не как у всех», чтобы выделяться на рынке питомников и привлекать внимание и частников, и государственных заказчиков;

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

Вызовы и решения

Мы задумались о том, кто поможет нам с дизайном сайта. Поэтому мы позвали на проект дизайн-студию Bauns и полностью отвечали за процессы.

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

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

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

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

После проект перешёл к нам — разработчикам. И начали мы с реализации притчи на главной странице.

Миссия

История сама по себе простая и рассказывает о заботе над будущим поколением

Для притчи дизайнеры нарисовали 4 сцены с персонажами и фоном, сделали раскадровку и показали разработчикам анимацию всех элементов прямо в Figma. С нашей стороны нужно было склеить 4 фона и анимировать объекты.

Для анимации мы использовали библиотеку GSAP и плагин Scroll Trigger

Первая часто помогает нам работать с анимацией объектов на проектах — так они получаются более интерактивными и кроссбраузерными.

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

Сложность была в том, что анимация должна появляться в модальном окне

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

Вот такой результат получился:

Анимации

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

Сделали стики анимацию круга, с которой пришлось повозиться

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

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

Сначала мы просили дизайнеров точнее описать движения круга и элементов вокруг него — из какого состояния и в какое они должны прийти. Показать это покадрово получилось довольно сложно как раз из-за того, что на разных устройствах анимация работает по-разному. Поэтому мы сами посчитали нужное время и место, к которому должны прийти элементы. А спустя 5 попыток рассчитали идеальное расстояние для этой анимации.

Добавили простой параллакс эффект при скролле

Кастомный скролл

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

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

WordPress

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

Главные её преимущества — полностью бесплатная система и открытый код, который позволяет дорабатывать веб-ресурс. Например, внутри есть большой набор дополнений, расширений и шаблонов. Причём как коммерческих, так и бесплатных.

Результат

Раньше: У клиента не было своей «визитной карточки», чтобы зацепить потенциальных клиентов после знакомства и рассказать о своём деле. К тому же, не было возможности получить клиентов из интернета. Люди просто не знали о том, что существует такой самый большой лесопитомник в России.

Сейчас: У клиента есть «не такой как у всех» сайт, который передает миссию и ценности потенциальным клиентам. Рассказывает обо всех процессах сразу — технологиях, посадке и решениях питомника. Привлекает внимание иллюстрациями и анимациями.