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

Привет, это Лиза из Лиги А.! В прошлом году к нам пришла компания Удан, которая занимается посадкой и выращиванием деревьев. Нужно было сделать сайт, чтобы выделиться на рынке питомников, а заодно привлечь внимание частников и инвесторов. Рассказываем, как вместе с дизайн-студией погружались в историю масштабного проекта.

Мы создаём сложные цифровые сервисы для стартапов и растущего бизнеса. Особенно круто у нас получается разрабатывать личные кабинеты, интернет-магазины и корпоративные продукты — надёжные, удобные и масштабируемые.

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

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

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

Клиенты приходят к Удан и просят сделать всё под ключ — вырастить саженцы и организовать посадку новых деревьев на вырубленной территории.

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

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

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

Для клиента было важно сделать все работы в «одном окне», поэтому мы привлекли на проект команду Bauns. С ребятами познакомились в прошлом году и с тех пор сделали парочку классных проектов, где они отвечали за дизайн, а мы — за разработку. Например, недавно сделали digital-газету для фестиваля Яндекс Ecom Open Air, который проходил летом. А после релиза проект даже получил парочку наград.

Мы участвовали и на всех этапах дизайна — от аудита и сбора референсов до передачи макетов в разработку. Каждую неделю созванивались с дизайнерами и обсуждали статусы задач. А перед стартом проекта даже провели оффлайн встречу с клиентом.

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

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

Забавный оффтоп момент

После встречи с клиентом у меня пробило колесо прямо в центре Питера, в самый час-пик — с лютым снегопадом. Хотя днём температура была +10 градусов.

Чаще всего мы списываемся или созваниваемся с клиентами, чтобы обсудить детали проекта. Но в этот раз так удачно вышло, что встреча прошла оффлайн в Питере — было приятно познакомиться лично. В общем, ловим от такого кайф, поэтому зовите обсудить проект за чашкой кофе.

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

Также дизайнеры собрали 3 мудборда, чтобы определиться со стилем сайта. Мы представили их клиенту — по итогу выбрали смесь живости и технологичности.

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

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

Далее проект перешёл к нам в разработку и начали мы с реализации притчи.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решили использовать его на сайте для ощущения глубины и динамики. Всё-таки, живой сайт делаем.

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

А ещё добавили кастомный скролл

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

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

Вот такой живой сайт получился благодаря анимациям:

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

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

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

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

За время работы над проектом мы решили следующие задачи:

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

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

Вёрстка: HTML, CSS, JS

Анимации: библиотека GSAP и плагин Scroll Trigger

CMS: Wordpress

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

🔗 Обсудить проект и прикинуть стоимость вместе со мной

🔗 Подписывайтесь на наш телеграм канал

🔗 Ищите другие проекты на нашем сайте