Как мы разрабатывали 3D-модели для портала машиностроительного предприятия: тренд разработки в промышленности

Наш заказчик, машиностроительное предприятие «Винета», существует на рынке с 1996 года. С тех пор изменилась не только сама компания, но и её позиционирование. Очевидно, что и веб-ресурс — визитная карточка любого предприятия — должен не только отражать изменения, которые произошли в структуре бизнеса, но и соответствовать представлениям о современном корпоративном портале. А ещё такие ресурсы являются инструментом для автоматизации работы и оптимизации бизнес-процессов, поэтому к их разработке нужно подойти с особой внимательностью. Мы смогли найти решение, которое позволило систематизировать большой объём представленной на сайте информации, а также добавили визуал, который соответствует трендам в промышленном секторе.    

Задачи и решения

Задача №1: Разработать обновлённый дизайн ресурса.

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

Задача №2: Сделать удобный ресурс для партнёров и клиентов компании.

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

Задача №3: Упростить работу проектировщиков, которые будут подбирать детали для своих проектов.

Наше решение: Разработали оформление каталога, в котором исчерпывающе представлена продукция «Винеты» в виде 3D-моделей.

Так выглядела главная страница сайта компании до начала нашей совместной работы

На такую страницу попадает пользователь при переходе на портал сейчас

Первые шаги

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

1. Дизайнерское решение нужно было разработать с учетом брендбука, который предоставил заказчик.
2. Важно было сделать особый акцент на каталоге продукции — самой популярной странице сайта.
3. Разработать такое дизайнерское решение, которое не только привлечёт внимание посетителей ресурса и будет выгодно смотреться в формате презентации, но и позволит выделить «Винету» среди порталов других промышленных компаний.

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

Владислав Парасий

Account manager

Дизайн-система

Типографика является центральным элементом дизайна в системе идентификации бренда. Guardian Sans Cy — хороший выбор для промышленной отрасли.

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

Сетка подбирается в соответствии с публикуемым контентом. В работе с данным проектом мы использовали сетку из 12 колонок (102 px) с отступами между ними 20 px.

Особенности ниши: 3D-модели

B2B-порталы в промышленном секторе нацелены на то, чтобы представить на сайте в полной мере своё оборудование. Особый акцент делается на 3D-моделях. В случае с «Винетой» мы не только представили каждую позицию в каталоге в виде такой модели, но и оформили главную страницу с использованием 3D-элементов.

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

Мы также поместили 3D-модели на главную страницу портала. Во-первых, это было изящным решением для компании, которая захотела обновить свой интернет-ресурс в честь крупного юбилея. Во-вторых, это помогло нам выделить «Винету» среди прочего числа ресурсов промышленного сектора и сделать запоминающийся дизайн, который при этом удобен в восприятии.

Небольшие трудности

В процессе работы мы столкнулись с необходимостью сменить несколько ключевых членов команды. Для нас важно, чтобы проект был интересен сотрудникам и при этом они успевали выполнять свои задачи. Поскольку время — наш приоритет, мы немного изменили состав команды. Приятно отметить, что «Винета» с пониманием отнеслась к перестановкам и доверилась нам по всем вопросам. В итоге проект был завершён за 7 месяцев и сдан заказчику вовремя.

Результат

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

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

Фишки, на которые мы хотим обратить ваше внимание

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

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

3D-модели и кастомизированная карта дополняют сайт с практической и эстетической точки зрения. Использование 3D-моделей отвечает трендам современных промышленных порталов и позволяет подробно изучить продукцию компании, а кастомизированная карта сохраняет оформление страницы контактов в едином стиле.

Подробную информацию о деталях можно изучить и распечатать при необходимости в каталоге

Для раздела «Контакты» мы создали кастомизированную карту

Технические особенности

1. 3D-модели были разработаны на основе фотографий предприятия. Наша команда делала эскизы, предлагала цветовую гамму, обсуждала движение камер между объектами.
2. После создания и загрузки моделей на портал получилась критическая нагрузка на сайт. Мы перерисовывали объекты в SVG, что позволило увеличить скорость загрузки. Это важно, когда мы работаем с сайтами с большим количеством пользователей, ведь не у всех есть мощные устройства, которые могут обрабатывать такой большой объём информации.
3. С заказчиком мы работали по методологии Waterfall, которая подразумевает последовательную разработку продукта с согласованием на каждом из этапов. Внутри команды мы использовали методологию Kanban и работали по еженедельным спринтам, что позволило нам точно распределить сроки и свои ресурсы. Для заказчика такой подход был максимально прозрачен и помогал еженедельно отслеживать результаты работы.

Команда проекта

CEO Михаил Шрайбман

CTO Денис Нагаев

Аккаунт-менеджер Владислав Парасий

Аналитик Владислав Кольца

Дизайнер Артём Попеня