Как мы разрабатывали 3D-модели для портала машиностроительного предприятия
- Заказчик
- Машиностроительное предприятие «Винета» существует на рынке с 1996 года. Компания проектирует и изготавливает изделия для военного кораблестроения и гражданского судостроения.
- Задача
- Наши задачи: разработать обновлённый дизайн ресурса, создать удобный портал для партнёров и клиентов компании.
Заказчик
Машиностроительное предприятие «Винета» существует на рынке с 1996 года. С тех пор изменилась не только сама компания, но и её позиционирование.
Цель
Веб-ресурс — визитная карточка любого предприятия — должен не только отражать изменения, которые произошли в структуре бизнеса, но и соответствовать представлениям о современном корпоративном портале. Ресурс должен служить инструментом для автоматизации работы и оптимизации бизнес-процессов.
Задачи и решения
Задача №1: Разработать обновлённый дизайн ресурса.
Наше решение: Разработали дизайн портала, основываясь на обновлённом брендбуке компании и на современных тенденциях веб-разработки в промышленном секторе.
Задача №2: Сделать удобный ресурс для партнёров и клиентов компании.
Наше решение: Представили главную страницу портала в виде презентации — комфортный формат для работы с заказчиками, который отражает современную прогрессивную компанию.
Задача №3: Упростить работу проектировщиков, которые будут подбирать детали для своих проектов.
Наше решение: Разработали оформление каталога, в котором исчерпывающе представлена продукция «Винеты» в виде 3D-моделей.
Ход работы
Работу над любым проектом мы начинаем с проведения аналитики: изучаем нишу, исследуем целевую аудиторию, разбираем техническое задание. Случай с «Винетой» исключением не был. На начальном этапе мы выделили несколько моментов:
- Дизайнерское решение нужно было разработать с учетом брендбука, который предоставил заказчик.
- Важно было сделать особый акцент на каталоге продукции — самой популярной странице сайта.
- Разработать такое дизайнерское решение, которое не только привлечёт внимание посетителей ресурса и будет выгодно смотреться в формате презентации, но и позволит выделить «Винету» среди порталов других промышленных компаний.
Клиент предоставил нам аналитику, которая показала, что основная цель посещения сайта компании — ознакомление с каталогом. Мы разработали структуру сайта, при которой у посетителя сразу есть возможность найти нужную вкладку, а именно каталог. На стартовой странице в него можно попасть сразу двумя способами — выбрать соответствующую вкладку в самом верху страницы или же перейти на неё из главной страницы, представленной в виде презентации. Мы также проанализировали брендбук, предоставленный заказчиком, и остановились на использовании определённых цветов.
В процессе разработки мы проходим десятки этапов — от аналитики, создания прототипа страницы и его тестирования до разработки анимации, вёрстки страниц и SEO-оптимизации. Каждый этап не менее важен, чем предыдущий или следующий. Мы всегда на связи с зауказчиком: ориентируемся на его пожелания, изучаем метрики, предлагаем свои решения, воплощаем в реальность задуманное.
Особенности ниши: 3D-модели
B2B-порталы в промышленном секторе нацелены на то, чтобы представить на сайте в полной мере своё оборудование. Особый акцент делается на 3D-моделях. В случае с «Винетой» мы не только представили каждую позицию в каталоге в виде такой модели, но и оформили главную страницу с использованием 3D-элементов.
Сегодня использование 3D-моделей при разработке веб-ресурсов для компаний промышленного сектора — определённо сложившийся тренд. Конечно, выглядят такие модели крайне эстетично, но помимо эстетики с помощью их использования мы решали ещё одну, не менее важную задачу. Изображения в формате 3D позволяют рассмотреть продукцию со всех сторон, отметить важные детали. Это особенно важно для сотрудников компаний-партнёров, которые заходят на портал компании, чтобы ознакомиться с каталогом продукции для разработки собственных проектов.
Мы также поместили 3D-модели на главную страницу портала. Во-первых, это было изящным решением для компании, которая захотела обновить свой интернет-ресурс в честь крупного юбилея. Во-вторых, это помогло нам выделить «Винету» среди прочего числа ресурсов промышленного сектора и сделать запоминающийся дизайн, который при этом удобен в восприятии.
Дизайн-система
Типография является центральным элементом дизайна в системе идентификации бренда. Guardian Sans Cy — хороший выбор для промышленной отрасли.
При разработке сайта мы использовали готовую цветовую палитру, опираясь на фирменный стиль компании.
Сетка побирается в соответстви с публикуемым контентом. В работе с «Винетой» мы использовали сетку из 12 колонок (102 рх) с отсурами между ними 20 рх.
Небольшие трудности
В процессе работы мы столкнулись с необходимостью сменить несколько ключевых членов команды. Для нас важно, чтобы проект был интересен сотрудникам и при этом они успевали выполнять свои задачи. Поскольку время — наш приоритет, мы немного изменили состав команды. Приятно отметить, что «Винета» с пониманием отнеслась к перестановкам и доверилась нам по всем вопросам. В итоге проект был завершён за 7 месяцев и сдан заказчику вовремя.
Результат
В результате мы создали B2B-портал, привлекающий две целевые аудитории: партнёров компании, которым важно узнать о её работе, и сотрудников, которых интересуют конкретные детали. Для удобства восприятия информации, мы отошли от классической структуры сайта, и оформили его в виде презентации. Так, попадая на главную страницу, можно узнать больше об истории компании, её работе и сотрудниках, а можно сразу перейти к изучению каталога.
Более того, главная страница портала решает задачу по сегментированию аудитории. Для партнёров, которым важно узнать историю компании и познакомиться с командой, мы поместили всю информацию на главную страницу. Оформлена она в виде презентации, которую можно при необходимости представить коллегам. Для сотрудников, которым важно изучить продукцию предприятия, есть кнопка перехода в каталог, которая визуально заметна и привлекательна. Получается, что любому пользователю интуитивно понятно, какую информацию и где он может получить на портале.
Фишки, на которые мы хотим обратить ваше внимание
1. Каталог товаров оформлен таким образом, чтобы можно было быстро найти нужную категорию и продукцию. Для удобства изучения мы представили не только подробные характеристики, но и добавили возможность скачать pdf-файл с этой информацией.
2. Главная страница портала представлена в горизонтальном формате в виде презентации. Такой формат выбран для удобства изучения информации и перехода на нужную страницу.
3. 3D-модели и кастомизированная карта дополняют сайт с практической и эстетической точки зрения. Использование 3D-моделей отвечает трендам современных промышленных порталов и позволяет подробно изучить продукцию компании, а кастомизированная карта сохраняет оформление страницы контактов в едином стиле.
Технические особенности
1. 3D-модели были разработаны на основе фотографий предприятия. Наша команда делала эскизы, предлагала цветовую гамму, обсуждала движение камер между объектами.
2. После создания и загрузки моделей на портал получилась критическая нагрузка на сайт. Мы перерисовывали объекты в SVG, что позволило увеличить скорость загрузки. Это важно, когда мы работаем с сайтами с большим количеством пользователей, ведь не у всех есть мощные устройства, которые могут обрабатывать такой большой объём информации.
3. С заказчиком мы работали по методологии Waterfall, которая подразумевает последовательную разработку продукта с согласованием на каждом из этапов. Внутри команды мы использовали методологию Kanban и работали по еженедельным спринтам, что позволило нам точно распределить сроки и свои ресурсы. Для заказчика такой подход был максимально прозрачен и помогал еженедельно отслеживать результаты работы.