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