Эко-сайт для чудотеплицы «Сибирский Агроном»
Сделали сайт для алтайской компании «Агроном». Уютный, тёплый, напоминающий об осени, урожае и бабушке, которой нужно подарить новый парник
В далёком 1999 году ребята из барнаульской компании «Агроном» устали смотреть, как мучаются на огородах их родители, бабушки и дедушки, и переизобрели парник. Они сделали его лёгким, не требующим много времени на установку и сил на уход за растениями. С тех пор компания стала производить не только парники, но и другую атрибутику для огородников и садоводов.
Недавно в «Агрономе» придумали новый продукт — чудотеплицу, гибрид парника и теплицы. Настолько крутую, что соответствующий сайт для неё решили заказать у нас.
Недавно в «Агрономе» придумали новый продукт — чудотеплицу, гибрид парника и теплицы. Настолько крутую, что соответствующий сайт для неё решили заказать у нас.
Задачи
- Сделать аккуратный, но эффектный сайт, не похожий на сайты конкурентов.
- Презентовать пользователям товар, рассказать, чем он хорош и как облегчает жизнь садоводов и огородников.
- Увеличить продажи, сделанные с помощью сайта.
- Повысить узнаваемость бренда.
Аналитика
Чтобы решить задачу номер 1 — сделать сайт, не похожий на конкурентов «Агронома» — нам предстояло их дотошно изучить.
Практически все сайты в этой отрасли оказались выполнены в одном стиле: длинные лендинги, много информации о парнике, затем о теплице, сравнение одного с другим, фотографии (часто — некачественные).
Дарья
QA-менеджер
Те же тлен, уныние и шаблоны — в зарубежных интернетах. Поэтому чтобы выделиться, достаточно было сделать клёвый и аккуратный сайт — как мы умеем.
На этапе структуры и прототипа мы решили уйти от традиционной структуры и дать пользователю выбрать, о чем именно он хочет почитать. Реализовали это за счет переключателя, который всегда перед глазами. В любой момент пользователь может переключиться и читать уже про парник, а не теплицу. А сравнение товаров мы аккуратно спрятали во всплывающее окно.
Дарья
QA-менеджер
Арт-директор сразу предложил вариант, который позже ушёл в продакшн: разбить экран на 2 части, на одной показывать парник или теплицу, на другой — рассказывать о них пользователю.
Дизайн
Чтобы мы прониклись продуктом и энтузиазмом заказчиков, ребята из «Агронома» приехали к нам в офис, собрали и показали парник. Разобрали. Потом собрали чудотеплицу и... уехали. Ею мы проникались целые сутки :) Потом всё-таки разобрали, а то как-то не по-фэншую получалось.
Заказчики приехали к нам и поставили теплицу. Прямо в офисе. Потом кто-то накидал в неё пуфики и сидел внутри на обеде. В общем, мы оценили :) А ещё мне и арт-директору подарили маленькие модельки парников.
Татьяна
Руководитель проекта
Обычно, чтобы выяснить вкусы и предпочтения, мы собираем большой и толстый визуальный бриф примеров на 20-25. Долго изучаем его вместе с заказчиком, рассматриваем каждый пример, обсуждаем, что нравится, что — нет, и почему так. Но с «Агрономом» вышло проще: они сами предоставили удачные референсы и рассказали, почему выбрали именно их.
1. Сайты «Молочной культуры» и «Славкофе», где в центре всего — продукт и процесс его создания. Заказчики хотели сделать что-то подобное, по возможности с анимацией и параллаксом.
2. Сайты с необычной типографикой — тёплой, доброй, дружелюбной (эпитет заказчика :)
3. Сайты, которые создают ощущение уюта и тепла. Чтобы всё натурально, экологично и семейно.
4. Копатыч. Медведь-садовод из «Смешариков». Потому что запоминающийся персонаж.
1. Сайты «Молочной культуры» и «Славкофе», где в центре всего — продукт и процесс его создания. Заказчики хотели сделать что-то подобное, по возможности с анимацией и параллаксом.
2. Сайты с необычной типографикой — тёплой, доброй, дружелюбной (эпитет заказчика :)
3. Сайты, которые создают ощущение уюта и тепла. Чтобы всё натурально, экологично и семейно.
4. Копатыч. Медведь-садовод из «Смешариков». Потому что запоминающийся персонаж.
Мы, конечно, всё понимали, но только не Копатыча. К какому месту его приложить — к параллаксу, типографике или эко-теме, чтобы он работал и привлекал пользователей, не понимали. Поговорили с заказчиками, обсудили возможные варианты. Предлагали нарисовать оригинального персонажа — получили отказ. Потом вспомнили, сколько стоят права на использование персонажей «Смешариков», и решили таки отказаться от медведя.
В итоге получилось два варианта главной: белый и зелёный.
В итоге получилось два варианта главной: белый и зелёный.
Сами мы больше склонялись к зелёному варианту, и заказчики в итоге выбрали его. Правок почти не было, только небольшие косметические изменения.
Евгений
Арт-директор
В процессе разработки дизайна мы экспериментировали с цветовой схемой и логотипом «Агронома». Но в итоге решили ничего не менять и использовать уже знакомые покупателям образы, чтобы повысить узнаваемость бренда. А заказчики, как только согласовали дизайн, стали переносить паттерны и иконки с сайта на упаковки и рекламу. Так что теперь онлайн и оффлайн теплицы сочетаются друг с другом.
И, как всегда, мы оставили на сайте милейшего слона.
И, как всегда, мы оставили на сайте милейшего слона.
Разработка
Если вы уже посмотрели сайт, то знаете, что теплица и парник в правой части экрана — не просто картинка. Это 3D-модель, и, как полагается, её можно вертеть во все 360 градусов. При появлении моделька парника раскладывается гармошкой, а модель теплицы вырастает из земли. В общем, красота. И появилась она внезапно.
Мы не думали, что у парника и теплицы будет анимация, что они вообще будут крутиться. Изначально предполагалось статичное изображение. Но потом Даша начала верстать и сделала так, что теперь всё крутиться и магически появляется. А у парника ещё и ткань приподнимается, как будто его открыли для проветривания.
Татьяна
Руководитель проекта
В вёрстку главной этого сайта я влюбилась с первого взгляда :) Ну а как было устоять? Там же целое море анимации. И самое главное — тепличка. Я сразу же предложила: «Давайте делать 3D!». Чтобы можно было покрутить, поиграть и рассмотреть со всех сторон.
На предыдущих проектах я уже сталкивалась с анимацией моделей. Например, на «Сумме технологий». Там и здесь я использовала библиотеку three.js. Это очень мощный инструмент, который позволяет делать просто невообразимые вещи. Создание модели теплицы оказалось процессом довольно кропотливым, но захватывающим. Я просто не могла остановиться :) Постоянно хотелось добавить ещё больше каких-нибудь клёвых фишек.
На предыдущих проектах я уже сталкивалась с анимацией моделей. Например, на «Сумме технологий». Там и здесь я использовала библиотеку three.js. Это очень мощный инструмент, который позволяет делать просто невообразимые вещи. Создание модели теплицы оказалось процессом довольно кропотливым, но захватывающим. Я просто не могла остановиться :) Постоянно хотелось добавить ещё больше каких-нибудь клёвых фишек.
Дарья
Разработчик
Одна из них — томат, в который складываются полоски меню-бутерброда.
Помидорки тоже не было в изначальных планах. Её на верстке придумала Даша. Она нашла этот эффект и предложила добавить на сайт. Хотя сначала там был бургер, но у нас он стал помидоркой.
Татьяна
Руководитель проекта
Кроме того, сайт адаптивен вдоль и поперёк — можно зайти и заказать чудотеплицу или парник с любого устройства. Очень актуальное предложение для этого снежного лета :)
Готовый сайт