Сайт «Спелые фрукты»: как я рассказал о производстве нарезанных фруктов так, что клиент сразу заказал второй сайт

Кратко. Имиджевый сайт для производства нарезанных фруктов: страница о компании, 3 страницы о производстве (ананас, папайя, питахайя) и анимированная иллюстрация завода. Первый дизайн клиент принял со словами «полностью понравились», а после сдачи доверил мне сайт «Артфрут», проект в несколько раз больше.

Проект: около 4 месяцев

Работы: структура, тексты, арт-дирекшн, дизайн, вёрстка, анимация

Ананас в стакане

Заказ пришёл через партнёра, с которым мы давно работаем. «Спелые фрукты» режут и упаковывают фрукты. Казалось бы, что тут рассказывать: на полке это просто ананас в стакане. А вот как он туда попал, покупатель не знает, и в этом вся история.

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

Бриф и задача

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

Но в исходную структуру эта история просто не помещалась, поэтому я предложил её перестроить. Главной стала страница о компании, а у каждого продукта появилась своя страница о том, как его делают.

Перевод с языка технолога

В описании производства было написано: «содержание сахара не ниже 15 % по Брикс» и «шестиэтапная проверка качества». Технологу всё ясно, а вот покупателю эти слова ничего не скажут.

На сайте я рассказал то же самое, но в другом стиле. Ананасы растут в Коста-Рике, и выращивают их специально под требования компании. Потом каждую партию проверяют 6 раз: на поле, при сборе, при отгрузке, когда перегружают с корабля в машину, на приёмке и перед отправкой. И ещё одна деталь, которая цепляет сразу: нарезанный ананас обычно хранится 2 дня, а этот целых 7, потому что его режут так, чтобы сохранить естественную защиту.

Lottie анимация

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

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

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

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

Для клиента это просто красивая анимация. А за ней несколько дней работы 4 человек и десятки проверенных версий. Так я работаю с любой мелочью на сайте - это внимание к деталям, из которых и получается качество.

Что получилось и что было дальше

• Имиджевый сайт: страница о компании, 3 страницы о производстве, контакты; версии для компьютера, планшета и телефона
• Анимированная иллюстрация производства
• Слова клиента: «Выглядит уже намного лучше, прям попадает. Давайте делать дальше!»
• Проект сдан. Публикацию ведёт команда клиента; здесь показана сданная версия

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

У вас сложное производство?

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