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

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

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

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

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

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

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

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

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

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

Первые шаги

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

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

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

Владислав Парасий (Account manager)

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

  • 3D-модели были разработаны на основе фотографий предприятия. Наша команда делала эскизы, предлагала цветовую гамму, обсуждала движение камер между объектами.

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

  • С заказчиком мы работали по методологии Waterfall, которая подразумевает последовательную разработку продукта с согласованием на каждом из этапов. Внутри команды мы использовали методологию Kanban и работали по еженедельным спринтам, что позволило нам точно распределить сроки и свои ресурсы. Для заказчика такой подход был максимально прозрачен и помогал еженедельно отслеживать результаты работы.

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

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

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

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

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

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

0
16 комментариев
Написать комментарий...
Konstantin Konov

Вы 7 месяцев вот это вот делали? Стиль статьи мерзотный

Ответить
Развернуть ветку
Александр Дизайнер

Ну что вы злой какой ... Они столько пережили, даже уволили из своей дизайн-банды кого-то, судя по содержимому статьи. Нейросеть написала бы понятнее. А так - кейс мусорного уровня, но и такие нужны наверное кому-то... Ничего личного, но дизайнеру повезло с фамилией конечно. Видимо он разработал " кастомизированную карту " в контактах. Мой очень ценный совет (бесплатно) - оставьте обычную карту Яндекса например, сотрите три раза вашу кастомизированную. На синем фоне темно синий текст - вы издеваетесь ?

Ответить
Развернуть ветку
Осьминожка
Автор

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

Ответить
Развернуть ветку
Александр Дизайнер

Вопрос один - хоть у одного члена команды, которых в статье перечислили есть профильное образование, в частности у дизайнера ?

Ответить
Развернуть ветку
Кватум

Здравствуйте! а как так получилось, что у предприятия не оказалось 3D-моделей их собственной продукции?

Ответить
Развернуть ветку
Benz.inn

На кульмане чертили ещё в 1960 году

Ответить
Развернуть ветку
Serge Demichev

Интересно знать какой софт использовали для создания моделей.

Ответить
Развернуть ветку
Осьминожка
Автор

Сергей, спасибо за вопрос и просим прощения за такой долгий ответ с нашей стороны! Мы использовали Blender :)

Ответить
Развернуть ветку
Фиктивный Аккаунт
В результате мы создали B2B-портал, привлекающий две целевые аудитории: партнёров компании, которым важно узнать о её работе, и сотрудников, которых интересуют конкретные детали.

Что вообще? Каких сотрудников? Сотрудники самой компании прекрасно и сами знают что они производят, зачем им сайт?

Партнеры компании, окологосударственные компании, которые покупают эти детальки как часть каких-то коррупционных схем — на этом рынке нет никакой конкуренции.

Скорее всего уебишный сайт решили обновить чисто по-приколу

Ответить
Развернуть ветку
Осьминожка
Автор

В статье мы упомянули не сотрудников самой компании, а сотрудников партнёров, которым нужно изучить продукцию для реализации собственных проектов. Очень просим воздержаться от дискуссии относительно работы предприятия и его партнёров. Мы рассказываем о разработке. Этому и посвящена статья, тому, в чём мы компетентны. Спасибо за понимание :)

Ответить
Развернуть ветку
Urichnsk

Каталог выглядит некрасиво, хоть бы цвета, ракурсы и подачу согласовали.
Видно, что в первый раз делали подобное.

Ответить
Развернуть ветку
Роман Муслимов

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

Ответить
Развернуть ветку
Осьминожка
Автор

Спасибо за вопрос! Пока раскрыть такие детали не можем, но обязательно обновим кейс и расскажем подробнее о метриках :)

Ответить
Развернуть ветку
Vasek Romanov

Интересно было почитать про процесс работы, но итоговый результат слабоват вышел. кроме 3д моделек.

Ответить
Развернуть ветку
Осьминожка
Автор

Спасибо за комментарий! А что хотели бы ещё узнать о процессе?

Ответить
Развернуть ветку
Benz.inn

Каталог Лодки и катера ведет на другой домен который не сделан https://vinetaboat.ru/, это другое юр. лицо?

Ответить
Развернуть ветку
13 комментариев
Раскрывать всегда