Как мы разрабатывали 3D-модели для портала машиностроительного предприятия: тренд разработки в промышленности
Наш заказчик, машиностроительное предприятие «Винета», существует на рынке с 1996 года. С тех пор изменилась не только сама компания, но и её позиционирование. Очевидно, что и веб-ресурс — визитная карточка любого предприятия — должен не только отражать изменения, которые произошли в структуре бизнеса, но и соответствовать представлениям о современном корпоративном портале. А ещё такие ресурсы являются инструментом для автоматизации работы и оптимизации бизнес-процессов, поэтому к их разработке нужно подойти с особой внимательностью. Мы смогли найти решение, которое позволило систематизировать большой объём представленной на сайте информации, а также добавили визуал, который соответствует трендам в промышленном секторе.
Задачи и решения
Задача №1: Разработать обновлённый дизайн ресурса.
Наше решение: Разработали дизайн портала, основываясь на обновлённом брендбуке компании и на современных тенденциях веб-разработки в промышленном секторе.
Задача №2: Сделать удобный ресурс для партнёров и клиентов компании.
Наше решение: Представили главную страницу портала в виде презентации — комфортный формат для работы с заказчиками, который отражает современную прогрессивную компанию.
Задача №3: Упростить работу проектировщиков, которые будут подбирать детали для своих проектов.
Наше решение: Разработали оформление каталога, в котором исчерпывающе представлена продукция «Винеты» в виде 3D-моделей.
Первые шаги
Работу над любым проектом мы начинаем с проведения аналитики: изучаем нишу, исследуем целевую аудиторию, разбираем техническое задание. Случай с «Винетой» исключением не был. На начальном этапе мы выделили несколько моментов:
- Дизайнерское решение нужно было разработать с учетом брендбука, который предоставил заказчик.
- Важно было сделать особый акцент на каталоге продукции — самой популярной странице сайта.
- Разработать такое дизайнерское решение, которое не только привлечёт внимание посетителей ресурса и будет выгодно смотреться в формате презентации, но и позволит выделить «Винету» среди порталов других промышленных компаний.
В процессе разработки мы проходим десятки этапов — от аналитики, создания прототипа страницы и его тестирования до разработки анимации, вёрстки страниц и SEO-оптимизации. Каждый этап не менее важен, чем предыдущий или следующий. Мы всегда на связи с заказчиком: ориентируемся на его пожелания, изучаем метрики, предлагаем свои решения, воплощаем в реальность задуманное.
Дизайн-система
Типографика является центральным элементом дизайна в системе идентификации бренда. 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 Денис Нагаев
Аккаунт-менеджер Владислав Парасий
Аналитик Владислав Кольца
Дизайнер Артём Попеня
Вы 7 месяцев вот это вот делали? Стиль статьи мерзотный
Ну что вы злой какой ... Они столько пережили, даже уволили из своей дизайн-банды кого-то, судя по содержимому статьи. Нейросеть написала бы понятнее. А так - кейс мусорного уровня, но и такие нужны наверное кому-то... Ничего личного, но дизайнеру повезло с фамилией конечно. Видимо он разработал " кастомизированную карту " в контактах. Мой очень ценный совет (бесплатно) - оставьте обычную карту Яндекса например, сотрите три раза вашу кастомизированную. На синем фоне темно синий текст - вы издеваетесь ?
Здравствуйте! а как так получилось, что у предприятия не оказалось 3D-моделей их собственной продукции?
На кульмане чертили ещё в 1960 году
Интересно знать какой софт использовали для создания моделей.
Сергей, спасибо за вопрос и просим прощения за такой долгий ответ с нашей стороны! Мы использовали Blender :)
В результате мы создали B2B-портал, привлекающий две целевые аудитории: партнёров компании, которым важно узнать о её работе, и сотрудников, которых интересуют конкретные детали.
Что вообще? Каких сотрудников? Сотрудники самой компании прекрасно и сами знают что они производят, зачем им сайт?
Партнеры компании, окологосударственные компании, которые покупают эти детальки как часть каких-то коррупционных схем — на этом рынке нет никакой конкуренции.
Скорее всего уебишный сайт решили обновить чисто по-приколу