Сайт для машиностроительного предприятия “Винета”

Проект

О Компании

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

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

Проект

ЗАДАЧИ & Решения

Сделать удобный ресурс для партнёров и клиентов компании

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

Разработать обновлённый дизайн ресурса

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

Упростить работу проектировщиков, которые будут подбирать детали для своих проектов

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

Проект

Какие этапы мы проходим в процессе реализации проекта

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

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

Account-manager

Проект

Первые шаги

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

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

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

ТИпографика

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

Guardian Sans Cy

Bold
Semibold
Regular

30 px
22 px
20 px
18 px
16 px
14 px

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

Цветовая палитра

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

Основной цвет

RGB: 46 85 153

#2E5599

Цвет текста

RGB: 23 34 66

#172242

Второй цвет текста

RGB: 85 95 118

#555F76

Цвет кнопок

RGB: 255 0 64

#FF0040

Цвет фона

RGB: 242 242 242

#F2F2F2

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

Сетка

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

Визуал

Прототипы

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

Результат

мы создали B2B-портал, привлекающий две целевые аудитории:

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

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

Визуальный дизайн

Главная страница

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

Визуальный дизайн

Каталог товаров

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

Визуальный дизайн

404 Страница

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

Визуальный дизайн

3d Модель

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

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

Проект

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

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