Сайт «Юнайтед Панел Груп» — про вторую жизнь берез
Для крупного производителя фанеры и МДФ сделали сайт с анимацией, 3D-моделями и слоном-лесорубом.
Предисловие
Этот кейс пылился на полке с 2016 года. Всё было отрисовано, свёрстано, запрограммировано. Не хватало одной малости: реального контента.
Друзья, мы еще раз настойчиво говорим, пишем и орём во все орала: контент — всему башка. Начинайте его иметь как можно раньше.
Этот кейс пылился на полке с 2016 года. Всё было отрисовано, свёрстано, запрограммировано. Не хватало одной малости: реального контента.
Друзья, мы еще раз настойчиво говорим, пишем и орём во все орала: контент — всему башка. Начинайте его иметь как можно раньше.
~
«Юнайтед Панел Груп» с 1999 года делает из сочных русских березок МДФ и фанеру. Компания покорила рынок уникальностью — фанеру таких форматов больше никто в России не производит. В виде продукции «Юнайтед Панел Груп» русские березки путешествуют по Европе, Азии, Северной Америке, Африке и катаются в Австралию. В связи с чем мы им даже завидуем.
Задачи
На смену устаревшему, пропитанному духом нулевых сайту «Юнайтед Панел Груп» мы должны были сделали новый, который:
- будет современным и удобным;
- поможет пользователю понять, чем отличаются сорта фанеры и какой подойдет именно ему;
- наглядно покажет сферы применения МДФ (древесных плит) и фанеры, доступно представит информацию о них, даст информацию о возможных дефектах и т.д.
Дизайн
Заказчик ещё до мудбордов и визуальных брифов знал, чего ему хочется. Он просмотрел сотни сайтов и отобрал фишки, которые хотел видеть на своём. Больше всего ему понравилось нестандартное меню, которое мы поместили на второстепенные страницы. Экран там делится на три части и та, на которую наведен курсор, расширяется и подсвечивается, раздвигая соседние.
От этой фишки и отталкивались дизайнеры.
От этой фишки и отталкивались дизайнеры.
Заказчик предложил идею с анимированными блоками, но она поставила нас в рамки: пришлось чуть ли ни на каждой странице придумывать оригинальную компоновку. Отсюда — вертикальные блоки в разделах «Документация» и «Логистика».
Даниил
Дизайнер
На главной странице мы поигрались с этой структурой и изменили ее. В итоге главную можно листать, как страницы книги. Разделы переходят из правой части экрана в левую. Все плавно, симпатично.
И еще заказчику нужна была анимация — да побольше! Что мы и устроили :) Ненавязчивая анимация вписана в иконки, показывает процесс производства фанеры, зажигает страны-покупатели на карте. А главная страница живет своей жизнью: если зайти на сайт и ничего не трогать, она сама пролистается и прокрутит все видео и анимации от начала до конца.
И еще заказчику нужна была анимация — да побольше! Что мы и устроили :) Ненавязчивая анимация вписана в иконки, показывает процесс производства фанеры, зажигает страны-покупатели на карте. А главная страница живет своей жизнью: если зайти на сайт и ничего не трогать, она сама пролистается и прокрутит все видео и анимации от начала до конца.
Схема производства и сбыта продукции на сайте шевелится
«Юнайтед Панел Груп» — клиент позитивный. Заказчик подробно объяснял и показывал, что и как должно быть на сайте. Давал интересные комментарии вроде: «Везде всё отлично, но на этой страничке счастья не хватает».
Любовь
Руководитель проекта
Тогда думали, как увеличить количество счастья :) Но и сам заказчик сделал многое для сайта — для главной страницы он сфотографировал завод «Юнайтед Панел Груп». А для каталога продукции снял четыре стороны каждого вида фанеры и древесных плит. Теперь на сайте можно посмотреть, как выглядит настоящая образцовая доска, а не бездушный рендер.
Разработка
Изображение продукции — момент, который стоит расписать отдельно. Заказчик сразу был против банальной фотографии. Но хотел космос: 3D-модель с увеличением, вращением, пометками, прочими заморочками. Это реально, но долго и дорого.
Параллельно шла разработка сайта для «Феррана», где мы сделали на canvas трехмерную формулу и дали ей возможность вращаться. На ее основе собрали интересную штуку для «Юнайтед Панел Груп»: теперь заказчик может загрузить четыре изображения (лицевую сторону фанеры, заднюю и торцы) и получается иллюзия 3D-модельки.
Даниил
Дизайнер
Кроме псевдо 3D-модели в карточке продукции много букаф. Для каждого продукта задается своя информация: сорт, дефекты, цвета, добавляются картинки, описания, документы.
Также много информации, которую мы аккуратно уложили и заставили работать, в разделе «Логистика».
Также много информации, которую мы аккуратно уложили и заставили работать, в разделе «Логистика».
Раздел получился сложным, хотя существует всего три вида доставки для трех видов товара. Но все усложняется тем, что у каждого товара есть куча форматов, и у каждого формата могут быть свои толщины. Пришлось постараться, чтобы объединить эту информацию в одной наглядной и понятной таблице.
Еще в таблицу можно добавить видео или документ, которые объясняют, как происходит погрузка. Для каждого вида транспорта и для некоторых форматов фанеры и МДФ существует своя схема.
Список городов тоже не без заморочек. Он не общий, а зависит от выбранного вида доставки, потому что где-то невозможна контейнерная перевозка, где-то — железнодорожным и т.д. На лету рассчитывается стоимость доставки для каждого отдельного вида перевозки и города.
Еще в таблицу можно добавить видео или документ, которые объясняют, как происходит погрузка. Для каждого вида транспорта и для некоторых форматов фанеры и МДФ существует своя схема.
Список городов тоже не без заморочек. Он не общий, а зависит от выбранного вида доставки, потому что где-то невозможна контейнерная перевозка, где-то — железнодорожным и т.д. На лету рассчитывается стоимость доставки для каждого отдельного вида перевозки и города.
Сергей
Разработчик
И, конечно, животрепещущий вопрос адаптива. Его здесь нет. Да, мы сами удивились, но...
Но клиент сказал НЕТ. Ему не нужен адаптив под мобилки — решили, пусть пользователи разворачивают сайт пальчиками. «Юнайтед Панел Груп» дает клиентам планшеты для работы с внутренней системой покупок — в планах сделать адаптив для них.
Любовь
Руководитель проекта
Так у нас получился нескучный сайт для крупного производства — продолжаем разрушать стереотип, что суровые ребята не дружат с креативом. Еще как дружат, им просто нужна подходящая компания :)
Готовый сайт